Fix "Verwijder ongebruikte CSS" In Lighthouse.

Wat is Ongebruikte CSS?

Ongebruikte CSS bestaat uit CSS declaraties die nergens op een webpagina worden gebruikt.
Het is heel normaal dat een deel van de CSS niet wordt gebruikt. Bijvoorbeeld omdat sommige CSS declaraties geschreven zijn 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 waar standaard veel meer elementen in de CSS worden beschreven dan je ooit zult gebruiken. Of wanneer je je pagina opnieuw hebt ontworpen maar vergeten bent de oude CSS elementen te verwijderen.

Waarom is ongebruikte CSS slecht voor pagespeed?

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 die in deze CSS bestanden worden gevonden, worden ook omgezet naar een ander formaat, namelijk de CSSOM. De DOM en de CSSOM worden gecombineerd in een render tree. Pas wanneer deze render tree is gebouwd, begint een browser met het painten van de eerste inhoud.
Vanwege 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. 

Hoe vind je ongebruikte CSS handmatig?

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

Open eerst de DevTools met de Ctrl-Shift-J sneltoets. Typ dan 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) worden gebruikt op de huidige pagina. 

Hoe los je de 'verwijder ongebruikte CSS' waarschuwing op

Er zijn verschillende manieren om de 'verwijder ongebruikte CSS' melding in lighthouse op te lossen. Als het om de een of andere reden niet mogelijk is de waarschuwing op te lossen, zou je de CSS levering kunnen optimaliseren om ervoor te zorgen dat ongebruikte CSS minder impact heeft op de laadtijd van je pagina. Ik zal de opties die je hebt voor het fixen van ongebruikte CSS hieronder kort bespreken.

1. Verwijder de ongebruikte CSS handmatig

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

1. Maak een backup van je originele CSS bestanden. Misschien verwijder je te veel CSS.
2. Open de Code Coverage Tab 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 betekent niet dat je deze declaratie nooit nodig zult hebben. Dat moet je zelf beoordelen!
4. Controleer per CSS declaratie of deze niet gedupliceerd is in de CSS. Dubbele CSS wordt ook als ongebruikt gemarkeerd. 
5. Controleer elke CSS regel op shorthand methoden.  Is het mogelijk om de CSS in te korten? Kort het dan in!

2. Splits de CSS in meerdere bestanden

Er is een simpele manier  om snel het aantal CSS regels te verminderen! Laad alleen de stijlen die je nodig hebt voor je apparaat. Je pagina wordt vaak op mobiel bezocht. Je hoeft eigenlijk niet de stijlen voor desktop en print te downloaden voor dit mobiele apparaat. Het niet downloaden van deze stijlen bespaart tijd en verkort dus 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 momenteel 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)">

3. Gebruik een automatische CSS-clean-up tool

Er zijn een aantal slimme tools die je CSS bestanden automatisch voor je kunnen opschonen en alle ongebruikte CSS verwijzingen kunnen verwijderen.
Hoewel tools verbazingwekkend goed werken zijn ze niet foutloos. Soms verwijderen deze tools te veel CSS declaraties. Dus gebruik ze voorzichtig en controleer altijd zelf je CSS.
De beste CSS clean up tools zijn PurifyCSS en PurgeCSS . Deze tools draaien op NodeJS. NodeJS is een JavaScript runtime, waarop je JavaScript scripts kunt uitvoeren, gebaseerd op de V8 JavaScript engine van Google zelf.  Je kunt ook purifyCSS online proberen.

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 kunnen filteren die CSS van je pagina kunnen extraheren. De Ciritcal CSS wordt dan inline geplaatst, in de head van je pagina, terwijl de originele CSS bestanden asynchroon geladen worden (zodat de browser ze later kan gebruiken).

Dit lost het probleem van ongebruikte CSS niet volledig op. Uiteindelijk zal de ongebruikte CSS worden geladen en geparst, maar je browser zal er niet door 'gehinderd' worden tijdens de eerste render fase.

De meest gebruikte tool om critical CSS te vinden en te extraheren is het NodeJS script Critical . Er zijn ook online tools zoals Critical Path CSS Generator en nog een 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 daarom meer tijd nodig hebben om te downloaden. 

We kunnen dat probleem tegengaan door de CSS bestandsgrootte te verkleinen door de CSS bestanden te minifyen. Dat gebeurt via een CSS minifier.  Een CSS minifier verkleint CSS bestanden door spaties, commentaar en opmaak te verwijderen. Ook kan een CSS minifier variabelen en CSS code herschrijven zodat het minder bytes in beslag neemt bij verzending.

Een bekende CSS minify tool is css-minify . Minify al je CSS bestanden via de command line met het commando css-minify -f bestandsnaam. Er zijn ook diverse 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 simpele variabelen en functies kunnen gebruiken. Dit maakt het gemakkelijk om het framework zelf  aan te passen en te personaliseren met een beetje kennis. Je kunt gewoon delen weglaten die je niet gebruikt en het eenvoudig compileren tot 1 uiteindelijk CSS bestand.

Zorg er ook voor dat je een CSS framework niet ongewijzigd laadt vanaf de standaard CDN. 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 is het misschien een idee om je CSS strategie te heroverwegen. Hoe dat wordt gedaan hangt af van je site. Er zijn meerdere wegen die naar Rome leiden.

Laten we onze site als voorbeeld nemen. We laden alleen de CSS die we daadwerkelijk nodig hebben per pagina. De CSS classes worden automatisch geïmporteerd door ons CMS, alleen 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 gemakkelijk te onderhouden.

Een oplettende lezer denkt misschien: "Hoe zit het met CSS Caching, CSS is sneller wanneer de uiteindelijke CSS bestanden gecacht zijn. Ja, dat klopt. Daarom preloaden we alle links in de zichtbare viewport zodat een pagina altijd uit de cache wordt gehaald, inclusief CSS.

Fix 'verwijder ongebruikte CSS' 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 staat een bestand genaamd header.php. In dit bestand staan vaak template specifieke CSS bestanden. Je zou deze CSS bestanden kunnen aanpassen zoals ik hierboven beschreef. Vergeet niet een backup 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 oneindig veel 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 geen behoefte aan die plugin specifieke CSS op die pagina. 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 nauwkeurig werkje. Als je niet zeker weet hoe je dit moet oplossen, wend je dan tot je ontwikkelaar of vraag mij om hulp. Je kunt ook de Asset CleanUp plugin gebruiken waarmee je per paginatype kunt instellen welke plugin, stijlen en scripts geladen mogen worden.
• CSS toegevoegd door JavaScript . Het is ook mogelijk om Stylesheets in de pagina te 'injecteren' met JavaScript. Net als stylesheets, kun je deze Scripts per pagina uitschakelen met de wp_dequeue_script functie . Wanneer het JavaScript niet laadt, wordt de stylesheet ook niet 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 in functions.php toe te voegen

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