Core Web Vitals Uitleg: LCP, FID, CLS en INP

Core Web Vitals zijn drie specifieke metrics die Google gebruikt om de gebruikerservaring op je website te meten. Sinds 2021 zijn ze een officiele rankingfactor in het zoekalgoritme. Ze meten hoe snel je pagina laadt, hoe snel die reageert op interactie, en hoe stabiel de lay-out blijft tijdens het laden.

Google verzamelt deze gegevens van echte Chrome-gebruikers via het Chrome User Experience Report. Dit betekent dat je scores gebaseerd zijn op hoe werkelijke bezoekers je website ervaren, niet op laboratoriumtests. Als je voldoende verkeer hebt, kan je je velddata bekijken in Google Search Console onder het rapport Core Web Vitals.

Largest Contentful Paint, afgekort LCP, meet hoe lang het duurt voordat het grootste zichtbare element op je pagina volledig geladen is. Dit kan een hero-afbeelding zijn, een grote tekstkop of een video-thumbnail. Google beschouwt een LCP onder de 2,5 seconden als goed, tussen 2,5 en 4 seconden als matig, en boven de 4 seconden als slecht.

De meest voorkomende oorzaken van een trage LCP zijn ongeoptimaliseerde afbeeldingen, trage serverrespons en render-blokkerende resources. Als je hero-afbeelding het LCP-element is, zorg dan dat deze gecomprimeerd is, in het juiste formaat staat en via een preload-hint geladen wordt zodat de browser er direct mee begint.

Ook je serversnelheid speelt een grote rol. Als je Time to First Byte hoog is, start alles met vertraging. Overweeg server-side caching, een snellere hostingomgeving of een CDN om die eerste reactie te versnellen. Verwijder daarnaast render-blokkerende CSS en JavaScript die de browser dwingen om te wachten voordat hij het LCP-element kan tonen.

Interaction to Next Paint, ofwel INP, verving in maart 2024 de oudere First Input Delay metric. INP meet de vertraging tussen een gebruikersinteractie, zoals een klik of toetsaanslag, en de volgende visuele update op het scherm. Een INP onder de 200 milliseconden is goed, tussen 200 en 500 milliseconden is matig, en boven de 500 milliseconden is slecht.

Het grote verschil met de oude FID-metric is dat INP alle interacties tijdens het volledige bezoek meet, niet alleen de eerste. Dit geeft een veel realistischer beeld van hoe responsief je website aanvoelt. Een pagina die prima laadt maar traag reageert bij het openen van een menu of het filteren van producten scoort slecht op INP.

De belangrijkste oorzaak van een slechte INP is langlopend JavaScript dat de hoofdthread blokkeert. Wanneer de browser bezig is met het uitvoeren van een zwaar script, kan die niet reageren op gebruikersinteracties. De oplossing is om grote taken op te splitsen in kleinere blokken, niet-essentiele scripts uit te stellen, en zware berekeningen naar web workers te verplaatsen.

Cumulative Layout Shift, afgekort CLS, meet hoeveel elementen op je pagina onverwacht verschuiven tijdens het laden. Je kent het vast: je wilt op een link klikken en net op dat moment springt de hele pagina omlaag omdat er een advertentie of afbeelding inlaadt. Dat is precies wat CLS meet. Een score onder de 0,1 is goed.

De meest voorkomende oorzaken van layout shifts zijn afbeeldingen en video's zonder opgegeven afmetingen, dynamisch ingevoegde content zoals advertenties of cookiebanners, en webfonts die de tekstweergave veranderen wanneer ze laden.

Voorkom CLS door altijd width- en height-attributen op te geven voor afbeeldingen en video's. Dit reserveert de juiste ruimte in de lay-out voordat het element geladen is. Voor dynamische content zoals advertenties, reserveer een vaste ruimte met een minimale hoogte. Gebruik font-display: swap voor webfonts en overweeg om een fallback-font te kiezen dat qua afmetingen sterk lijkt op je webfont.

Er zijn twee soorten data voor Core Web Vitals: velddata van echte gebruikers en labdata van gesimuleerde tests. Velddata is wat Google gebruikt voor rankings en is beschikbaar via Google Search Console, PageSpeed Insights en het CrUX-dashboard. Labdata krijg je via tools zoals Lighthouse, PageSpeed Insights en WebPageTest.

Google Search Console is de beste plek om te beginnen. Onder het rapport Core Web Vitals zie je welke pagina's goed, matig of slecht presteren, gegroepeerd per type probleem. Dit rapport is gebaseerd op echte gebruikersdata en toont alleen pagina's met voldoende bezoekers.

Voor individuele pagina's gebruik je PageSpeed Insights. Bovenaan zie je de velddata als die beschikbaar is, daaronder de labdata met gedetailleerde aanbevelingen. Chrome DevTools biedt de meest gedetailleerde analyse via de Performance-tab, waar je precies kan zien welke processen je pagina vertragen. De Web Vitals Chrome-extensie toont je Core Web Vitals in realtime terwijl je door je website navigeert.

Begin met het identificeren van je probleempagina's via Google Search Console. Focus eerst op pagina's die als slecht gemarkeerd staan, want die hebben het meeste potentieel voor verbetering. Open elke probleempagina in PageSpeed Insights voor specifieke aanbevelingen.

Voor LCP-verbeteringen: optimaliseer je grootste afbeelding met compressie en moderne formaten, voeg een preload-hint toe voor het LCP-element, verbeter je serverresponstijd en verwijder render-blokkerende resources. Voor INP: splits langlopend JavaScript op, stel niet-essientiele scripts uit, en gebruik requestIdleCallback voor taken met lage prioriteit.

Voor CLS: voeg afmetingen toe aan alle afbeeldingen en iframes, reserveer ruimte voor dynamische content, en optimaliseer je fontlading. Na elke aanpassing meet je opnieuw met labtools om het directe effect te zien. Velddata in Search Console heeft twee tot vier weken nodig om bij te werken, want het is gebaseerd op een rollend gemiddelde van 28 dagen.

Core Web Vitals zijn een bevestigde rankingfactor, maar het is belangrijk om hun rol in perspectief te plaatsen. Google gebruikt honderden rankingsignalen en content relevantie blijft de belangrijkste. Een pagina met uitstekende Core Web Vitals maar slechte content zal niet hoog scoren. Omgekeerd kan een pagina met goede content ondanks matige Core Web Vitals nog steeds goed presteren.

Waar Core Web Vitals het verschil maken is bij pagina's die qua content en autoriteit vergelijkbaar zijn. Als jij en je concurrent even relevante content hebben, kan een betere gebruikerservaring het verschil maken in de rankings. In competitieve niches waar het verschil klein is, worden Core Web Vitals een doorslaggevende factor.

Daarnaast beinvloeden Core Web Vitals ook je topverhalen-zichtbaarheid op mobiel en je kans op featured snippets. Google heeft aangegeven dat de invloed van gebruikerservaring-signalen in de toekomst alleen maar zal toenemen. Investeren in Core Web Vitals is dus niet alleen goed voor je huidige rankings, maar ook een investering in toekomstige zichtbaarheid.