Wat meten Core Web Vitals?
Kort antwoord: LCP meet de weergave van het grootste zichtbare inhoudselement, INP de reactiesnelheid na een interactie en CLS de stabiliteit van de lay-out. Google beveelt aan ze op het 75e percentiel te beoordelen, afzonderlijk op mobiel en computer.
Een website kan mooi en goed geschreven zijn en toch vervelend blijven in gebruik als de inhoud laat verschijnt, de site traag reageert of onderdelen verspringen.
Google gebruikt Core Web Vitals in zijn systemen voor pagina-ervaring. Google benadrukt ook dat een goed resultaat geen eerste positie garandeert en dat de relevantie van de inhoud essentieel blijft. Deze metingen vormen dus een onderdeel van een SEO-audit, geen rangschikkingsformule.
75e
Google beveelt aan LCP, INP en CLS op het 75e percentiel van de paginaladingen te beoordelen, afzonderlijk op mobiel en computer.
De drie metingen moeten samen worden gelezen en aan de betrokken pagina worden gekoppeld. Een labtest helpt de oorzaak te bepalen; praktijkgegevens beschrijven wat echte bezoekers hebben ervaren, wanneer er voldoende gegevens beschikbaar zijn.
De 3 Core Web Vitals eenvoudig uitgelegd
- LCP: de hoofdinhoudHet moment waarop het grootste zichtbare element verschijnt.
- INP: de reactie op een actieDe wachttijd tot de volgende visuele update.
- CLS: de stabiliteitOnverwachte verschuivingen van de inhoud tijdens het laden.
LCP = Largest Contentful Paint (weergave van het grootste inhoudselement)
Eenvoudig gezegd: hoe snel laadt de hoofdinhoud van uw pagina?
Wanneer u een website opent, ziet u eerst wit. Daarna verschijnen beetje bij beetje de afbeeldingen, tekst en andere elementen. LCP is het moment waarop het ‘grootste element’ (doorgaans de heroafbeelding of hoofdtitel) verschijnt.
Aanbevolen drempel voor ‘goed’: 2,5 seconden of minder, op het 75e percentiel.
Concreet voorbeeld: uw blogartikel toont zijn hoofdinhoud in een test na 1,2 seconde of na 4 seconden. Praktijkgegevens laten zien wat bezoekers werkelijk ervaren.
Bepaal eerst welk element werkelijk als LCP wordt gemeten. Gaat het om een afbeelding, controleer dan het formaat, de afmetingen, de laadprioriteit en de responstijd voordat u de rest van de pagina aanpast.
INP = Interaction to Next Paint (interactiviteit)
Eenvoudig gezegd: hoe snel reageert uw website wanneer u klikt, typt of iets anders doet?
Na een klik op een knop duurt het even voordat er iets gebeurt. INP meet die wachttijd.
Aanbevolen drempel voor ‘goed’: 200 milliseconden of minder, op het 75e percentiel.
Concreet voorbeeld: u klikt op ‘In winkelmandje’ en de volgende visuele update verschijnt in een test na 150 ms of na 800 ms.
CLS = Cumulative Layout Shift (cumulatieve lay-outverschuiving)
Eenvoudig gezegd: ‘beweegt’ uw pagina tijdens het laden?
Stel u voor: u leest een tekst en plots verschijnt erboven een advertentie. De tekst schuift naar beneden en u verliest uw plek. Frustrerend, toch? Dat is CLS.
Aanbevolen drempel voor ‘goed’: 0,1 of minder, op het 75e percentiel.
Concreet voorbeeld: de inhoud van uw pagina blijft stabiel met een gemeten CLS van 0,02 of verschuift met een CLS van 0,5.
Een afbeelding zonder afmetingen kan de inhoud verschuiven wanneer ze laadt. Door de breedte en hoogte op te geven, kan de browser ruimte reserveren.
Waarom zijn ze zo belangrijk?
Google Zoeken
Core Web Vitals behoren tot de signalen voor pagina-ervaring. Ze voorspellen niet de rangschikking tussen twee pagina’s en vervangen de relevantie van de inhoud niet.
Conversie
Prestaties kunnen het gedrag van bezoekers beïnvloeden, maar er bestaat geen universeel percentage voor alle websites. Meet het effect met uw eigen gebeurtenissen, een vergelijkbare periode en voldoende volume.
Mobiel
Google gebruikt voornamelijk de mobiele versie van de inhoud voor indexering. Controleer op die versie dus zowel de aanwezigheid van nuttige inhoud als de toegankelijkheid en de werkelijke laadomstandigheden.
Hoe meet u uw Core Web Vitals?
PageSpeed Insights (gratis, officieel van Google)
Ga naar pagespeed.web.dev en plak uw URL. Afhankelijk van de beschikbare gegevens ziet u:
- CrUX-praktijkgegevens als de URL of oorsprong voldoende volume heeft
- een Lighthouse-labtest die op het moment van de analyse is uitgevoerd
- Of u in het groen (goed), oranje (gemiddeld) of rood (slecht) zit
- optimalisatiesuggesties die u in uw context moet toetsen
Google Search Console (gratis, voor uw volledige website)
Search Console groepeert URL’s volgens hun praktijkgegevens wanneer voor de website voldoende informatie beschikbaar is.
Het Performance-paneel in Chrome DevTools (gratis)
Open het Performance-paneel in Chrome DevTools om lokale metingen en, indien beschikbaar, praktijkgegevens te bekijken. Het vervangt sinds januari 2025 de oude Web Vitals-extensie, zoals uitgelegd in de Chrome-documentatie.
Lighthouse (gratis, ingebouwd in Chrome)
Open DevTools (F12), klik op ‘Lighthouse’ en start een audit. U krijgt een totaalscore en details.
Oplossingen om LCP te verbeteren
Probleem 1: te zware heroafbeelding
Oplossing: pas de bestandsgrootte, het formaat en de afmetingen van de afbeelding aan de werkelijke weergave aan en meet daarna opnieuw onder vergelijkbare omstandigheden.
- Gebruik TinyPNG of ImageOptim
- Gebruik moderne formaten (WebP in plaats van JPG)
- Pas de afmetingen van afbeeldingen aan de weergavegrootte aan (een afbeelding van 5000x3000 is niet nodig als ze op 800x600 wordt getoond)
Probleem 2: te veel vertragende JavaScript
Oplossing: laad uw JS ‘lazy’ (dus later, niet bij het opstarten).
- Voeg het attribuut
defertoe aan niet-kritieke scripts - Gebruik
asyncvoor onderdelen die kunnen wachten
Probleem 3: de server reageert traag (TTFB - Time to First Byte)
Oplossing:
- meet de responstijd voordat u beslist of de hosting moet veranderen
- Gebruik een CDN (Cloudflare, Fastly) wanneer de locatie van de doelgroep en de architectuur dat rechtvaardigen
- Bewaar uw pagina’s in de cache (met een cacheplug-in als u WordPress gebruikt)
Oplossingen om INP te verbeteren (interactiviteit)
Probleem 1: langdurig blokkerende JavaScript
Oplossing: zoek lange taken op, verwijder onnodig werk en splits de verwerking op zodat de browser tussen de stappen weer aan de beurt komt.
Probleem 2: te veel verwerking bij een klik
Oplossing: vereenvoudig uw interacties. Als een klik op een knop 10 bewerkingen start, is dat te veel. Voer alleen onmiddellijk uit wat nodig is.
Probleem 3: te zware JavaScript-bibliotheken
Oplossing: gebruik lichtere bibliotheken of verminder het aantal bibliotheken.
Oplossingen om CLS te verbeteren (verschuiving)
Probleem 1: afbeeldingen zonder vastgelegde afmetingen
Oplossing: geef de hoogte en breedte van uw afbeeldingen altijd op in HTML. Zo wordt de ruimte vóór het laden gereserveerd.
<img src="photo.jpg" width="800" height="600" alt="...">
Probleem 2: inhoud die later laadt (advertenties, embeds)
Oplossing: reserveer ook ruimte voor die dynamische inhoud.
Probleem 3: lettertypes die veranderen
Oplossing: gebruik font-display: swap om tekst tijdens het laden met een vervangend lettertype weer te geven. De wissel kan de tekst nog steeds verschuiven: kies een vervangend lettertype met vergelijkbare afmetingen en meet de CLS na de wissel.
Prioriteiten: waar beginnen?
- Stap 1: leg een nulmeting vast met praktijk- en labgegevens en vermeld de meetomstandigheden.
- Stap 2: bepaal welke meting en welk element werkelijk het probleem veroorzaken.
- Stap 3: pas één wijziging tegelijk toe en controleer daarna de weergave en functies.
- Stap 4: herhaal de tests en volg de praktijkgegevens over een voldoende lange periode op.
Tools voor optimalisatie
Cloudflare en andere CDN’s
Een CDN en cacheregels kunnen bepaalde overdrachtstijden verkorten. Het effect hangt af van de oorsprong, inhoud, regels en locatie van de bezoekers. Meet vóór en na.
WordPress: WP Rocket of LiteSpeed Cache
Op WordPress kunnen deze plug-ins helpen de cache en bepaalde optimalisaties in te stellen. Test elke optie, want de compatibiliteit hangt af van het thema en andere plug-ins.
Vercel of Netlify (voor statische websites/Next.js)
Deze platformen bieden nuttige bouwstenen voor deployment en caching. De code, media en externe scripts blijven bepalend.
Audit of optimalisatie: welke volgende stap kiest u?
Bekijk onze aanpak van websiteontwikkeling om prestaties in een volledig project te plaatsen. Is er al een probleem gemeten, bekijk dan de optimalisatie van prestaties en Core Web Vitals. Is de oorzaak nog onbekend, begin dan met een prestatieaudit. Het plan vertrekt van een nulmeting en belooft geen universele score.
Conclusie: u kunt dit
Core Web Vitals zijn geen ingewikkelde magie. LCP = snel laden. INP = snel reageren. CLS = niet verspringen. Drie eenvoudige dingen.
Ook de oplossingen zijn eenvoudig: comprimeer uw afbeeldingen, laad uw JS slim en reserveer ruimte voor dynamische inhoud.
De termijn hangt af van de oorzaak. Een afbeelding of cacheregel kan snel worden verbeterd, terwijl een architectuur of externe scripts meer werk vragen. Als de website te veel technische schuld heeft opgebouwd, kan een herontwerp het overwegen waard zijn.
Begin vandaag. Meet met PageSpeed Insights, verbeter één ding tegelijk en meet opnieuw. Daar draait het om.