Hoe Beperk Niet-Gebruikte CSS?

Laatst bijgewerkt 1 maand geleden door Ecem Ertürk

De waarschuwing “Verminder ongebruikte CSS” in PageSpeed Insights geeft aan dat je website onnodige CSS laadt, wat de paginasnelheid vertraagt. Ongbruikte CSS vereist meer gegevens die de browser moet downloaden, parseren en uitvoeren, wat de prestaties kan aantasten. Hier is hoe je onnodige CSS kunt verminderen en de laadtijden van je pagina kunt verbeteren. Een SEO bureau kan je helpen om deze technische optimalisaties door te voeren, zodat je website niet alleen sneller laadt, maar ook beter presteert in zoekmachines. Dit leidt tot een verbeterde gebruikerservaring en hogere zoekresultaten door het verbeteren van de paginasnelheid, een belangrijke rankingfactor voor SEO.

Wat is ongebruikte CSS?

Ongbruikte CSS zijn CSS-regels die in het stylesheet staan, maar niet op enige elementen op de huidige pagina worden toegepast. Zonder de visuele uitstraling of functionaliteit van de pagina te verbeteren, nemen deze regels ruimte in beslag en verhogen ze de laadtijden.

Hoe ongebruikte CSS te detecteren

Het maximaliseren van de efficiëntie van je site hangt af van het identificeren van onnodige CSS. Hieronder worden de verschillende vormen van ongebruikte CSS beschreven die je kunt tegenkomen, evenals hoe je ze kunt vinden:

• Chrome DevTools – Coverage-tab: De Coverage-tab van Chrome DevTools toont, tijdens het laden van een pagina, zowel je CSS-gebruik als -niet-gebruik. Je kunt controleren welke CSS-regels moeten worden verwijderd en welke zeer belangrijk zijn.
• Externe tools: Purge CSS, UnCSS en CSS Purge analyseren de HTML en JavaScript van je website om automatisch onnodige CSS-regels te verwijderen.
• Audit met Lighthouse: De Lighthouse-tool van Google wijst op CSS die niet wordt gebruikt in prestatie-audits, waardoor er een duidelijk pad voor verbetering wordt geboden.

Soorten ongebruikte CSS

• Globale ongebruikte CSS: Stijlen die universeel op het web worden gebruikt, maar niet op specifieke pagina’s.
• Pagina-specifieke ongebruikte CSS: Stijlen die op een pagina zijn geladen, maar niet op een enkel element op die specifieke pagina zijn toegepast.
• Framework- of bibliotheek-CSS: Vaak bevat CSS van externe bronnen zoals Bootstrap onnodige stijlen die nooit in je werk worden gebruikt.

Door deze soorten ongebruikte CSS te detecteren en te verwijderen, kun je de laadtijden en de algehele prestaties van de site verbeteren.

Hoe Ongebruikte CSS de Prestaties Vertraagt

Ongbruikte CSS kan de prestaties van je website op verschillende manieren aanzienlijk vertragen:

• Verhoogde bestandsgrootte: Het laden van grote stylesheets met ongebruikte CSS dwingt de browser om meer gegevens te downloaden, waardoor de laadtijden worden verlengd.
• Trage rendering: De browser moet het hele CSS-bestand, inclusief nutteloze regels, verwerken, wat de weergave van zichtbare inhoud vertraagt.
• Verspilde bronnen: Vooral op mobiele apparaten gebruikt de browser tijd en geheugen om CSS-regels te verwerken die niet worden toegepast, wat de prestaties in gevaar brengt.

Door ongebruikte CSS te verminderen, minimaliseer je deze problemen, wat leidt tot snellere laadtijden van pagina’s en een soepelere gebruikerservaring.

Hoe Ongebruikte CSS te Verminderen:

• Gebruik Chrome DevTools om ongebruikte CSS te identificeren: Op een specifieke pagina biedt Chrome DevTools een “Coverage”-tabblad dat de relatieve belasting van CSS in verhouding tot het werkelijke gebruik toont. Dit stelt je in staat om de elementen van je stylesheet te pinpointen die mogelijk kunnen worden verwijderd of verbeterd.
• Verwijder Onnodige CSS: Nadat je onnodige CSS hebt ontdekt, haal je deze uit je stylesheet om de footprint te verkleinen. Concentreer je op het verwijderen van wereldwijd onnodige code of regels die nergens op de huidige pagina van toepassing zijn.
• Implementeer kritieke CSS: Kritieke CSS is de CSS die nodig is om inhoud boven de vouw op te maken. Terwijl niet-kritieke CSS kan worden uitgesteld of asynchroon kan worden geladen om laadsnelheden te verbeteren, kun je deze CSS rechtstreeks in je HTML inlinen voor snellere rendering.
• Gebruik CSS-minificatie-tools: Tools zoals PurifyCSS, UnCSS of PostCSS kunnen automatisch onnodige CSS-regels vinden en verwijderen. Deze tools onderzoeken je website om regels te vinden en te verwijderen uit je CSS-bestanden die niet door de inhoud worden toegepast.
• Adopteer Modulaire CSS: Overweeg om je CSS op te splitsen in kleinere, modulaire bestanden die alleen de benodigde stijlen voor specifieke pagina’s of componenten laden. Door de CSS die voor elke pagina wordt gedownload te verlagen, verhoogt deze methode de prestaties van de pagina.

Het optimaliseren van je website voor snelheid en prestaties hangt sterk af van het verlagen van onnodige CSS-lading. Het vinden en verwijderen van nutteloze stijlen, en vervolgens het gebruik van tools om het proces te automatiseren, zal je helpen om laadtijden te verlagen, de gebruikerservaring te verbeteren en je SEO-resultaten te verhogen. Regelmatige audits met behulp van Lighthouse of GTmetrix helpen om je CSS in optimale staat te houden.

Voor meer details, bezoek de Chrome Developer Guide.