Core Web Vitals: wat zijn ze en hoe kun je ze verbeteren?

Sinds 2021 zijn Core Web Vitals een Google ranking factor. Ze hebben een impact op de user experience van je website bezoekers, iets wat Google in toenemende mate belangrijk vindt. In dit artikel gaan we kijken naar wat Core Web Vitals precies zijn, waarom ze belangrijk zijn, waardoor ze worden beïnvloed, en hoe je ze kunt verbeteren.

Wat zijn Core Web Vitals?

Core Web Vitals refereren naar een stel meetbare factoren die Google belangrijk acht voor het bepalen van de user experience van een webpagina. Deze factoren zijn: Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS).

Deze Core Web Vitals vallen onder het recentelijk door Google geïntroduceerde Page Experience.

Onder Page Experience vallen de Core Web Vitals, of een site mobile-friendly is, en of een site HTTPS gebruikt.

Je kunt zien hoe je site scoort op Core Web Vitals in Google Search Console, onder het kopje Experience.

Je hebt Desktop Core Web Vitals en Mobile Core Web Vitals. Het belangrijkste is dat je goed scoort op de Mobile Core Web Vitals. Google kijkt hoofdzakelijk naar de mobiele versie van je site als het op rankings aankomt.

Waarom zijn Core Web Vitals belangrijk?

Page Experience is een officiële Google ranking factor. Het is onmogelijk te zeggen hoe zwaar deze factor weegt, maar het is niet gek om aan te nemen dat het relatief belangrijk is. Dit omdat Page Experience een behoorlijk prominente positie inneemt binnen Google Search Console.

Daarnaast spreekt Google al jaren over het belang van het bieden van een zo goed mogelijke user experience. En dat sites die dit doen worden beloond. Page Experience verwijst letterlijk naar het “verbeteren van de kwaliteit van user experience op een webpagina” (aldus Google’s officiële richtlijnen).

Page Experience bestaat uit:

• Core Web Vitals
• Mobile Usibility
• HTTPS

Gezien de naam (“Core”) is het aannemelijk dat de Core Web Vitals je Page Experience score voor het grootste deel bepalen.

Bedenk wel: het is niet zo dat wanneer je perfect scoort op Core Web Vitals dat je ineens naar pagina 1 van Google schiet. Hoewel het belangrijk is er goed op te scoren, blijft het mantra content is king gelden:

Tools om Core Web Vitals mee te meten

Naast het eerder genoemde Google Search Console zijn er nog een paar andere manieren waarmee je de Core Web Vitals van een pagina kunt meten.

PageSpeed Insights

PageSpeed Insights is een tool van Google zelf. Het handige van deze tool is dat je er een diepgravende analyse mee kunt uitvoeren op iedere URL van je site.

De rapporten die hieruit voortkomen zijn een stuk gedetailleerder dan die van Google Search Console. Daarnaast krijg je ook concreet advies om je Core Web Vitals te verbeteren:

GTMetrix

GTMetrix is een third party tool die een stuk meer meet dan alleen Core Web Vitals.

Zo laat de tool je ook zien hoe je scoort op het gebied van paginastructuur, laadtijd en TTFB.

Dit zijn de 3 Core Web Vitals

Nu gaan we kijken naar wat de 3 Core Web Vitals precies zijn en hoe je ze kunt verbeteren.

Largest Contentful Paint (LCP)

LCP is hoelang het duurt voordat een pagina geladen is vanuit het oogpunt van de gebruiker. Of om het simpeler uit te drukken: het is de tijd die het duurt vanaf het klikken op een link totdat alle belangrijke content op het scherm is verschenen.

LCP is anders dan laadsnelheid metingen zoals time to first byte (TTFB) en First Contextual Paint. Die vertellen namelijk niet per se hoe een gebruiker de snelheid van een webpagina ervaart.

De Google PageSpeed tool laat je precies zien hoe een pagina scoort qua LCP. Het laat dit zien zowel aan de hand van echte gebruiker data (field data) als lab data. Die eerste is logischerwijs het meest relevant om goed op te scoren.

Hoewel PageSpeed diep in de details duikt van je LCP score, is het eenvoudiger om Google Search Console te gebruiken om een vinger aan de pols te houden. Op Google Search Console zie je namelijk hoe je gehele site scoort qua LCP – niet alleen een individuele pagina.

Google verdeelt de LCP score in 3 categorieën:

• Good
• Needs improvement
• Poor

Voor een goede score heb je een LCP nodig van 2,5 seconden of minder.

Dit zijn een paar van de dingen die je kunt doen om je LCP te verbeteren:

• Betere webhosting. Dit leidt tot snellere laadtijden wat leidt tot een betere LCP. Hierover later meer.
• Verwijder onnodige third party scripts. Zorg je dat je geen onnodige plugins etc. gebruikt.
• Gebruik lazy loading. Met lazy loading laden afbeeldingen pas op het moment dat de gebruiker er langs scrolt. Hierdoor word je LCP een stuk sneller.
• Verwijder grote pagina elementen. Dit kunnen bijvoorbeeld afbeeldingen zijn die een te groot bestandsformaat hebben.

Om meer te leren over LCP en het verbeteren ervan, raad ik je aan Googles LCP artikel te bekijken.

First Input Delay (FID)

De volgende Core Web Vital is First Input Delay (FID). Dit meet hoelang het duurt voordat een gebruiker je site daadwerkelijk kan gebruiken. Denk hier aan het klikken op een knop, een menu openen, of een email adres intikken op een formulier.

Heb je wel eens dat een webpagina laadt en je klikt op een element maar er gebeurt niets? Dat wordt veroorzaakt door een trage FID.

Net als FCD verdeelt Google FID ook in Good, Needs Improvement en Poor. Je krijgt een goede score wanneer FID onder de 100 milliseconden valt.

Voor content websites (zoals Start24) is FID niet extreem belangrijk. Mensen komen hier vooral om informatie te lezen. Maar voor een site met veel interactieve elementen, zoals een login pagina, is het hebben van een goede FID cruciaal.

Dit zijn een paar van de dingen die je kunt doen om je FID score te verbeteren:

• Minimaliseer JavaScript of stel het laden ervan uit. Wanneer JavaScript bezig met laden is, kan een gebruiker bijna niets doen op een webpagina.
• Verwijder niet-kritieke third party scripts. Net als bij FCP kunnen scripts van externe partijen je FID score om zeep helpen.
• Gebruik browser caching. Hierdoor laadt de content van je site een stuk sneller voor gebruikers die hem nog een keer bezoeken.

Om meer te leren over FID en het verbeteren ervan, raad ik je aan Googles FID artikel te bekijken.

Cumulative Layout Shift (CLS)

Tot slot hebben we Cumulative Layout Shift (CLS). Dit meet hoe stabiel een pagina oogt tijdens het laden. Om dit simpeler uit te leggen: wanneer je pagina’s elementen op en neer en heen weer schieten tijdens het laden, is je CLS hoog. Dat wil je niet.

Voor een goede gebruikerservaring is het belangrijk dat je pagina stabiel inlaadt. Dit voorkomt dat gebruikers klikken op het verkeerde element (iets wat je ongetwijfeld zelf wel eens hebt meegemaakt).

Een goede CLS score valt onder de 10 milliseconden.

Zo kun je je CLS verbeteren:

• Geef je media elementen vaste groottes. Met relatieve groottes kan je browser niet goed inschatten hoe je pagina eruit moet komen te zien.
• Voeg nooit content toe boven bestaande content, behalve als reactie op de interactie van je gebruikers. Mocht er dan een layout shift plaatsvinden, dan is deze niet onverwacht.
• Plaats “transform” animaties boven animaties van properties die veranderingen in layout veroorzaken.

Om meer te leren over CLS en het verbeteren ervan, raad ik je aan Googles CLS artikel te bekijken.

Dit heeft de grootste impact op je Core Web Vitals

De aankondiging van Core Web Vitals zette de SEO community behoorlijk op z’n kop. Iedereen wilde weten hoe ze hun Core Web Vitals konden verbeteren. Uiteindelijk komt het met Core Web Vitals vooral aan op de kracht van je webhosting en de codering van je website.

Ik ga dit aanvliegen vanuit het oogpunt van WordPress site eigenaren, omdat het vooral veel WordPress sites zijn die niet goed scoren qua Core Web Vitals.

Allereerst, webhosting. Webhosting is de fundering van iedere goed presterende website. Kies je een suboptimale hosting provider, dan maakt het niet uit hoe goed de codering van je site is. In dit artikel laat ik je hosting providers zien waarmee je goed kunt scoren op je Core Web Vitals.  

Dan de codering van je website. Bij WordPress websites wordt dit hoofdzakelijk bepaald door je theme. Ook maakt het uit of je een page builder zoals Elementor gebruikt of niet. Dit soort page builders vertragen je site aanzienlijk en hebben een negatieve impact op je Core Web Vitals.

Kies daarom voor een multifunctionele WordPress theme die gebouwd is rondom de Gutenberg Editor. Hiermee krijg je evenveel design opties als met Elementor zonder dat het de prestaties van je site in de weg staat.     

In dit artikel laat ik je zien hoe je een WordPress website maakt met een technologie stack waarmee je nagenoeg perfect kunt scoren op je Core Web Vitals.