# Core Web Vitals uitgelegd: wat ze zijn en hoe je ze verbetert voor Google Google gebruikt honderden signalen om te bepalen welke website bovenaan de zoekresultaten komt. Core Web Vitals zijn drie van die signalen, en het bijzondere is: je kunt ze meten en verbeteren. Geen vaag 'kwalitatief' verhaal, maar harde getallen met duidelijke drempelwaarden. Dit artikel legt uit wat de drie maatstaven precies meten, waarom ze relevant zijn voor jouw MKB-website, en welke aanpassingen de grootste impact hebben. ## Wat zijn Core Web Vitals? Core Web Vitals zijn een set prestatiecijfers die Google in 2020 introduceerde als onderdeel van zijn 'Page Experience' signalen. Sinds 2021 wegen ze officieel mee in de ranking. Google meet drie dingen: - **LCP (Largest Contentful Paint)**: hoe snel het grootste zichtbare element op je pagina geladen is - **CLS (Cumulative Layout Shift)**: hoeveel de pagina-inhoud onverwacht verschuift tijdens het laden - **INP (Interaction to Next Paint)**: hoe snel de pagina reageert als een bezoeker klikt of typt Voor elk van de drie heeft Google drempelwaarden bepaald: groen, oranje (moet verbeteren) en rood. Groen is goed, oranje is acceptabel, rood schaadt je ranking. ## LCP: hoe snel laadt het belangrijkste element? LCP meet de laadtijd van het grootste zichtbare element bovenaan je pagina. Dat is vaak een grote afbeelding, een banner, of een grote koptekst. Google meet dit vanaf het moment dat de bezoeker op de link klikt. **Drempelwaarden:** - Groen: onder 2,5 seconden - Oranje: 2,5 tot 4 seconden - Rood: meer dan 4 seconden Een LCP van meer dan 4 seconden is geen uitzondering. Websites met grote, ongeoptimaliseerde afbeeldingen of trage hostingservers scoren vaak rood. **Wat helpt:** - Gebruik WebP of AVIF in plaats van PNG of JPEG. WebP is gemiddeld 25 tot 35 procent kleiner bij vergelijkbare kwaliteit. - Geef de grootste afbeelding het HTML-attribuut `fetchpriority="high"` mee. Zo weet de browser dat die afbeelding prioriteit heeft. - Kies een hostingprovider met servers in of dicht bij Nederland. Een server in Frankfurt laadt merkbaar sneller voor Nederlandse bezoekers dan een in de VS. - Verwijder onnodige scripts die het laden blokkeren, zoals analytics-tags die je niet meer gebruikt. ## CLS: verschuift je pagina tijdens het laden? CLS meet hoe stabiel de layout is terwijl de pagina laadt. Heeft een bezoeker net zijn muis op een knop gezet en springt die knop plotseling naar beneden omdat een afbeelding erboven alsnog laadt? Dan scoort de pagina slecht op CLS. **Drempelwaarden:** - Groen: onder 0,1 - Oranje: 0,1 tot 0,25 - Rood: meer dan 0,25 Een CLS-score van 0 is ideaal maar zelden realistisch. Een score onder 0,1 is het doel. **Wat helpt:** - Geef afbeeldingen en video's altijd een vaste breedte en hoogte in de HTML of CSS. De browser reserveert dan ruimte voordat het element geladen is. - Laad advertenties of embeds niet bovenaan de pagina tenzij de ruimte ervoor vaststaat. - Gebruik geen lettertypen die pas laat worden geladen en dan andere tekst verdringen. Laad lettertypen in met `font-display: swap` of gebruik een systeemlettertype als fallback. ## INP: hoe snel reageert je pagina op interactie? INP verving in maart 2024 de oudere maatstaf FID (First Input Delay). Waar FID alleen de eerste klik mat, kijkt INP naar alle interacties gedurende het bezoek. Google beoordeelt hoe snel de pagina visueel reageert nadat een bezoeker iets heeft gedaan. **Drempelwaarden:** - Groen: onder 200 milliseconden - Oranje: 200 tot 500 milliseconden - Rood: meer dan 500 milliseconden INP is vooral relevant voor interactieve pagina's: formulieren, zoekfuncties, filters in webshops. **Wat helpt:** - Houd JavaScript-taken klein. Lang lopende scripts blokkeren de browser en verhogen de INP. - Laad JavaScript dat niet direct nodig is pas later in (`defer` of `lazy loading`). - Verwijder ongebruikte JavaScript-bibliotheken. Een zware frontend-framework dat je maar voor 10 procent gebruikt is een veelvoorkomende boosdoener. ## Hoe meet je Core Web Vitals? Je hebt twee bronnen: labdata en velddata. **Labdata** meet je met tools als Google PageSpeed Insights of Lighthouse in Chrome DevTools. Die simuleren een bezoeker op jouw pagina vanuit een gecontroleerde omgeving. Handig om snel problemen te spotten. **Velddata** is afkomstig van echte bezoekers via het Chrome User Experience Report (CrUX). Google Search Console toont die velddata in het rapport 'Paginaervaring'. Pas als je genoeg verkeer hebt, verschijnt die data. Google geeft velddata meer gewicht in de ranking dan labdata. Maar voor verbetering is labdata de snelste manier om te testen wat werkt. Bij Web Design by Kick meten we bij elke nieuwe site beide bronnen voor de lancering en stellen we een baseline in zodat verslechtering direct zichtbaar is. ## De snelste winst: afbeeldingen optimaliseren Als je maar één ding doet om je Core Web Vitals te verbeteren, optimaliseer dan je afbeeldingen. Grote, ongecomprimeerde afbeeldingen zijn de meest voorkomende oorzaak van een slechte LCP-score. Praktisch stappenplan: 1. Controleer via PageSpeed Insights welk element je LCP bepaalt. 2. Comprimeer die afbeelding met Squoosh (gratis tool van Google) en converteer naar WebP. 3. Voeg `fetchpriority="high"` toe aan de HTML van die afbeelding. 4. Meet opnieuw. Voor de meeste kleine websites levert dit al een verbetering van 1 tot 2 seconden op de LCP. ## Hoe groot is de impact op je ranking? Core Web Vitals zijn geen doorslaggevende factor. Google heeft meerdere keren bevestigd dat relevantie en inhoud zwaarder wegen dan technische prestatie. Een pagina met uitstekende Core Web Vitals maar dunne inhoud wint het niet van een inhoudelijk sterk artikel met middelmatige snelheid. Toch zijn er twee situaties waar ze weldegelijk het verschil maken: bij vergelijkbare concurrenten in hetzelfde zoekresultaat, en bij het voorkomen van afhaken. Een pagina die 4 seconden laadt verliest gemiddeld 25 procent meer bezoekers dan een pagina die 1 seconde laadt, volgens onderzoek van Google. Die bezoekers zie je nooit terug. ## Conclusie Core Web Vitals zijn drie meetbare indicatoren die Google gebruikt om de gebruikerservaring van je pagina te beoordelen. LCP meet laadsnelheid, CLS meet lay-outstabiliteit, INP meet reactiesnelheid. Afbeeldingen optimaliseren levert voor de meeste websites de snelste verbetering. Meet eerst via PageSpeed Insights voordat je aanpassingen doet, zodat je weet waar de winst zit. ## Bronnen - [Core Web Vitals - Google Search Central](https://developers.google.com/search/docs/appearance/core-web-vitals) - [Web Vitals - web.dev](https://web.dev/articles/vitals) - [PageSpeed Insights](https://pagespeed.web.dev/) - [Impact van paginasnelheid op conversie - Think with Google](https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/page-load-time-statistics/) - [Squoosh - Google afbeeldingencompressor](https://squoosh.app/) --- Bron: https://webdesign.bykick.nl/blog/core-web-vitals-uitgelegd-wat-ze-zijn-en-hoe-je-ze-verbetert