Betere gebruikerservaring met optimaliseren core web vitals
Een website maak je voor bezoekers, de gebruikers. Dat vindt Google ook, daarom speelt gebruikerservaring een grote rol om een betere Google ranking te krijgen. Belangrijk voor je vindbaarheid dus!
Bij gebruikerservaring komen de Core Web Vitals om de hoek kijken. Core Web Vitals worden sinds 2021 gemeten door Google om de page experience van je website te bepalen.
Scoor je goed, dan is dat positief voor je page ranking. Wil je dus goed (blijven) ranken met je website? Zorg er dan voor dat de gebruikerservaring van je website een actueel thema is en besteed er tijd aan om dit te blijven bijhouden.
Core Web Vitals en gebruikerservaring
Gebruikerservaring is een factor die steeds zwaarder weegt voor ranking binnen Google. Het gedrag van de bezoeker is steeds belangrijker: hoe ervaart de bezoeker de website? Vindt hij/zij hetgeen wat bij de zoekvraag past?
Alles draait binnen Google om relevantie: Google wil een bezoeker een webpagina voorschotelen die zo relevant mogelijk is en die de bezoeker als prettig ervaart. Met de Core Web Vitals is dit objectief te meten. Om dit te meten heeft Google de Core Web Vitals gedefinieerd als de volgende 3 factoren:
- Snelheid waarmee de webpagina inlaadt: Largest Contentful Paint
- Interactie tussen bezoeker en pagina: First Input Delay
- Visuele stabiliteit: Cumulative Layout Shift
Deze drie factoren worden ook gesimuleerd in Google Lighthouse.
Google Lighthouse en de core web vitals
Google lighthouse moet je zien als een lab: een website bezoek wordt gesimuleerd. Er wordt data verzameld op het moment dat je de test afneemt. Google simuleert het website bezoek vanaf een mobiel apparaat met een 3g netwerk. Het is dus een kunstmatige test. De Core Web Vitals daarentegen worden gebaseerd op data uit “het veld”. Dit is data die wordt verzameld per pagina van je website die gebruikers bezoeken met Chrome. Met een set van 3 factoren die hierboven staan, wordt vervolgens de gebruikerservaring gemeten die een website een bezoeker geeft.
Hieronder zullen we deze 3 factoren verder toelichten.
Snelheid: Largest Contentful Paint (LCP)
De LCP draait om snelheid en kun je samenvatten als: laadtijd. Hoe lang duurt het voordat de bezoeker je hele webpagina kan zien? De LCP meet hoeveel tijd er nodig is om de webpagina in te laden. Hoe langer dit duurt, hoe lager de score op de LCP is.
Wat zegt de LCP score?
- Laadtijd minder dan 2.5 seconden: goede score
- Laadtijd tussen de 2.5 en 4 seconde: ruimte voor verbetering
- Laadtijd langer dan 4 seconden: slecht
Wanneer de laadtijd langer is dan 4 seconden, is de kans groot dat je bezoeker je webpagina al heeft weg geklikt. En dit wil je natuurlijk voorkomen!
Snelheid: Largest Contentful Paint (LCP)
De LCP draait om snelheid en kun je samenvatten als: laadtijd. Hoe lang duurt het voordat de bezoeker je hele webpagina kan zien? De LCP meet hoeveel tijd er nodig is om de webpagina in te laden. Hoe langer dit duurt, hoe lager de score op de LCP is.
Wat zegt de LCP score?
- Laadtijd minder dan 2.5 seconden: goede score
- Laadtijd tussen de 2.5 en 4 seconde: ruimte voor verbetering
- Laadtijd langer dan 4 seconden: slecht
Wanneer de laadtijd langer is dan 4 seconden, is de kans groot dat je bezoeker je webpagina al heeft weg geklikt. En dit wil je natuurlijk voorkomen!
Wat bepaalt de LCP?
Er zijn meerdere factoren die de LCP beïnvloeden. De vier belangrijkste factoren zullen we hieronder beschrijven:
Reactietijd van de server
Een snelle reactie tijd van de server is belangrijk. Hoe sneller de server reageert, hoe sneller de content inlaadt voor je bezoeker.
Grootte van de content
Wellicht een open deur: grote content vraagt meer inlaadtijd. Wanneer je content groot is, doet de server er langer over om de content in te laden. Zorg er daarom voor dat alle content (video, afbeeldingen, andere bestanden) zo optimaal mogelijk zijn verkleind.
JavaScript en CSS vertraging
Zowel JavaScript als CSS kunnen content op de pagina blokkeren. Zorg ervoor dat niet-kritieke scripts en stylesheets niet meteen ingeladen moeten worden. Zo voorkom je dat de laadtijd negatief wordt beïnvloed.
Langzame Client-side rendering
Veel websites maken gebruik van JavaScript aan de client-side, zodat pagina’s rechtstreeks in de browser worden weergegeven. Frameworks en bibliotheken hebben het eenvoudiger gemaakt om een applicatie met een pagina te bouwen. Een mogelijk nadeel hiervan is, dat het gehele JavaScript als een groot bestand wordt gezien wat volledig ingeladen moet worden. Dit kan de laadtijd negatief beïnvloeden.
Time to first byte (TTFB)
Wil je graag de reactietijd van de server verbeteren? Check dan eerst hoe je server met content omgaat. Dit doe je door de Time To First Byte te meten. Zodra je dit hebt gedaan, kun je kijken wat er te optimaliseren is.
Ken je de frustratie dat als je op een knop wil klikken en opeens verschuift de boel? Je opent een pagina die je niet wilt openen of je doet per ongeluk een bestelling. Dat is precies waar de CLS over gaat.
Chris Schrijver Vollegrond
Interactie tussen bezoeker en pagina: First Input Delay (FID)
Als we de FID met 1 woord zouden moeten omschrijven: interactiviteit. De FID meet hoeveel tijd er voorbij gaat tussen de eerste reactie tot het moment dat de website reageert op dit verzoek, zoals het klikken op een knop of een dropdown menu. Bezoekers verwachten een snelle en soepele respons van een website. Wanneer dit te lang duurt, haakt de bezoeker af.
Wat is een goede FID?
Een goede FID betekent dat de tijd van de input (bezoeker klikt) tot de reactie van de webpagina minder is dan 100 miliseconden. Wat als het langer duurt:
- Een FID tussen de 100-300 milliseconden: Met deze tijd zullen de meeste bezoekers niet afhaken, maar het is wel nodig om te kijken wat je kan verbeteren. Een bezoeker kan het na verloop van tijd vervelend vinden dat het lijkt alsof de webpagina niet goed reageert.
- Een FID > 300 miliseconden: De kans is heel groot dat bezoekers je website meteen verlaten vanwege frustraties. Hoogste tijd om aan de slag te gaan om de FID te verbeteren!
Visuele stabiliteit: Cumulatieve Layout Shift (CLS)
Ken je de frustratie dat als je op een knop wil klikken en opeens verschuift de boel? Je opent een pagina die je niet wilt openen of je doet per ongeluk een bestelling. Dat is precies waar de CLS over gaat. Google erkent dat dit heel frustrerend is voor gebruikers en daarom is dit een belangrijke factor in de Core Web Vitals.
Visuele stabiliteit betekent dus dat er zo min mogelijk verschuivingen van elementen en content zijn. Hoe minder verschuivingen, hoe beter de visuele stabiliteit is en dus hoe beter de CLS is.
Wat betekent een CLS score?
Een goede CLS score is 0.1 of lager bij 75% van de paginabezoeken. Een score tussen de 0.1 en 0.25 betekent dat er verbetering nodig is en boven de 0.25 scoort de pagina slecht.
Bij CLS wordt er ook op gelet hoe je webpagina het doet op mobiele apparaten. Het scherm van een mobiel apparaat is een stuk kleiner en dus zal de impact van een verschuiving groter zijn. Dit wordt door Google zwaar aangerekend, aangezien gebruiksvriendelijkheid op mobiel ontzettend belangrijk is.
Waar er met de CLS ook op wordt gelet is mobiel. Een scherm van een mobiel is een stuk kleiner. Hierdoor zal de impact van een verschuiving een stuk groter zijn. Google rekent dit zwaar aan, aangezien gebruiksvriendelijkheid op mobiel belangrijk is.
Opzettelijke verschuivingen en CLS
Wat als je opzettelijk iets laat verschuiven op de pagina? Bijvoorbeeld met een mouse-over bij een button. Als er binnen een halve seconde iets verschuift nadat een gebruiker een interactie heeft met een element, wordt dit niet meegerekend in de CLS score.
