In dit artikel laat ik je lezen hoe ik met Lighthouse de laadsnelheid van websites per paginatype snel en betrouwbaar meet.
Het probleem: PageSpeed Insights geeft wisselende resultaten
Ik schreef eerder al over hoe ik mijn websitesnelheid test met PageSpeed Insights. Handig en gratis — maar ik liep al snel tegen iets frustrerends aan: zonder ook maar iets aan mijn website te veranderen, kreeg ik telkens een andere score.
Om dit te controleren, draaide ik 6 analyses kort achter elkaar, op dezelfde URL, zonder tussendoor iets aan te passen. Het resultaat: de score schommelde van 79 tot een vlekkeloze 100. Een verschil van 21 punten, puur door ruis.
Zulke wisselende resultaten maken handmatige metingen onbetrouwbaar en ongeschikt als basis voor optimalisaties. Zie ik na een aanpassing een hogere score, dan weet ik niet of dat komt door mijn aanpassing — of dat het gewoon toeval is.
De oplossing voor ruis: de mediaan pakken
Om dit op te lossen, draai ik per analyse meerdere testen en pak ik de mediaan (de middelste waarde) in plaats van één losse meting.
Stel, je krijgt deze 5 scores: 50 – 90 – 90 – 90 – 90. Vier keer een 90 en één uitschieter van 50. Pak je de mediaan, dan houd je gewoon 90 over: de uitschieter valt weg. Neem je maar één meting, dan loop je het risico dat je toevallig die 50 te pakken hebt — en je website onterecht als traag bestempeld. Uiteraard kan je nog steeds pech hebben met deze methode door meerdere uitschieters, maar het risico wordt in ieder geval een stuk verminderd.
De cache moet eerst opwarmen
Er speelde nog een tweede probleem: mijn eerste meting was altijd lager dan de rest.
Dat bleek te komen door server side-caching. Hoewel lighthouse automatisch zelf de browser cache leeg maakt bij elke analyse, heeft het geen effect op caching die op server niveau gebeurt. Om een aanpassing aan de website te testen, moet de cache dus opnieuw worden opgebouwd anders is je aanpassing niet actief. Dit doe ik momenteel handmatig na iedere optimalisatie. Na een cache-reset wordt de cache pas opgebouwd na de eerste pageview. Die eerste meting krijgt de voordelen van caching dus nooit te zien, terwijl elke meting daarna dat wel doet. Op mijn eigen website zag ik dit letterlijk terug: 85 zonder opgewarmde cache, tegenover 100 zodra de cache actief was.
Daarom telt bij mij de allereerste meting nooit mee. Die gebruik ik alleen om de cache op te warmen.
En dan wil ik ook nog meerdere pagina’s meten
Eén pagina betrouwbaar meten kost dus al 6 metingen. En een website bestaat uit meerdere paginatypes. Een homepage laadt anders dan een blogartikel, een dienstenpagina of een landingspagina. Meet ik 6 paginatypes, dan zit ik op 36 analyses. Elke keer als ik iets aanpas en wil weten of het effect had, mag ik die 36 analyses opnieuw doen.
Met de hand op “Analyseren” klikken is dan geen optie meer. Dit moest geautomatiseerd worden.
Lighthouse CI: Lighthouse automatiseren
Op zoek naar een oplossing kwam ik Lighthouse CI tegen: een gratis, open-source tool van Google om Lighthouse-metingen te automatiseren en meerdere keren achter elkaar te draaien, juist om ruis te verminderen.
Lighthouse CI bleek eigenlijk nog veel meer mogelijkheden te hebben dan ik nodig had. Maar het gaf me wel de inspiratie om er een eigen, simpel script omheen te bouwen waarmee ik:
- meerdere URL’s tegelijk kan invullen;
- meerdere testen tegelijk kan draaien;
- de cache per URL automatisch eerst laat opwarmen;
- direct de mediaanresultaten per URL te zien krijg.
Je kunt dit script gratis downloaden via mijn GitHub-repository.
Zo gebruik ik het script zelf in 7 stappen
Stap 1: Download het project
Ik download het project vanaf GitHub en open de map in mijn code-editor. Ik gebruik hiervoor Visual Studio Code, dat is gratis.
Stap 2: Installeer Node.js
Het script draait op Node.js. Dat is gratis software waarmee je dit soort scripts op je eigen computer kunt uitvoeren.
- Windows: download de LTS-versie via nodejs.org, open het installatiebestand en doorloop de stappen. Controleer daarna in de Opdrachtprompt met node -v of het gelukt is.
- Mac: download de LTS-versie via nodejs.org en installeer het .pkg-bestand. Controleer daarna in Terminal met node -v of het gelukt is.
Stap 3: Installeer de benodigde onderdelen
Ik open in Visual Studio Code de ingebouwde terminal (Terminal → New Terminal) en typ:
npm installHiermee wordt Google Lighthouse zelf opgehaald, plus de onderdelen die het script nodig heeft. Dit hoef je maar één keer te doen.
Daarnaast moet je ook Google Chrome installeren als je dat nog niet hebt.
Stap 4: Vul je URL’s in
Bovenin het bestand lighthouse-analyse.js vul ik de pagina’s in die ik wil meten. Per paginatype kies ik één voorbeeldpagina:
const urls = [
"https://wiersmaweb.nl/",
"https://wiersmaweb.nl/check/",
"https://wiersmaweb.nl/websitesnelheid-getest-met-pagespeed-insights/",
];Elke URL wordt automatisch op zowel mobiel als desktop getest. Dat hoef ik dus niet apart aan te geven.
Stap 5: Stel het aantal metingen in
Direct daaronder geef ik aan hoe vaak elke pagina gemeten wordt en hoeveel Chrome-vensters er tegelijk mogen draaien:
const RUNS_PER_TEST = 5;
const CONCURRENCY = 3;Meer metingen geeft een betrouwbaardere mediaan, maar duurt langer. Meer vensters tegelijk gaat sneller, maar vraagt meer van je computer. Ik houd 3 à 4 aan als goede balans. Mocht het foutmeldingen geven dan kan je het beter op 1 zetten.
Stap 6: Start het script
In dezelfde terminal typ ik:
node lighthouse-analyse.jsNu kan ik even koffie halen. Het script doet de rest.
Stap 7: Bekijk de resultaten
Terwijl het script draait, zie ik per pagina de voortgang voorbijkomen. Aan het einde krijg ik een overzichtstabel met per URL en per apparaat:
- de prestatiescore;
- de vijf onderliggende meetwaarden (FCP, LCP, Speed Index, TBT en CLS).
Wil je weten wat die afkortingen precies betekenen? Die leg ik uit in mijn artikel over hoe ik een razendsnelle WordPress website heb gemaakt.
Alle resultaten worden ook opgeslagen in het bestand lighthouse-results.json, zodat ik ze later kan terugkijken.
Conclusie
Handmatig testen met PageSpeed Insights blijft prima om snel te kijken hoe een pagina ervoor staat en te leren wat je kunt doen om te optimaliseren. Maar zodra je aanpassingen gaat doorvoeren en wilt weten of ze werken, heb je metingen nodig waarop je kunt bouwen.
Het principe achter Lighthouse CI, vaker meten en de mediaan pakken, loste dat voor mij op. Een volledige meetronde over al mijn paginatypes kost me nu één commando in plaats van een avond klikken.
En dat is de moeite waard, want uit mijn onderzoek naar laadsnelheid en bedrijfsresultaten blijkt dat elke tiende seconde winst tot 8% meer conversie kan opleveren. Betrouwbaar meten is de basis om die winst ook echt te kunnen aantonen.
Nuttig gevonden? Help een ander (en mij) en deel dit artikel.
