"Remove unused CSS" In Lighthouse oplossen.

Wat is ongebruikte CSS?

Ongebruikte CSS bestaat uit CSS declaraties die niet worden gebruikt op een webpagina.
Het is heel normaal dat een deel van de CSS niet wordt gebruikt. Bijvoorbeeld omdat sommige CSS declaraties zijn geschreven voor een ander device zoals een desktop of mobiel. Of omdat je elementen In het stylesheet (zoals buttons) toevallig niet gebruikt op deze pagina.
Ongebruikte CSS komt vaak voor wanneer je een framework gebruikt zoals bootstrap waarbij er standaard veel meer elementen zijn beschreven in de CSS kan je ooit zult gebruiken. Of wanneer je jouw pagina hebt aangepast maar vergeten bent de oude CSS te verwijderen.

Waarom is ongebruikte CSS slecht voor pagina snelheid?

CSS Vertraagt het laden van de pagina. Hoe werkt het precies? Wanneer een pagina worden geladen haalt de browser eerst de HTML van deze pagina op. Deze HTML wordt omgezet in DOM Nodes. Daarna haalt browser alle Stylesheets op. De styles die zijn gevonden in deze CSS bestanden worden ook omgezet naar ander formaat, namelijk de CSSOM. De DOM en de CSSOM worden gecombineerd tot een render tree. Pas als deze render three is opgebouwd kan een browser beginnen met het tonen van de eerste content.
En CSS bestand geblokkeerd dus altijd het renderen van de pagina. Wanneer een CSS bestand groter is dan het zou moeten zijn duurt het dus langer om dit bestand te downloaden en dat zorgt voor de eerste vertraging. Wanneer een CSS bestand ongebruikte CSS bevat duurt het bovendien langer onder render tree op te bouwen. Ongebruikte CSS vertraagd het laden van de pagina dus op twee manieren.

Hoe vind je ongebruikte CSS handmatig?

In Google chrome kun je gebruik maken van het Code Coverage overzicht. Code Coverage is een onderdeel van de Chrome DevTools. DevTool is een serie ingebouwde hulpmiddelen die standaard op iedere chrome browser aanwezig is. 

Open eerst de DevTool met Ctrl-Shift-J. Via Ctrl-Shift-P open je het command Palette. Type 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 zie je hoe groot de bestanden zijn en hoe veel procent van de de code ook echt gebruikt wordt.
Klik op een CSS bestand om te zien welke CSS regels er wel (groen) en welke CSS regels er niet (rood) gebruikt worden op de huidige pagina. 

Hoe los je de melding 'verwijder ongebruikte CSS' op?

Je kunt de melding 'verwijder ongebruikte CSS' in lighthouse op verschillende manieren oplossen. Wanneer het oplossen lastig is kun je er ook voor zorgen dat ongebruikte CSS minder impact heeft op de laadtijd van jouw pagina. Ik zal de mogelijkheden die je hebt om ongebruikte CSS te verwijderen hieronder kort bespreken.

1. Verwijder de ongebruikte CSS met de hand

De meest logische en beste manier, maar ook meteen de meest bewerkelijke manier, is natuurlijk door de ongebruikte CSS handmatig te verwijderen.  Dat doe je zo:

1. Maak een backup van jouw CSS bestanden. Je weet nooit of je te veel weg hebt gehaald.
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 bekijk per ongebruikte CSS declaratie of deze weggehaald kan worden. Maar pas op: dat sommige declaraties niet gebruik zijn wil niet zeggen dat je ze nooit nodig hebt. Dat moet je zelf beoordelen! Een goede kennis over jouw website is dus noodzakelijk.
4. Bekijk per CSS declaratie of deze niet dubbel in de CSS staat. Dat wil ook nog wel eens gebeuren. Chrome geeft dan aan dat de CSS niet gebruikt wordt terwijl jij er zeker van bent dat het wel gebruikt wordt. Dat is een telen dat de CSS er wel eens dubbel in zou kunnen staan
5. Bekijk per CSS regel of dat de manier van schrijven korter kan. Is dat mogelijk? Pas het dan aan!

2. Splits de CSS op in verschillende bestanden

Hoe verklein je snel het aantal CSS regels? Simpel: laad alleen de styles die je nodig hebt voor jouw device. Vaak wordt jouw pagina bezocht op mobiel. Je hoeft voor deze mobiel de styles voor desktop en print eigenlijk niet te downloaden. Dat scheelt tijd en maakt daarmee de critical request chain in lighthouse korter.

Je kunt daarvoor gebruik maken van het media attribuut. Het media attribuut zorgt ervoor dat een stage pas gedownload wordt als het media van het thuis niet overeenkomt met het media dat jij op dit 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)">

3. Gebruik een automatische tool

Er zijn een aantal slimme tools te vinden die jouw CSS bestanden automatisch voor je op kunnen ruimen en de ongebruikte CSS referenties kunnen verwijderen.
Deze tools werken verbazingwekkend goed maar zijn niet feilloos. Soms halen deze tools te veel CSS declaraties weg. Gebruik ze dus voorzichtig en loop zelf altijd jouw CSS na.
De meest gebruikte tools zin PurifyCSS en PurgeCSS. Deze tools draaien op NodeJS. Dat is een JavaScript runtime, waarop je JavaScript scripts uit kunt voeren, gebaseerd op de V8 JavaScript engine van Google zelf. Daar heb je dus wel wat kennis voor nodig. Gelukkig kun jed purifyCssd ook online gebruiken.

4. Maak gebruik van Critical CSS

Critical CSS is een verzameling van de CSS die wordt gebruikt in de viewport (het zichtbare gedeelte) van jouw website. Dit is de CSS die echt nodig is om het eerste gedeelte van jouw pagina te tonen.

Er zijn een aantal handige tools die per pagina deze critical CSS voor jou uit jouw CSS bestanden kunnen filteren. Deze Critical CSS plaats je dan in de head van jouw pagina en de originele CSS bestanden laad je asynchroon, zodat jouw browser deze later kan gebruiken.

Hiermee los je het probleem van ongebruikte CSS dus niet helemaal op. Uiteindelijk wordt de ongebruikte CSS wel geladen maar jouw browser heeft er tijdens de eerste render fase geen 'last' van.
De meestgebruikte tool om critical CSS mee te vinden is het NodeJS script Critical. Er zij ook online tools te vinden 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 doordat de CSS bestanden groter zijn en dus meer tijd innemen om te downloaden. 

Je kunt dat een tegengaan door de CSS te verkleinen. Een CSS minfier verkleint CSS bestanden door spaties, commentaar en formatting te verwijderen. Ook kan een CSS minifier variabelen en CSS code herschrijven zodat het miner bytes in beslag neemt.

Een bekend CSS minify tool is css-minify. Minify al jouw CSS bestanden via de commandline met de opdracht css-minify -f filename. Je kunt ook gebruik maken van diverse online CSS minifiers zoals cssminifier.com

6. Hercompileer jouw CSS framework

Gebruik je een CSS framework zoals bootstrap CSS? Dat is een CSS framework waarmee je jouw complete site kunt stylen. Dit framework is zo compleet dat de kans groot is dat je grote delen hiervan nooit zult gebruiken.

Gelukkig hebben de makers van bootstrap and andere CSS frameworks hier rekening mee gehouden. Dit framework is geschreven in SASS. Dat is een taal die veel op CSS lijkt maar net wat handiger in elkaar zit. Het bestaat uit meerdere kleine, afgebakende SASS bestanden die gebruik kunnen maken van eenvoudige variabelen en functies. Dit zorgt er voor dat je, met een klein beetje kennis, zelf het framework aan kunt passen. Je kunt delen die je niet gebruikt gewoon weglaten en gemakkelijk tot 1 uiteindelijk CSS bestand compileren.

Zorg er dus voor dat je een CSS framework niet onaangepast van het standaard CDN laadt maar download het framework en compileer die via SASS precies zoals je het hebben wilt, met alleen die CSS classes die je gebruikt.

7. Overweeg een andere CSS strategie

Wil je echt snel zijn? Dan is het een idee om jouw CSS strategie eens te herdenken. Hoe je dat doet hangt er van af wat jouw doel is. Er zijn meerdere wegen naar Rome.

Wij laden per pagina alleen de CSS die je echt nodig hebt. De CSS classes worden alleen wanneer ze echt gebruikt worden automatisch geïmporteerd door ons CMS. Bovendien plaatsen we deze inline (in de head van de pagina) zodat we er geen extra netwerk verzoek aan kwijt zijn. Dat is razendsnel en gemakkelijk te onderhouden.

Een oplettende lezer denkt dan misschien: "Hoe zit het dan met CSS Caching, CSS is toch juist sneller wanneer de uiteindelijke CSS bestanden ge-cached worden. Ja, dat klopt. Daarom preloaden wij alle links in de zichtbare viewport zodat een pagina altijd vanuit de cache wordt opgehaald, inclusief CSS dus.

'verwijder ongebruikte CSS' in Wordpress oplossen

Nadat je dit hebt gelezen kun je vast niet wachten om zelf aan de slag te gaan. Maar hoe ga je precies aan de slag in WordPress? In wordpress kan CSS op 3 manieren worden toegevoegd:

• Direct in het template. In jouw template folder vindt je het bestand header.php. Hierin vind je vaak CSS bestanden die standaard door het template gebruikt worden. Je kunt deze bestanden aanpassen zoals ik hierboven heb beschreven. Vergeet niet een backup te maken van jouw originele CSS bestanden en houd er rekening mee dat een theme update jouw CSS bestanden week kan overschrijven.
• Via een plugin. Plugins in WordPress kunnen via de functies wp_register_style en wp_enqueue_style ongelimiteerd CSS bestanden toevoegen. Het kan zomaar gebeuren dat een plugin, die maar op 1 pagina wordt gebruikt, op iedere pagina een CSS bestand toevoegt. Ik kom dat eigenlijk iedere dag tegen. Als dat het geval is dan kun je via de functies wp_dequeue_style en wp_deregister_style deze styles weer van de pagina's verwijderen. Dat is een secuur werkje. Schakel daarom de hulp in van jouw developer of vraag mij om hulp. Je kunt ook de plugin Asses CleanUp gebruiken waarmee je per pagina type in kunt stellen welke plugin, styles en scripts mogen worden geladen.
• Via JavaScript. Het is ook mogelijke om via JavaScript Sylesheets te 'injecteren' in de pagina. Je kunt, net zoals stylesheets, deze Scripts per pagina uitschakelen met de functie wp_dequeue_script. Dan wordt ook het stylesheet niet geladen.
  Heb je het script en de stylesheet wel per se nodig, dan kun je het laden van JavaScript uitstellen via het script defer attribuut. Dat doe je door deze code toe te voegen in 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 );