CSS die nergens gebruikt wordt, maar wel geladen wordt

Je hebt geïnvesteerd in een professionele website. Alles ziet er strak uit, de content staat live, en je denkt: klaar. Maar dan hoor je ineens van klanten dat je site ‘langzaam’ is. Of erger nog: je ziet in je statistieken dat mensen afhaken voordat ze überhaupt iets gelezen hebben. En jij vraagt je af: waar gaat het mis? Een van de meest onderschatte oorzaken van een trage website: CSS die nergens gebruikt wordt, maar wel door je browser geladen moet worden. Het staat niet op je pagina, maar zit wel in de weg.

Waarom je browser onnodige CSS blijft ophalen bij elke HTML-pagina

Wanneer een gebruiker jouw website bezoekt, vraagt de browser om een HTML-pagina, maar deze komt nooit alleen. Direct worden er stylesheets meegestuurd: css-bestanden die de opmaak van de pagina bepalen. Ongeacht of deze css-code op dat moment daadwerkelijk nodig is, haalt de browser ze op.

Zelfs bij het laden van een eenvoudige contactpagina kan de browser onbewust css-bestanden binnenhalen van complexe scripts zoals sliders of tabcomponenten die alleen op de homepage worden gebruikt. Dit verhoogt de laadtijd van je pagina en legt onnodige druk op de server. Ontwikkelaars moeten ervoor zorgen dat alleen de relevante css wordt geladen, zodat de gebruikerservaring sneller en efficiënter wordt, ongeacht de browser die gebruikt wordt, zoals Google Chrome of Firefox.

Hoe ongebruikte CSS caching vertraagt en je website stroperig maakt

Browsers maken gebruik van caching om de laadtijden van websites te optimaliseren. Dit betekent dat eerder ingeladen bestanden, zoals een stylesheet, worden opgeslagen, zodat ze niet opnieuw hoeven te worden verzonden bij een volgend bezoek. Echter, wanneer jouw CSS-bestanden onnodig groot zijn door ongebruikte regels, zoals selectors die nergens voor nodig zijn, kan dit averechts werken.

Een hoofdbestand dat vol staat met overbodige styling vertraagt de verwerking van de pagina. Bovendien, als je wijzigingen aanbrengt in je CSS, moet de browser het hele css-bestand, zoals style.css, opnieuw ophalen, zelfs voor pagina's waar niets is veranderd. Dit leidt tot trage laadtijden, vooral op mobiele apparaten of bij langzame verbindingen. Bezoekers ervaren vertraging, wat resulteert in conversieverlies. Om dit te voorkomen, is het raadzaam om je CSS te controleren op ongebruikte elementen en deze te verwijderen of te optimaliseren. Daarnaast kan het samenvoegen van css-bestanden en het gebruik van een cdn bijdragen aan snellere laadtijden in alle browsers.

Ongebruikte CSS beïnvloedt je SEO-score bij zoekmachines

Zoekmachines zoals Google hechten steeds meer waarde aan gebruikservaring en snelheid, waarbij de manier waarop CSS-bestanden worden geladen een cruciale rol speelt. Grote stylesheets met veel ongebruikte code kunnen er namelijk voor zorgen dat belangrijke delen van de pagina, zoals titels of afbeeldingen, pas later verschijnen. Dit resulteert in een lagere First Contentful Paint en Time to Interactive, wat de indruk wekt dat je pagina traag is, ook al is de content zelf van hoge kwaliteit. Om dit te verbeteren, is het essentieel om CSS die nergens gebruikt wordt maar wel geladen wordt, te optimaliseren.

Het gebruik van hulpprogramma's om deze ongebruikte CSS te identificeren en te verwijderen, kan helpen om de laadtijd te verkorten. Bovendien kan het automatisch uitvoeren van deze optimalisaties, zoals het instellen van cache-headers voor extern geladen CSS-bestanden, de snelheid van je website aanzienlijk verhogen. Door de juiste selectors en de structuur van je layout te herzien, zorg je ervoor dat alleen de noodzakelijke elementen worden geladen, wat niet alleen de gebruikservaring verbetert maar ook je ranking in zoekmachines ten goede komt.

Hoe ongebruikte CSS je HTML-structuur vervuilt

Veel websites maken gebruik van thema’s, pagebuilders of plug-ins die automatisch CSS-bestanden genereren. Hierdoor worden er vaak klakkeloos stijlen aan je HTML-pagina’s toegevoegd. In de broncode van één pagina kan er meer dan 200 KB aan CSS aanwezig zijn, terwijl slechts een klein percentage daadwerkelijk als selector wordt gebruikt. Dit leidt tot een rommelige situatie onder de motorkap, met eindeloze stijlen voor knoppen, modals of carrousels die alleen gebruikt worden in specifieke omstandigheden.

Dergelijke CSS-bestanden worden wel geladen, maar zijn niet zichtbaar op de pagina, waardoor de snelheid van de website afneemt. Om de prestaties van de website te verbeteren, is het belangrijk om onnodige headers te minimaliseren en alleen de benodigde CSS te behouden. Door dit te doen, kun je de pagina sneller maken en de onderhoudbaarheid verbeteren. Vergeet ook niet dat ook een stukje JavaScript kan bijdragen aan de optimalisatie van de verschillende browsers die je bezoekers gebruiken.

Hoe je ongebruikte CSS opspoort en opruimt (zonder je website te slopen)

De oplossing begint met inzicht. Gebruik bijvoorbeeld Chrome DevTools om te analyseren welke CSS-bestanden daadwerkelijk worden gebruikt op een pagina. Tools als PurgeCSS of UnCSS kunnen automatisch onnodige regels verwijderen, mits goed ingesteld. Werk je met Tailwind? Dan kun je de ingebouwde purge-functie gebruiken om alleen noodzakelijke styles te genereren. Het is ook belangrijk om te letten op CSS die nergens gebruikt wordt maar wel geladen wordt; dit kan je cache onnodig vullen en de laadtijd van de pagina vertragen. Door CSS slim op te splitsen en alleen de kritieke stijlen direct mee te laden, maak je de deel van de pagina sneller te maken. Als je werkt met een modern CMS zoals Statamic, kun je per template bepalen welke CSS-bestanden daadwerkelijk nodig zijn en welke URL's je kunt optimaliseren.

Zo minimaliseer je ongebruikte CSS in je website

Het opschonen van je CSS bestanden hoeft geen nachtmerrie te zijn. Wanneer je het gestructureerd aanpakt, kun je aanzienlijke snelheidswinst boeken:

1. Analyseer welke CSS daadwerkelijk gebruikt wordt met Chrome DevTools (tab ‘Coverage’)

2. Verwijder ongebruikte regels met tools als PurgeCSS of UnCSS en zorg ervoor dat geen CSS bestand laadt dat nergens gebruikt wordt

3. Splits je CSS op in critical en non-critical onderdelen

4. Laad alleen CSS in die relevant is per pagina

5. Vermijd pagebuilders die automatisch gigantische stylesheets genereren

Conclusie: sneller, schoner en beter vindbaar zonder overbodige CSS

Een snelle website hangt niet alleen af van goede hosting of caching. Vaak ligt de oorzaak dieper, in de structuur van je site. Overbodige CSS leidt ertoe dat je browser meer moet verwerken dan noodzakelijk, waardoor je caching minder optimaal functioneert. Daarnaast raakt je HTML vervuild en worden je pagina's door zoekmachines als traag geclassificeerd.
Door actief te optimaliseren en enkel de benodigde elementen te laden, maak je je website sneller, overzichtelijker en verhoog je de vindbaarheid.