Core Web Vitals verbeteren: zo scoort jouw website beter in Google

Een bezoeker klikt op jouw zoekresultaat. Drie seconden later is hij weg, omdat de pagina niet opent. Of de knop verspringt net voordat hij wil klikken. Dat zijn exact de dingen die Google meet met Core Web Vitals. En ze beïnvloeden jouw rankings. In dit artikel leer je wat LCP, INP en CLS zijn, hoe je ze meet en welke fixes de grootste impact hebben op jouw score.

Wat zijn Core Web Vitals precies?

Core Web Vitals zijn drie meetwaarden waarmee Google beoordeelt hoe soepel een webpagina aanvoelt voor een echte bezoeker. Het gaat niet om een technische checklist, maar om beleving. Opent de pagina snel genoeg? Reageert hij direct op klikken? Staan elementen stabiel of verspringt alles tijdens het laden? Die drie vragen beantwoorden de drie metrics.

De eerste is Largest Contentful Paint (LCP). Dat is het moment waarop het grootste zichtbare element binnen de viewport klaar staat — meestal een hero afbeelding of een grote kop. De tweede is Interaction to Next Paint (INP). Die vervangt sinds maart 2024 de oude First Input Delay en meet hoe snel de pagina reageert als een bezoeker klikt of typt. De derde is Cumulative Layout Shift (CLS). Die meet of elementen onverwacht verspringen tijdens het laden.

Google gebruikt deze waarden als onderdeel van de Page Experience signalen. Ze bepalen niet alleen je positie. Maar ze kunnen het verschil maken tussen plek 3 en plek 6 als de content van concurrenten vergelijkbaar is.

Waarom Core Web Vitals belangrijker zijn dan veel ondernemers denken

Er heerst een misverstand dat Core Web Vitals alleen voor grote sites relevant zijn. Dat klopt niet. Ze beïnvloeden drie dingen die elk bedrijf raken: rankings, conversies en advertentiekosten.

De rankings zijn het bekendste verhaal. Google heeft bevestigd dat Core Web Vitals een ranking signaal zijn. Niet het sterkste, maar wel een signaal dat zwaarder weegt bij dicht op elkaar liggende concurrenten. Meer over hoe Google rankings bepaalt lees je in ons artikel over hoe lang SEO duurt.

Conversies worden direct geraakt door laadsnelheid. Onderzoek van Deloitte laat zien dat een laadtijdverbetering van 0,1 seconde de conversieratio van webshops met 8% verhoogt. Bij lead generatie sites is het effect vergelijkbaar. Elke extra seconde wachten kost je aanvragen.

En dan je advertentiekosten. Google Ads kijkt naar landingspagina ervaring als onderdeel van je Quality Score. Een trage pagina zorgt voor een lagere score, een hogere CPC en minder vertoningen voor hetzelfde budget. Meer over dat mechanisme staat in ons artikel over Quality Score verhogen.

LCP uitgelegd: zo maak je laden zichtbaar sneller

Largest Contentful Paint meet wanneer het grootste zichtbare element op je pagina staat. Voor de meeste sites is dat de hero afbeelding, een video thumbnail of een grote titel. Google rekent een LCP onder 2,5 seconden als goed, tussen 2,5 en 4 seconden als middelmatig en boven 4 seconden als slecht.

De drie meest voorkomende LCP problemen

Het eerste probleem is een te grote hero afbeelding. Een ongecomprimeerde foto van 3 MB heeft simpelweg te veel tijd nodig om te laden, vooral op mobiel. Comprimeer alle hero beelden naar onder de 200 KB, serveer ze in WebP of AVIF en stel de juiste breedte per apparaat in met srcset.

Het tweede probleem is een trage server. Als jouw hosting pas na 800 ms begint met leveren, heeft de browser al bijna de helft van zijn LCP budget verbruikt voordat er iets gedownload kan worden. Kies hosting met een Time to First Byte onder 200 ms of plaats een CDN voor je site. Cloudflare en Bunny doen dat al voor een paar euro per maand.

Het derde probleem is render blocking CSS en JavaScript. Elke externe stylesheet of script in je head vertraagt het moment waarop de browser iets kan tonen. Plaats kritische CSS inline in de head, laad de rest asynchroon en gebruik defer voor scripts die niet meteen nodig zijn.

Quickwins voor een betere LCP

Voeg een fetchpriority="high" toe aan je hero afbeelding. Dan weet de browser dat die prioriteit heeft boven alles. Zet preload tags neer voor je belangrijkste fonts en hero image, zodat de browser ze parallel kan downloaden. Vervang sliders in de hero door één statische afbeelding — sliders maken LCP vrijwel altijd slechter en worden door minder dan 1% van de bezoekers doorgeklikt.

INP uitgelegd: zo voelt klikken direct

Interaction to Next Paint meet hoe lang het duurt tussen een gebruikersactie en het eerstvolgende moment waarop de pagina visueel reageert. Een klik op een knop, een tik op een menu, een tekst die je typt — allemaal interacties die binnen 200 milliseconden gevolgd moeten worden door een zichtbare reactie. Boven de 500 ms voelt het traag en rekent Google het als slecht.

INP is voor de meeste ondernemers de metric waar de grootste winst ligt. Veel sites scoren gemiddeld op LCP en CLS, maar rommelig op INP omdat ze onnodig veel JavaScript uitvoeren bij elke interactie. Zware tracking scripts, grote chatwidgets en onoptimaal JavaScript zijn de grote boosdoeners.

Waar INP meestal vastloopt

De meest voorkomende oorzaak is third party JavaScript. Elke Facebook Pixel, Google Tag Manager container en chatbot voegt werk toe aan de hoofdthread. Als een bezoeker klikt terwijl een script draait, moet die eerst wachten. Audit je tag manager regelmatig en verwijder tags die je niet meer gebruikt. Over tag manager opzetten zonder dit probleem lees je meer in onze gids over Google Tag Manager voor beginners.

De tweede oorzaak is zware rendering bij interactie. Als een klik op een filter een complete herberekening triggert van honderden producten, voelt dat traag. Splits grote taken op in kleinere stukken met requestIdleCallback, gebruik virtualisatie bij lange lijsten en vermijd onnodig DOM werk tijdens events.

De derde oorzaak zijn animaties die niet via CSS draaien. JavaScript animaties blokkeren de hoofdthread, CSS animaties niet. Gebruik waar mogelijk transform en opacity in plaats van JavaScript loops die posities updaten.

CLS uitgelegd: zo houd je je pagina stabiel

Cumulative Layout Shift meet hoeveel elementen op je pagina verspringen tijdens het laden. Een goede score zit onder 0,1. Alles tussen 0,1 en 0,25 is middelmatig. Boven 0,25 is slecht. CLS is de metric met de meest voorspelbare fixes, maar veel sites hebben hem nog niet op orde.

Afbeeldingen zonder dimensies

Dit is verreweg de grootste oorzaak van CLS. Als een afbeelding geen width en height attribuut heeft, weet de browser niet hoeveel ruimte hij moet reserveren. Zodra de afbeelding laadt, schuift alles eronder naar beneden. Dat telt direct mee in je CLS. Voeg altijd width en height toe aan img tags of reserveer ruimte met CSS aspect-ratio.

Advertenties en embeds

Google AdSense banners, YouTube embeds en social media widgets laden later dan je hoofdcontent. Als ze geen gereserveerde ruimte hebben, duwen ze content omlaag op het moment dat een bezoeker leest of klikt. Reserveer minimaal de maximale hoogte met een div wrapper, zodat de ruimte al klaarstaat voordat de ad of embed is geladen.

Webfonts die laat laden

Als jouw font later laadt dan de tekst, switch de browser tussen een systeemfont en het uiteindelijke font. Teksten worden groter of smaller en alles eronder schuift. Gebruik font-display: optional of font-display: swap in combinatie met preload van je belangrijkste fonts, zodat de switch minimaal is.

Hoe meet je Core Web Vitals betrouwbaar?

Er zijn twee soorten metingen: veldwaarden en lab waarden. Veldwaarden komen van echte bezoekers via het Chrome User Experience Report (CrUX). Lab waarden zijn simulaties in een testomgeving. Alleen veldwaarden tellen voor Google, dus die zijn het belangrijkst.

PageSpeed Insights is de gemakkelijkste ingang. Je voert een URL in en krijgt zowel veld als lab resultaten. Search Console heeft een apart rapport Web Vitals waarin je ziet welke URL groepen op mobiel en desktop onder de grenswaarden zitten. Start daar, want Search Console laat direct zien welke pagina templates de meeste problemen hebben.

Voor dagelijks werk is Lighthouse in Chrome DevTools handig. Het geeft je precieze suggesties per pagina, inclusief verantwoordelijke elementen en scripts. WebPageTest is geavanceerder en toont hoe jouw pagina laadt op verschillende verbindingssnelheden. Combineer veldwaarden uit Search Console met lab tests voor elke optimalisatie die je doet.

Een realistisch optimalisatieplan in drie weken

Core Web Vitals optimaliseren hoeft geen maandenlang traject te zijn. Met een gestructureerde aanpak boek je binnen drie weken meetbaar resultaat. Begin met de 20% aanpassingen die 80% van het resultaat leveren.

In week één check je de situatie. Open Search Console en noteer welke URL groepen onder de grenswaarde zitten en welke metric het probleem is. Doe hetzelfde in PageSpeed Insights voor je belangrijkste landingspagina's. Kies één metric en één templatetype waar je begint.

In week twee voer je de grootste fixes door. Comprimeer en converteer hero afbeeldingen. Voeg fetchpriority en preload tags toe. Ruim ongebruikte tag manager tags op. Reserveer ruimte voor alle images en embeds. Dat zijn meestal acties van een paar uur per pagina die tientallen procenten winst opleveren.

In week drie meet je opnieuw en finetuned. Draai PageSpeed Insights vijf keer per pagina om de spreiding te zien. Controleer Search Console na 28 dagen, want dat is de periode waarop Google veldwaarden rapporteert. Documenteer wat werkte, rol uit naar andere templates en zet een periodieke check in je kalender.

Praktijkvoorbeeld: van rood naar groen in 21 dagen

Een Nederlandse webshop met ongeveer 40.000 organische bezoekers per maand scoorde bij de start een LCP van 4,1 seconden op mobiel, een INP van 620 ms en een CLS van 0,18. Alle drie de metrics stonden rood in Search Console. Het team dacht aan een complete herbouw.

In plaats daarvan werden drie dingen aangepakt. Hero images werden geconverteerd naar AVIF en gekrompen van gemiddeld 1,8 MB naar 180 KB. Tag Manager werd opgeschoond van 42 tags naar 18 actieve tags. Width en height attributen werden toegevoegd aan alle img tags in productlijsten. Totale ontwikkeltijd: ongeveer 30 uur.

Na drie weken: LCP 2,3 seconden, INP 210 ms, CLS 0,06. Alle drie groen. In de twee maanden daarna steeg het organisch verkeer met 23% en de conversieratio met 11%. Niets nieuws aan de content, alleen een snellere website. Dat is het effect waar je Core Web Vitals voor doet.