Core Web Vitals uitgelegd: wat ze zijn en hoe je ze verbetert
In 2021 maakte Google "pagina-ervaring" officieel een rankingfactor — en centraal in die update stonden drie statistieken genaamd Core Web Vitals. Sindsdien zijn ze een standaard onderdeel van elke serieuze technische SEO-discussie.
Als je een PageSpeed Insights-rapport hebt gedraaid en scores voor LCP, INP en CLS hebt gezien, heb je al kennis gemaakt met Core Web Vitals. Begrijpen wat elk meet — en hoe je ze verbetert — kan zowel je rankings als de daadwerkelijke gebruikservaring van je website merkbaar verbeteren.
Wat zijn Core Web Vitals?
Core Web Vitals zijn een set specifieke statistieken voor pagina-ervaring die Google gebruikt om te meten hoe goed je website presteert voor echte gebruikers. Ze zijn niet gebaseerd op een perfecte testomgeving — ze zijn gebaseerd op realistische gebruikersdata verzameld van Chrome-gebruikers.
Er zijn drie statistieken:
- LCP (Largest Contentful Paint) — laadprestaties
- INP (Interaction to Next Paint) — interactiviteit/reactiesnelheid
- CLS (Cumulative Layout Shift) — visuele stabiliteit
Elke statistiek heeft een drempelwaarde voor "Goed", "Verbetering nodig" en "Slecht". Google wil je pagina's in het "Goed"-bereik zien.
LCP: Largest Contentful Paint
Wat het meet: Hoe lang het duurt voordat het grootste zichtbare element op de pagina is geladen. Dit is meestal de hero-afbeelding, een grote kop of een tekstblok.
Goede drempelwaarde: Onder de 2,5 seconden. Slecht: boven de 4 seconden.
LCP is je "voelde het snel aan?"-statistiek. Als iemand op je pagina klikt en vier seconden naar een leeg scherm of gedeeltelijke inhoud staart, is hij mentaal al aan het teruggaan.
Veelvoorkomende oorzaken van slechte LCP:
- Niet-geoptimaliseerde afbeeldingen (grote bestandsgroottes, verkeerde formaten)
- Trage serverresponstijden
- Render-blokkerende JavaScript of CSS
- Geen CDN (Content Delivery Network)
Hoe te verbeteren:
Comprimeer en pas afbeeldingen correct aan. Een hero-afbeelding van 3MB moet voor webgebruik onder de 200KB zijn. Gebruik moderne formaten zoals WebP of AVIF in plaats van PNG/JPEG. Tools als Squoosh doen dit gratis.
Gebruik een CDN. Een CDN levert je assets van een server die geografisch dicht bij de gebruiker staat. De gratis laag van Cloudflare handelt dit af voor de meeste kleine sites.
Preload de LCP-resource. Vertel de browser de belangrijkste afbeelding vroeg te laden door een <link rel="preload">-tag toe te voegen. Dit is een fix op developerniveau maar is vaak de snelste winst voor LCP.
Gebruik lazy loading — voorzichtig. Afbeeldingen onder de vouwlijn lui laden is goed. De hero-afbeelding (het LCP-element) per ongeluk lui laden is een veelgemaakte fout die je score verpest.
INP: Interaction to Next Paint
Wat het meet: Hoe snel de pagina reageert nadat een gebruiker ermee interageert — een knop indrukken, een dropdown selecteren, typen in een formulier. INP verving in maart 2024 de oudere FID-statistiek (First Input Delay).
Goede drempelwaarde: Onder de 200ms. Slecht: boven de 500ms.
INP gaat over reactiesnelheid. Een trage pagina die een halve seconde nodig heeft om een knopklik visueel te bevestigen, voelt kapot aan voor gebruikers.
Veelvoorkomende oorzaken van slechte INP:
- Zware JavaScript die de hoofdthread blokkeert
- Lange taken die de browser verhinderen te reageren
- Scripts van derden (chatwidgets, analysetools, trackingscripts)
Hoe te verbeteren:
Controleer en verminder je JavaScript. Elk script dat op je pagina laadt, verbruikt verwerkingskracht. Verwijder alles wat je niet actief nodig hebt.
Stel niet-kritieke JavaScript uit. Scripts die niet onmiddellijk hoeven te draaien, moeten worden uitgesteld of asynchroon worden geladen.
Controleer scripts van derden. Chatwidgets, cookiebanner, marketingpixels en knoppen voor sociale media voegen allemaal JavaScript-laad toe. Bekijk wat je echt nodig hebt.
CLS: Cumulative Layout Shift
Wat het meet: Hoeveel de paginalayout onverwacht verschuift tijdens het laden — inhoud die springt als lettertypen, afbeeldingen of advertenties inladen.
Goede drempelwaarde: Onder de 0,1. Slecht: boven de 0,25.
CLS is de meest frustrerende gebruikerservaring. Je wilt op een knop tikken en een afbeelding laadt erboven in op het laatste moment, waardoor de knop naar beneden schuift — en je op het verkeerde tikt.
Veelvoorkomende oorzaken van slechte CLS:
- Afbeeldingen zonder gedefinieerde breedte- en hoogteattributen
- Advertenties of embeds zonder gereserveerde ruimte
- Lettertypen die inhoud doen verschuiven wanneer ze laden
- Dynamisch ingevoegde inhoud (banners, cookiemeldingen die inhoud naar beneden duwen)
Hoe te verbeteren:
Stel altijd breedte en hoogte in op afbeeldingen. Wanneer de browser de afmetingen van een afbeelding kent voordat die laadt, reserveert hij de juiste ruimte.
Reserveer ruimte voor advertenties en embeds. Als je advertenties of externe inhoud insluit, definieer dan een container met vaste afmetingen.
Gebruik font-display: optional of swap strategisch. Weblettertypen die laat laden, veroorzaken tekstherschikking. De CSS-eigenschap font-display geeft je controle over hoe lettertypen laden.
Vermijd het invoegen van inhoud boven bestaande inhoud. Cookiebanner, meldingsbalken en promotiestroken die de pagina naar beneden duwen bij laden zijn veelvoorkomende CLS-veroorzakers.
Hoe controleer je je Core Web Vitals?
PageSpeed Insights — Gratis, van Google. Plak een URL en krijg labdata (gesimuleerd) en velddata (echte gebruikers).
Google Search Console — Het Core Web Vitals-rapport onder "Ervaring" toont realistische data samengevoegd over al je pagina's. Dit is betrouwbaarder dan PageSpeed Insights-labscores.
Chrome DevTools Lighthouse — Ingebouwd in Chrome. Open DevTools, ga naar het Lighthouse-tabblad, voer een audit uit.
Google gebruikt velddata (echte gebruikersmetingen) voor ranking, niet labdata. Focus op de velddata in Search Console voor rankingdoeleinden, en gebruik labdata om specifieke problemen te diagnosticeren.
Het grotere geheel
Core Web Vitals vallen binnen Google's bredere focus op pagina-ervaring, die ook mobielvriendelijkheid, HTTPS-beveiliging en de afwezigheid van opdringerige interstitials omvat. Het aanpakken van Core Web Vitals is een belangrijk onderdeel van mobiele optimalisatie omdat mobiele apparaten doorgaans langzamere processors en netwerkverbindingen hebben.
Je hebt geen perfecte score nodig. Je moet in het "Goed"-bereik zitten voor alle drie de statistieken. Voor de meeste eenvoudige zakelijke websites is dat bereikbaar met afbeeldingsoptimalisatie, een goede hostingomgeving en een paar gerichte fixes.