Core Web Vitals: wat LCP, INP en CLS zijn en hoe je ze verbetert

Core Web Vitals zijn drie metrics van Google voor de ervaring op een pagina. LCP meet hoe snel het grootste element in beeld staat (goed: binnen 2,5 seconden), INP hoe snel de pagina op een klik reageert (goed: 200 milliseconden of minder) en CLS hoeveel de opmaak verspringt (goed: 0,1 of lager).

Core Web Vitals zijn de drie metrics die Google gebruikt om de gebruikservaring van een pagina uit te drukken: laden, reageren en stabiliteit. De definities en grenswaarden staan op web.dev, en Google Search zegt over deze metrics dat ze aansluiten bij wat de rangschikkingssystemen willen belonen. Hoe zwaar ze meewegen zegt Google niet.

Twee afspraken maken de cijfers vergelijkbaar. De eerste: er wordt gemeten bij echte bezoekers, en de waarde die telt is het 75e percentiel. Drie op de vier paginabezoeken moeten dus binnen de grens vallen. De tweede: mobiel en desktop worden los beoordeeld. Een pagina slaagt als hij bij alle drie de metrics op het 75e percentiel goed scoort.

Metric	Wat het meet	Goed	Moet beter	Slecht
LCP	laden	tot en met 2,5 s	2,5 tot 4 s	boven 4 s
INP	reageren	tot en met 200 ms	200 tot 500 ms	boven 500 ms
CLS	stabiliteit	tot en met 0,1	0,1 tot 0,25	boven 0,25

LCP: largest contentful paint

Largest contentful paint meet wanneer het grootste zichtbare element in beeld staat, gerekend vanaf het moment dat iemand de pagina opent. Dat is bijna altijd de foto bovenaan of het eerste blok tekst. Meetellen doen afbeeldingen, de poster of eerste frame van een video, een achtergrondafbeelding via CSS en blokken tekst.

Een LCP bestaat uit vier stukken, en je moet weten welk stuk traag is voordat je iets aanpast:

• De eerste byte. Hoe lang het duurt voordat de server het eerste stukje HTML terugstuurt.
• De vertraging voor het laden. De tijd tussen die eerste byte en het moment dat de browser het beeld begint op te halen.
• Het laden zelf. Hoe lang het beeld onderweg is.
• Het tekenen. De tijd tussen binnen zijn en in beeld staan.

Een zwaar bestand is het tweede of derde stuk. Een trage server of een omweg via een doorverwijzing is het eerste. Een groter beeld verkleinen helpt dan niet.

INP: interaction to next paint

INP meet hoe snel een pagina reageert. Het kijkt naar elke klik, elke tik op een scherm en elke toetsaanslag tijdens het hele bezoek, en meet de tijd tot de browser het volgende beeld laat zien. Scrollen, zoomen en met de muis ergens overheen gaan tellen niet mee.

INP is sinds 12 maart 2024 een Core Web Vital. Het verving First Input Delay (FID), dat alleen naar de vertraging bij de eerste interactie keek. Een pagina kon op FID goed scoren en daarna bij elke klik haperen. Met INP komt dat wel in beeld.

Ook hier drie stukken: de wachttijd voordat de code van de klik begint, de tijd dat die code draait, en de tijd tot het nieuwe beeld getekend is. Het eerste stuk is vaak lang omdat de browser nog met iets anders bezig is, en dat iets is regelmatig een script van een derde partij.

CLS: cumulative layout shift

CLS meet hoeveel de opmaak verspringt zonder dat de bezoeker daar iets voor deed. Het bekende voorbeeld: je wilt op een knop tikken, er laadt bovenaan een banner in, en je tikt op iets anders. Verschuivingen binnen een halve seconde na een klik of tik tellen niet mee, want die verwacht de bezoeker.

De oorzaken zijn meestal dezelfde: afbeeldingen en video's zonder vaste afmetingen, een lettertype dat groter of kleiner uitvalt dan het tijdelijke lettertype, advertenties of widgets die van grootte veranderen, en inhoud die later in de pagina wordt gezet.

De snelste manier is PageSpeed Insights van Google. Je vult een adres in en krijgt twee soorten cijfers terug, en het verschil daartussen is waar de meeste verwarring vandaan komt.

	Veldgegevens	Labgegevens
Waar het vandaan komt	echte Chrome-bezoekers, de afgelopen 28 dagen	een meting van dat moment met Lighthouse
Toestel en verbinding	wat je bezoekers werkelijk gebruiken	een gesimuleerd middenklassetoestel op een mobiel netwerk
Waar Google naar kijkt	ja, dit is wat telt	nee, dit is een diagnose
Waar het goed voor is	weten of er een probleem is	vinden waar het probleem zit

Heeft een pagina te weinig bezoekers voor eigen veldgegevens, dan toont PageSpeed Insights de cijfers van het hele domein. Is ook dat te weinig, dan zijn er geen veldgegevens.

Voor de hele site is Search Console handiger. Het rapport Core Web Vitals laat zien hoe de pagina's van je site op de drie metrics scoren. Zo zie je of het om één pagina gaat of om alle pagina's van hetzelfde soort.

Ga je na een aanpassing opnieuw je website snelheid testen, kijk dan eerst naar de labgegevens, want die veranderen direct. De veldgegevens lopen 28 dagen achter, dus een verbetering is daar pas na een paar weken helemaal zichtbaar.

Werk de lijst hieronder van boven naar beneden af. Het meeste zit bijna altijd in de eerste twee.

• Het eerste beeld. Zorg dat de browser het meteen vindt en voorrang geeft. Geef het fetchpriority="high" mee en laad het nooit met loading="lazy": dan ontdekt de browser het te laat. Lever het in de maat waarin het getoond wordt, en in een modern formaat als WebP.
• Scripts van derden. Chatwidgets, heatmaps, advertentiepixels en tags. Elk script vraagt tijd op de hoofdthread van de browser, en dat voel je in INP. Haal weg wat niet meer gebruikt wordt, laad de rest met async of defer, en laad een ingesloten video of kaart pas als iemand erbij komt. Een deel van de meting kan ook van de browser naar een server, zie server-side tracking.
• Lettertypen. Host ze zelf in plaats van ze bij een externe dienst op te halen, en beperk het aantal gewichten. Een lettertype dat laat inlaadt, verschuift tekst en telt mee in CLS.
• Vaste ruimte voor alles wat later komt. Geef afbeeldingen, video's en advertentieblokken een breedte en hoogte, zodat de rest van de pagina niet opschuift.
• Hosting en caching. Een trage eerste byte los je niet op met kleinere beelden. Een server dichter bij je bezoekers, een CDN en minder doorverwijzingen wel.

WordPress sneller maken

WordPress helpt zelf al een stuk. Sinds versie 6.3 zet het fetchpriority="high" op de afbeelding die waarschijnlijk het LCP-element is, en slaat het lazy loading over voor de beelden bovenaan de pagina.

Wat daarna overblijft zit meestal in het thema en de plugins. Een paginabouwer die op elke pagina al zijn scripts laadt, vijf plugins die elk een eigen stylesheet meebrengen, of een slider bovenaan waarvan het eerste beeld pas na een script verschijnt. WordPress sneller maken begint dus met tellen wat er op een pagina geladen wordt, en per onderdeel de vraag of het er moet staan. Een cacheplugin en goede hosting helpen bij de eerste byte, maar lossen een zwaar thema niet op.

Bij Vouwwagenspecialist bouwden we een nieuw WordPress-platform met Core Web Vitals als kwaliteitsstandaard vanaf de architectuur. De mobiele laadtijd ging van 6 naar 2,1 seconden. Dat is laadtijd en niet precies hetzelfde als LCP, maar het laat zien dat WordPress snel kan zijn als het fundament ervoor is gekozen.

Next.js en headless

Bij een site in Next.js zit een deel van het werk in het framework. De beeldcomponent levert afbeeldingen in de juiste maat en in WebP, laadt ze standaard pas als ze in beeld komen en voorkomt verspringen door de verhouding vooraf vast te leggen. Dat uitgestelde laden geldt ook voor het grote beeld bovenaan, dus dat geef je zelf preload of fetchPriority="high" mee; anders wacht juist de LCP. De lettertypemodule host lettertypen op je eigen domein, zonder verzoeken naar Google en zonder verspringen. En de pagina wordt op de server opgebouwd, zodat de bezoeker inhoud ziet voordat het JavaScript is geladen.

Dat is een voorsprong en geen garantie. Een Next.js-site met tien tags van derden haalt net zo goed een slechte INP. Het framework neemt de beeldmaten, de lettertypen en de afmetingen voor zijn rekening; welk beeld voorrang krijgt en welke scripts er draaien, blijft een keuze.

Bij Washin7, een Shopify-webshop, kwam de LCP na de nieuwe bouw op 1,9 seconden op mobiel. Het platform verschilt, de volgorde van het werk niet.

Het bekendste onderbouwde voorbeeld staat op web.dev. Vodafone testte twee versies van een landingspagina tegen elkaar, met gelijk verdeeld verkeer uit betaalde campagnes. De versie die op snelheid was verbeterd had een 31 procent betere LCP en leverde 8 procent meer verkopen op. Dat is één test bij één bedrijf, maar het is een echte A/B-test en geen correlatie.

Het mechanisme is niet ingewikkeld. Wie op een advertentie klikt en een lege pagina ziet, gaat terug. Wie op een knop tikt en niets ziet gebeuren, tikt nog eens of vertrekt. Die bezoekers heb je al betaald. Snelheid is daarom geen los technisch onderwerp. Wat er verder bij komt kijken staat in het artikel over conversie verhogen.

Core Web Vitals zijn zo bekeken vooral een meetlat voor iets wat je bezoekers allang merken. Wil je weten waar jouw site staat en wat er het meeste oplevert, dan beginnen we bij de veldgegevens en werken we de lijst hierboven af. Dat is werk dat we doen binnen design en development.

• web.dev: Web Vitals, opgehaald op 29 september 2026
• web.dev: Largest Contentful Paint (LCP), opgehaald op 29 september 2026
• web.dev: Optimize Largest Contentful Paint, opgehaald op 29 september 2026
• web.dev: Interaction to Next Paint (INP), opgehaald op 29 september 2026
• web.dev: Optimize Interaction to Next Paint, opgehaald op 29 september 2026
• web.dev: Interaction to Next Paint becomes a Core Web Vital on March 12, opgehaald op 29 september 2026
• web.dev: Cumulative Layout Shift (CLS), opgehaald op 29 september 2026
• web.dev: Efficiently load third-party JavaScript, opgehaald op 29 september 2026
• web.dev: Vodafone, a 31% improvement in LCP increased sales by 8%, opgehaald op 29 september 2026
• Google Search Central: Understanding Core Web Vitals and Google search results, opgehaald op 29 september 2026
• Google: About PageSpeed Insights, opgehaald op 29 september 2026
• Make WordPress Core: Image performance enhancements in WordPress 6.3, opgehaald op 29 september 2026
• Next.js: Image Optimization, opgehaald op 29 september 2026
• Next.js: Font Optimization, opgehaald op 29 september 2026