Overbodige CSS in WordPress verwijderen

Overbodige CSS in WordPress verwijderen

Het verwijderen van CSS die je niet echt nodig hebt, helpt om de performance en gebruikerservaring van je website te verbeteren. Maar wat is CSS eigenlijk? Wanneer spreken we van overbodige CSS? En hoe kun je overbodige CSS in WordPress verwijderen?

Wat is CSS?

CSS (Cascading Style Sheets) is een scripttaal die gebruikt wordt om het uiterlijk van je WordPress website te bepalen. Hierbij kun je denken aan kleuren, lettertypes, borders, marges, enzovoorts. Je WordPress thema heeft bijvoorbeeld een eigen CSS; het meeste staat in één style.css bestand. Ook WordPress plugins maken gebruik van een eigen CSS bestandje. Als je bijvoorbeeld gebruik maakt van een contactformulier plugin, dan heeft die plugin zijn eigen CSS om de formulieren die je aanmaakt vorm te geven. 

Over het algemeen zijn CSS bestandjes relatief klein en worden ze snel geladen. Maar als je heel veel CSS bestandjes op je WordPress site hebt, dan kunnen ze gezamenlijk een merkbare impact op de snelheid en performance hebben. In dat geval is overbodige CSS in WordPress verwijderen zeker aan te raden. 

Hoe weet ik welke CSS in WordPress overbodig is?

Overbodige CSS in WordPress is CSS code die wordt geladen maar eigenlijk niet nodig is om de betreffende webpagina (of een element op die webpagina) op de gewenste manier weer te geven. Hoewel ongebruikte CSS in principe geen kwaad kan, moet je er wel rekening mee houden dat de extra code zorgt dat het iets langer duurt voordat een webpagina geladen is, wat zorgt voor een slechtere gebruikerservaring. Langere laadtijden kunnen ook een negatieve impact hebben op je ranking in zoekmachines – wat weer kan leiden tot minder webverkeer.

Als je weinig tot geen kennis hebt van CSS, dan kun je gebruik maken van Google Pagespeed Insights om te bekijken wat de impact is van eventuele overbodige CSS op jouw WordPress site. Nadat je de URL van je website hebt ingevoerd, wordt er een analyse gedaan. Op de pagina met resultaten van de analyse scrol je vervolgens naar het ‘Aanbevelingen’ gedeelte. Hier wordt de geschatte besparing weergegeven die je kunt realiseren middels het verwijderen van overbodige CSS.

Hoe kan ik overbodige CSS in WordPress verwijderen?

Handmatig overbodige CSS in WordPress verwijderen is eigenlijk niet te doen. Zelfs als je redelijk wat kennis van CSS hebt, is ongebruikte CSS in WordPress soms lastig te vinden en te verwijderen. Het is makkelijker om gebruik te maken van een plugin zoals WP Rocket. Deze methode is ook geschikt voor beginners.

Om te beginnen moet je de WP Rocket plugin installeren en activeren. Vervolgens ga je naar Instellingen > WP Rocket en daarna naar het tabblad voor bestandsoptimalisatie. Als je hier een stukje naar beneden scrolt, kom je bij een sectie voor CSS bestanden. Daar vink je de optie ‘Optimize CSS delivery’ aan. Vergeet niet om de wijzigingen op te slaan.

De plugin zal dan een CSS bestand genereren dat alleen de CSS code bevat die noodzakelijk is om het zichtbare gedeelte van je website weer te geven. Dat bestand wordt als eerste geladen, zodat je webpagina’s direct worden weergeven. Pas daarna worden alle andere CSS bestanden geladen met een techniek die ‘deferred loading’ heet.  

Tot slot

Zodra je overbodige CSS hebt uitgeschakeld met WP Rocket, kun je je website performance nogmaals testen met Google Pagespeed Insights. Dan zie je meteen of het echt verschil heeft gemaakt! 

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Medaille-buddy

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.