Alles over Core Web Vitals

Wat zijn Core Web Vitals?

Laat ik je allereerst uitleggen wat de Core Web Vitals precies zijn. Kort gezegd gebruikt Google de Core Web Vitals om de gebruikerservaring van je website te bepalen. De Core Web Vitals bestaan uit de volgende drie onderdelen:

Largest Contentful Paint (LCP)
Cumulative Layout Shift (CLS)
First Input Delay (FID)

Core Web Vitals zijn sinds het voorjaar van 2021 een officiële Google ranking-factor geworden. Het verbeteren van de Core Web Vitals zorgt voor betere prestaties van de pagina’s op je website, wat weer inhoudt dat je hoger rankt binnen Google. Wanneer de laadtijd van een pagina langer is dan 3 seconden is te zien dat het gemiddelde bouncepercentage (wanneer mensen van een pagina wegklikken) stijgt met maar liefst 32%. Zodra de laadtijd boven de 6 seconden komt kan dit percentage zelfs oplopen tot 102%!

Waar kun je de Core Web Vitals vinden?

Je kunt Core Web Vitals terugvinden binnen een aantal populaire online tools, zoals Google Search Console, PageSpeed Insights en de Lighthouse-extensie. Deze tools analyseren de prestaties van je website en geven bovendien een helder overzicht van verbeterpunten. Erg handig bij het optimaliseren van je pagina’s dus.

Largest Contentful Paint

De Largest Contentful Paint meet hoeveel tijd het kost om het grootste element binnen een pagina weer te geven. Dat is in de meeste gevallen een illustratie of een video, maar het kan ook een groot tekstblok zijn. Een laadtijd van maximaal 2,5 seconden wordt beschouwd als acceptabel. Zodra het langer duurt voordat een pagina laadt stijgt de kans op een bounce.

Reactietijd van de server

Hoe sneller de reactietijd van je server, hoe sneller de content wordt weergeven bij de gebruiker. Een snelle reactietijd beïnvloedt de LCP in positieve zin. Binnen de LCP is er een onderdeel te vinden dat TTFB heet (daar schreef ik trouwens al kort over in mijn vorige blog). Vanuit dit onderdeel kun je eventuele server-optimalisaties doorvoeren, mocht dat nodig zijn.

JavaScript en CSS die de weergave blokkeren

JavaScript en CSS zijn bronbestanden die de contentweergave binnen een pagina kunnen blokkeren. Als de contentweergave wordt geblokkeerd, vertraagd dit de LCP. Dit is natuurlijk een situatie die je wil voorkomen en dat kun je doen door niet kritieke CSS en JavaScript-bestanden uit te stellen bij het inladen.

Cumulative Layout Shift

De Cumulative Layout Shift meet de stabiliteit van een pagina tijdens het laden. Een goede opbouw van een pagina zorgt ervoor dat het niet voorkomt dat elementen verspringen tijdens het laden. Een te hoge CLS-score betekent dan ook dat een pagina instabiel is bij het laden.

Maar wat is dan een goede CLS-score? Een goede score op CLS is 0.1 of lager. Wil je de CLS-score van jouw website verbeteren? Besteed dan vooral aandacht aan de mobiele weergave van je pagina’s. Doordat het scherm van een mobiele telefoon kleiner is dan desktop, heeft een verschuiving in de layout een grote impact op de gebruiksvriendelijkheid.

First Input Delay

De First Input delay meet hoeveel tijd er nodig is voordat een bezoeker een interactie kan uitvoeren met een pagina. Deze tijd wordt gemeten van de initiële klik tot aan een reactie van de pagina. Een goede score voor de FID is binnen 100 milliseconden. Dat is op zich goed te verklaren, want wanneer iemand op een knop drukt op jouw pagina moet het niet te lang duren voordat er een reactie volgt. Niemand vindt het leuk om lang te moeten wachten. Een snelle server is de basis van een goede score.

De prestaties van je website verbeteren

Het creëren van een goede gebruikerservaring op je website wordt steeds belangrijker. Een prettige gebruikerservaring op je website vergroot de kans dat een bezoeker klant wordt én zorgt ervoor dat je beter gevonden wordt. Ben je benieuwd hoe jij de gebruikerservaring op jouw website kunt optimaliseren of kun je wel wat hulp gebruiken? Wij staan voor je klaar!