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

Core Web Vitals zijn Google’s manier om te meten hoe goed je website aanvoelt voor bezoekers. Hoe snel laadt je pagina? Reageert hij vlot als iemand ergens op klikt? Springt de layout niet alle kanten op? In 2021 werden ze een officiële ranking factor, en sindsdien zijn ze alleen maar belangrijker geworden.

In dit artikel leg ik je uit wat Core Web Vitals precies zijn, hoe je ze meet, en wat je concreet kunt doen om ze te verbeteren.

Wat zijn Core Web Vitals?

Core Web Vitals zijn drie meetbare factoren die samen bepalen hoe een bezoeker de snelheid en stabiliteit van je pagina ervaart:

• Largest Contentful Paint (LCP) – hoe snel de hoofdcontent zichtbaar is
• Interaction to Next Paint (INP) – hoe vlot je pagina reageert op klikken, tikken en typen
• Cumulative Layout Shift (CLS) – hoe stabiel je pagina is tijdens het laden

Belangrijk: tot maart 2024 was First Input Delay (FID) de tweede metric. Google heeft FID vervangen door INP, omdat INP een veel completer beeld geeft van de interactiviteit van je site. Als je ergens nog over FID leest, weet dan dat dit niet meer relevant is.

Core Web Vitals vallen onder wat Google “Page Experience” noemt. Dat omvat ook of je site mobile-friendly en HTTPS is. Je kunt zien hoe je site scoort 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 mobiel. Google kijkt hoofdzakelijk naar de mobiele versie van je site als het op rankings aankomt.

Waarom zijn Core Web Vitals belangrijk?

Core Web Vitals zijn een officiële Google ranking factor. Het is onmogelijk te zeggen hoe zwaar ze precies wegen, maar ze hebben een prominente plek in Google Search Console – dat zegt genoeg.

Maar los van rankings: het gaat gewoon om een goede ervaring voor je bezoekers. Een site die snel laadt, vlot reageert en niet verspringt voelt beter. Bezoekers blijven langer, klikken meer door, en komen vaker terug. Dat is uiteindelijk waar het om draait.

Bedenk wel: het is niet zo dat wanneer je perfect scoort op Core Web Vitals dat je ineens naar pagina 1 van Google schiet. Goede content blijft het allerbelangrijkste. Maar bij twee pagina’s met vergelijkbare content, wint de pagina die beter aanvoelt.

Tools om Core Web Vitals mee te meten

Google Search Console

De makkelijkste manier om je Core Web Vitals in de gaten te houden. Onder Experience → Core Web Vitals zie je in één oogopslag hoeveel pagina’s goed, matig of slecht scoren. Het is gebaseerd op echte gebruikersdata, dus dit zijn de cijfers die Google daadwerkelijk ziet.

PageSpeed Insights

PageSpeed Insights is de tool van Google voor analyse per pagina. Je voert een URL in en krijgt een gedetailleerd rapport met je LCP, INP en CLS scores, plus concrete suggesties om ze te verbeteren.

Het handige is dat PageSpeed zowel field data (echte gebruikersdata) als lab data toont. Field data is het meest relevant — dat is wat Google daadwerkelijk gebruikt. Lab data is handig om specifieke problemen op te sporen.

Chrome DevTools

Voor wie het wat technischer wil: in Chrome kun je via DevTools (F12 → Lighthouse) een audit draaien die je Core Web Vitals meet. Handig als je wilt testen hoe een aanpassing je scores beïnvloedt voordat je hem live zet.

Dit zijn de 3 Core Web Vitals

Laten we ze één voor één doorlopen.

1. Largest Contentful Paint (LCP)

LCP meet hoe snel de grootste content op je pagina zichtbaar is. Denk aan de hero-afbeelding, een grote kop, of een video bovenaan. Het is de metric die het dichtst bij de “echte” laadsnelheid komt zoals een bezoeker die ervaart.

Google verdeelt LCP in drie categorieën:

• Good: 2,5 seconden of minder
• Needs Improvement: 2,5 – 4 seconden
• Poor: meer dan 4 seconden

Dit kun je doen om je LCP te verbeteren:

• Goede webhosting. Dit is veruit de belangrijkste factor. Een snelle server betekent een snelle site. Hierover later meer.
• Optimaliseer afbeeldingen. Gebruik moderne formaten (WebP of AVIF), comprimeer ze, en geef ze altijd vaste width en height attributen.
• Gebruik lazy loading. Afbeeldingen die niet direct zichtbaar zijn laden pas als de bezoeker er naartoe scrolt. Let op: je hero-afbeelding juist niet lazy loaden — die moet direct laden.
• Minimaliseer render-blocking resources. CSS en JavaScript die het laden van je pagina blokkeren zijn de grootste LCP-killers na hosting.
• Verwijder onnodige plugins. Elke plugin voegt code toe. Hoe minder, hoe beter.

2. Interaction to Next Paint (INP)

INP is de nieuwste Core Web Vital en verving FID in maart 2024. Waar FID alleen de eerste interactie mat, meet INP alle interacties op je pagina — elke klik, tik of toetsaanslag. Het rapporteert de slechtste interactie (met een correctie voor uitschieters).

Kortom: INP geeft een veel eerlijker beeld van hoe responsief je site écht aanvoelt tijdens het hele bezoek, niet alleen bij het eerste klikje.

De drempelwaarden:

• Good: 200 milliseconden of minder
• Needs Improvement: 200 – 500 milliseconden
• Poor: meer dan 500 milliseconden

Voor content websites (zoals Start24) is INP vaak minder een probleem — bezoekers lezen vooral. Maar heb je een webshop, formulieren, interactieve filters of menus? Dan is INP cruciaal.

Zo verbeter je INP:

• Minimaliseer en stel JavaScript uit. Zware scripts blokkeren de main thread, waardoor je pagina niet kan reageren op interacties. Stel niet-essentieel JavaScript uit met defer of laad het async.
• Breek lange taken op. JavaScript-taken die langer dan 50ms duren blokkeren de browser. Splits ze op zodat de browser tussendoor kan reageren op gebruikersinput.
• Verwijder onnodige third-party scripts. Analytics, chat widgets, social media embeds — elk script dat meedraait, vertraagt interacties.
• Gebruik browser caching. Hierdoor laadt je site sneller bij terugkerende bezoekers, wat ook INP ten goede komt.

3. Cumulative Layout Shift (CLS)

CLS meet hoe stabiel je pagina is tijdens het laden. Je kent het vast: je wilt ergens op klikken, maar net op dat moment schuift de hele pagina omlaag door een advertentie of afbeelding die inlaadt. Dat is een layout shift, en dat wil je voorkomen.

CLS wordt uitgedrukt als een score (geen tijd). De drempelwaarden:

• Good: 0,1 of lager
• Needs Improvement: 0,1 – 0,25
• Poor: hoger dan 0,25

Zo verbeter je CLS:

• Geef afbeeldingen en video’s altijd vaste afmetingen. Zet width en height attributen op elke <img> tag. Zonder deze attributen weet de browser niet hoeveel ruimte hij moet reserveren, en springt de layout als de afbeelding laadt.
• Reserveer ruimte voor advertenties en embeds. Als je advertenties of iframes gebruikt, geef ze een vaste container met minimale hoogte.
• Voeg nooit content in boven bestaande content. Tenzij het een reactie is op een gebruikersactie (zoals het openen van een menu).
• Gebruik CSS transform voor animaties. Animeer nooit properties als top, left, width of height — die veroorzaken layout shifts.
• Laad webfonts efficiënt. Gebruik font-display: swap en preload je belangrijkste font. Een font dat laat inlaadt kan een layout shift veroorzaken als de tekst verspringt.

Dit heeft de grootste impact op je Core Web Vitals

Uiteindelijk komt het met Core Web Vitals aan op twee dingen: 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.

Allereerst, webhosting. Hosting is de fundering van iedere goed presterende website. Kies je een suboptimale hosting provider, dan maakt het niet uit hoe goed de rest van je site is. In ons hosting overzicht laat ik je providers zien waarmee je goed kunt scoren op je Core Web Vitals. Start24 draait zelf op Cloud86, en we scoren nagenoeg perfect op alle drie de metrics.

Dan de codering van je site. Bij WordPress wordt dit hoofdzakelijk bepaald door je theme en of je een page builder gebruikt. Page builders zoals Elementor voegen bergen extra code toe en vertragen je site aanzienlijk.

Kies daarom voor een lichtgewicht WordPress theme die gebouwd is rondom de standaard WordPress editor. Hiermee krijg je evenveel design opties zonder dat het de prestaties van je site in de weg staat.

Wil je zelf aan de slag? In onze WordPress handleiding laat ik je stap voor stap zien hoe je een site bouwt met een technologie stack waarmee je nagenoeg perfect kunt scoren op je Core Web Vitals.