WebsiteNazorg wenst je fijne feestdagen. Van 25 december t/m 1 januari zijn wij gesloten.
Voor spoedgevallen is onze helpdesk beschikbaar.

Beperk niet-gebruikte css

< 1 min read

De weergave van jouw website wordt voornamelijk bepaald door CSS. Met name bij websites als WordPress zullen thema’s en plugins bergen aan ongebruikte CSS naar de gebruiker sturen. Google PageSpeed Insights geeft dan de melding “Beperk niet-gebruikte css” of in het Engels “Reduce unused CSS”.

Handmatig is de oplossing echt een monsterklus. Feitelijk moet je via webhooks in WordPress alle CSS bestanden offloaden en nieuwe CSS bestanden per pagina opbouwen met enkel de CSS die daadwerkelijk nodig is. Wanneer je in PageSpeed Insights kijkt laat Google een lijst zien met alle CSS bestanden die in gebruik zijn en de hoeveelheid CSS die mogelijk bespaard kan worden door deze te optimaliseren. In veel gevallen ligt de besparing rond de 98%.

Met een goede cache plugin valt dit probleem vaak goed te ondervangen. Die plugin maakt dan gebruik van een externe dienst die per pagina naar jouw site kijkt; alle CSS naar binnen trekt en alles schrapt wat niet nodig is. Die externe dienst zal dan de overgebleven CSS in een enkel bestand stoppen en dat bestand terugleveren aan jouw website. Jouw website zal dan enkel dat CSS bestand opvragen tijdens het laden van de pagina.

Arjan Olsder