Los 'Remove Unused CSS' op in Lighthouse

Laatst beoordeeld door Arjen Karel in februari 2026

Wat is ongebruikte CSS?

Ongebruikte CSS bestaat uit CSS-declaraties die nergens op een webpagina worden gebruikt. Het is vrij normaal dat een deel van de CSS niet wordt gebruikt. Bijvoorbeeld omdat sommige CSS-declaraties zijn geschreven voor een ander apparaat, zoals een desktop of mobiel. Soms omdat een element dat in de stylesheet wordt beschreven (zoals een knop) niet op deze specifieke pagina wordt gebruikt. Ongebruikte CSS komt vaak voor wanneer je een framework zoals Bootstrap gebruikt, waarbij standaard veel meer elementen in de CSS worden beschreven dan je ooit zult gebruiken. Of wanneer je je pagina opnieuw hebt ontworpen, maar bent vergeten de oude CSS-elementen te verwijderen.

Waarom is ongebruikte CSS slecht voor de paginasnelheid?

CSS vertraagt het laden van de pagina. Wanneer een pagina wordt geladen, haalt de browser eerst de HTML van deze pagina op. Deze HTML wordt omgezet in DOM Nodes. Daarna haalt de browser alle stylesheets op. De stijlen in deze CSS-bestanden worden ook omgezet naar een ander formaat, namelijk het CSSOM. Het DOM en het CSSOM worden gecombineerd in een render tree. Pas wanneer deze render tree is gebouwd, begint een browser met het tekenen van de eerste content.

Door dit mechanisme zullen CSS-bestanden altijd het renderen van je webpagina blokkeren. Wanneer een CSS-bestand groter is dan het zou moeten zijn, duurt het langer om dit bestand te downloaden en dat veroorzaakt de eerste vertraging. Wanneer een CSS-bestand ongebruikte CSS bevat, duurt het langer om de render tree te bouwen.

De gemiddelde pagina levert 79 KB aan CSS op mobiel, maar volgens de 2024 Web Almanac wordt 52 KB daarvan niet gebruikt op de huidige pagina. Dat is 66% verspilde CSS. In het 90e percentiel bereikt ongebruikte CSS 212 KB. En 85% van alle pagina's faalt voor de render-blocking resources audit, waarbij CSS de hoofdoorzaak is.

Ongebruikte CSS vertraagt direct First Contentful Paint (FCP) en Largest Contentful Paint (LCP) omdat de browser geen pixels zal tekenen totdat alle CSS is gedownload en geparsed. Op pagina's met zware CSS beïnvloedt het ook INP omdat grotere stylesheets de kosten van stijlhertberekeningen tijdens gebruikersinteracties verhogen.

Hoe vind je ongebruikte CSS handmatig?

In Google Chrome kun je ongebruikte CSS bekijken in het Code Coverage overzicht. Code Coverage is onderdeel van Chrome DevTools. DevTools is een reeks ingebouwde tools die beschikbaar zijn op elke Chrome-browser.

Open eerst de DevTools met de sneltoets Ctrl-Shift-J. Typ vervolgens Ctrl-Shift-P om het Command Palette te openen. Typ nu 'coverage'. Selecteer coverage en herlaad de pagina. Je ziet nu een overzicht van de CSS en JavaScript bestanden die door de pagina worden geladen en gebruikt. Daarnaast kun je zien hoe groot de bestanden zijn en hoeveel van de code daadwerkelijk wordt gebruikt. Klik op een CSS-bestand om te zien welke CSS-regels wel (groen) en welke CSS-regels niet (rood) op de huidige pagina worden gebruikt.

Hoe los je de 'remove unused CSS' waarschuwing op?

Er zijn verschillende manieren om de melding 'remove unused CSS' in Lighthouse op te lossen. Als het om de een of andere reden niet mogelijk is om de waarschuwing op te lossen, kun je de CSS-weergave optimaliseren om ervoor te zorgen dat ongebruikte CSS minder invloed heeft op de laadtijd van je pagina. Ik zal hieronder kort de opties bespreken die je hebt voor het oplossen van ongebruikte CSS.

1. Verwijder de ongebruikte CSS handmatig

De meest logische en beste manier, maar ook de meest arbeidsintensieve manier, is natuurlijk het handmatig verwijderen van de ongebruikte CSS. De stappen zijn eenvoudig:

1. Maak een back-up van je originele CSS-bestanden. Je verwijdert misschien te veel CSS.
2. Open het tabblad Code Coverage in Google Chrome en bekijk per CSS-bestand welke declaraties je niet nodig hebt.
3. Open het CSS-bestand op de server (of lokaal) en controleer elke ongebruikte CSS-declaratie. Bepaal of deze verwijderd kan worden. Maar wees voorzichtig: een ongebruikte CSS-declaratie op de ene pagina is misschien nodig op een andere pagina. Dit moet je zelf beoordelen!
4. Controleer per CSS-declaratie of deze niet gedupliceerd is in de CSS. Dubbele CSS wordt ook gemarkeerd als ongebruikt.
5. Controleer elke CSS-regel op shorthand methodes. Is het mogelijk om de CSS in te korten? Kort deze dan in!

2. Splits de CSS op in meerdere bestanden

Er is een eenvoudige manier om het aantal CSS-regels snel te verminderen! Laad alleen de stijlen die je nodig hebt voor je apparaat. Je pagina wordt vaak bezocht op mobiel. Je hoeft de stijlen voor desktop en print eigenlijk niet te downloaden voor dit mobiele apparaat. Het niet downloaden van deze stijlen bespaart tijd en verkort zo de critical request chain in Lighthouse.

Gebruik hiervoor het media attribuut. Het media attribuut zorgt ervoor dat een stylesheet alleen wordt gebruikt als het media attribuut overeenkomt met de media die je op dat moment gebruikt.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
 media="screen and (min-device-width: 1024px)">

Je kunt ook de truc met het media attribuut gebruiken om niet-kritieke CSS te laden zonder het renderen te blokkeren:

<link rel="stylesheet" href="non-critical.css" media="print"
      onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

Dit laadt de CSS zonder render-blocking door het te markeren als media="print", en schakelt vervolgens over naar media="all" zodra het geladen is.

3. Gebruik een automatische CSS opschoon tool

Er zijn een aantal slimme tools die je CSS-bestanden automatisch voor je kunnen opschonen en alle ongebruikte CSS-referenties kunnen verwijderen. Hoewel deze tools verbazingwekkend goed werken, zijn ze niet foutloos. Soms verwijderen deze tools te veel CSS-declaraties. Gebruik ze dus zorgvuldig en controleer je CSS altijd zelf. De beste CSS opschoon tool is PurgeCSS. PurgeCSS draait op Node.js en integreert met Webpack, PostCSS en Vite. Het gebruikt content extractors om je HTML, JavaScript en template bestanden te scannen op class names, waarna het alle CSS-selectors verwijdert die niet gevonden worden. Je kunt ook PurifyCSS online proberen voor een snelle analyse.

4. Critical CSS

Critical CSS is een verzameling CSS-regels die nodig zijn in de viewport (het zichtbare deel) van je website. Met andere woorden: Critical CSS is de CSS die vereist is om het zichtbare deel van je pagina te renderen.

Er zijn een aantal tools die Critical CSS uit je pagina kunnen extraheren. De Critical CSS wordt vervolgens inline geplaatst, in de head van je pagina, terwijl het originele CSS-bestand asynchroon wordt geladen (zodat de browser het later kan gebruiken).

Dit lost het probleem van ongebruikte CSS niet volledig op. Uiteindelijk zal de ongebruikte CSS worden geladen en geparsed, maar je browser zal er tijdens de eerste renderfase geen last van hebben.

De meest gebruikte tool om Critical CSS te vinden en te extraheren is het Node.js script Critical. Er zijn ook online tools zoals Critical Path CSS Generator.

5. Minify de CSS-bestanden

Ongebruikte CSS vertraagt een pagina, zoals je hierboven hebt gelezen, op 2 manieren. De eerste is omdat de CSS-bestanden groter zijn en het daarom meer tijd kost om ze te downloaden.

We kunnen dat probleem tegengaan door de bestandsgrootte van de CSS te verkleinen door de CSS-bestanden te minifyen. Dat wordt gedaan door middel van een CSS minifier. Een CSS minifier verkleint CSS-bestanden door spaties, opmerkingen en opmaak te verwijderen. Ook kan een CSS minifier variabelen en CSS-code herschrijven zodat het minder bytes in beslag neemt om over te dragen.

Een bekende CSS minify tool is css-minify. Minify al je CSS-bestanden via de command line met het commando css-minify -f filename. Er zijn ook verschillende online CSS minifiers zoals cssminifier.com.

6. Hercompileer je CSS framework

Gebruik je een CSS framework zoals Bootstrap CSS? Dat is een CSS framework waarmee je je hele site kunt stijlen. Dit framework is zo compleet dat de kans groot is dat je grote delen ervan nooit zult gebruiken.

Gelukkig hebben de makers van Bootstrap en andere CSS frameworks hier rekening mee gehouden. Dit framework is geschreven in SASS. Dat is een taal die erg lijkt op CSS. Het bestaat uit verschillende kleine SASS-bestanden die eenvoudige variabelen en functies kunnen gebruiken. Dit maakt het makkelijk om met een beetje kennis het framework zelf aan te passen en te personaliseren. Je kunt simpelweg delen weglaten die je niet gebruikt en het eenvoudig compileren tot 1 definitief CSS-bestand.

Zorg er ook voor dat je een CSS framework niet ongewijzigd van het standaard CDN laadt. Download het framework en compileer het met SASS precies zoals jij het wilt, met alleen de CSS-classes die je gebruikt.

7. Overweeg een andere CSS-strategie

Wil je echt snel zijn? Dan kan het een idee zijn om je CSS-strategie te heroverwegen. Hoe dat gebeurt, hangt af van je site. Er leiden meerdere wegen naar Rome.

Laten we onze site als voorbeeld nemen. Wij laden per pagina alleen de CSS in die we daadwerkelijk nodig hebben. De CSS-classes worden automatisch door ons CMS geïmporteerd, uitsluitend wanneer ze nodig zijn. We plaatsen de CSS inline (in de head van de pagina). Dat bespaart ons een extra netwerkverzoek. Deze oplossing is razendsnel en makkelijk te onderhouden.

Een oplettende lezer zou kunnen denken: "Hoe zit het met CSS caching? CSS is sneller als de uiteindelijke CSS-bestanden gecachet zijn." Ja, dat klopt. Daarom gebruiken wij Speculation Rules om pagina's in de zichtbare viewport vooraf te laden zodat een pagina altijd uit de cache wordt gehaald, inclusief de CSS.

Los 'remove unused CSS' op in WordPress

Ben je klaar om ongebruikte CSS te verwijderen? Zo ga je aan de slag in WordPress. In WordPress kan CSS op 3 manieren worden toegevoegd:

• Direct in de template. In je template map bevindt zich een bestand genaamd header.php. In dit bestand staan vaak template-specifieke CSS-bestanden. Je zou deze CSS-bestanden kunnen aanpassen zoals ik hierboven heb beschreven. Vergeet niet een back-up te maken van je originele CSS-bestanden en houd er rekening mee dat een thema-update je CSS-bestanden kan overschrijven.
• CSS toegevoegd door een plugin. Plugins in WordPress kunnen onbeperkt CSS-bestanden toevoegen aan je HTML. Deze plugins gebruiken de functies wp_register_style en wp_enqueue_style. De meeste plugins nemen niet de moeite om te controleren of ze actief zijn op de huidige pagina. Ze injecteren gewoon CSS in elke pagina, ook al is er op die pagina geen behoefte aan die plugin-specifieke CSS. Ik kom dat elke dag tegen. Als dat het geval is, kun je de functies wp_dequeue_style en wp_deregister_style gebruiken om deze stijlen van de pagina's te verwijderen. Dat is een precies klusje. Als je niet zeker weet hoe je dit moet oplossen, schakel dan je developer in of vraag mij om hulp. Je kunt ook de Asset CleanUp plugin gebruiken waarmee je per paginatype kunt instellen welke plugins, stijlen en scripts geladen mogen worden.
• CSS toegevoegd door JavaScript. Het is ook mogelijk om stylesheets in de pagina te injecteren met behulp van JavaScript. Net als stylesheets kun je deze scripts per pagina uitschakelen met de functie wp_dequeue_script. Wanneer het JavaScript niet laadt, zal de stylesheet ook niet worden geïnjecteerd. Als je het script en de stylesheet wel nodig hebt maar niet direct na het laden, is het mogelijk om het laden van JavaScript uit te stellen via het script defer attribuut. Doe dat door deze code toe te voegen aan functions.php:

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );

Nadat je de ongebruikte CSS hebt verminderd, kun je de verbetering verifiëren met Real User Monitoring. In onze CoreDash-data zien sites die critical CSS inlinen en de rest uitstellen een mediane FCP-verbetering van 320ms.