Core Web Vitals verbeteren: LCP, INP en CLS aanpakken

Core Web Vitals verbeter je niet met een enkele instelling, maar metric per metric: je versnelt het laden (LCP), je maakt de pagina reactiever (INP) en je houdt de layout stabiel (CLS). Elke metric heeft zijn eigen oorzaken en dus zijn eigen fixes. In dit artikel lees je per metric wat je concreet aanpakt, hoe je controleert of het werkt, en in welke volgorde je dat best doet zodat het effect heeft op je leads en niet alleen op een cijfer.

Wil je eerst weten wat LCP, INP en CLS precies meten en waarom Google ze meeweegt, lees dan onze uitleg over wat Core Web Vitals zijn. Hier gaan we meteen naar de oplossingen.

Wat zijn de drempelwaarden waar je naartoe werkt?

Je mikt op drie waarden: een LCP onder 2,5 seconden, een INP onder 200 milliseconden en een CLS onder 0,1. Dat zijn de grenzen die Google als “goed” bestempelt.

• LCP (Largest Contentful Paint) meet hoe snel het grootste contentblok in beeld komt, meestal je hero-afbeelding of een grote kop.
• INP (Interaction to Next Paint) meet hoe snel je pagina reageert als iemand klikt, tikt of typt. INP is sinds 2024 de officiele maatstaf voor reactiesnelheid en verving de oudere FID-metric.
• CLS (Cumulative Layout Shift) meet hoeveel de layout verspringt tijdens het laden.

Belangrijk om te weten voor je begint: Google beoordeelt deze cijfers op het 75e percentiel van je echte bezoekersdata. Anders gezegd, minstens driekwart van je bezoekers moet een goede score halen. Een mooie labmeting op jouw snelle laptop zegt dus weinig; het gaat om wat je publiek op een gemiddeld toestel en verbinding ervaart. Daarom werk je altijd vanuit echte data en niet vanuit een gevoel.

Hoe verbeter je je LCP?

De snelste route naar een betere LCP is je grootste, eerst zichtbare element lichter en sneller maken. In de praktijk is dat bijna altijd een afbeelding of een zwaar laadproces dat ervoor in de weg zit.

Concrete fixes, in volgorde van impact:

• Comprimeer je afbeeldingen en gebruik moderne formaten zoals WebP of AVIF. Een hero-afbeelding van enkele megabytes is een klassieke LCP-moordenaar. Geef beelden ook de juiste afmetingen mee in plaats van een groot bestand kleiner te schalen in de browser.
• Zorg voor snelle hosting en een CDN. Een trage server laat de browser wachten voor er ook maar iets verschijnt. Hosting dicht bij je publiek, in dit geval doorgaans Europa, scheelt merkbaar.
• Laad je belangrijkste afbeelding met voorrang. Met technieken als preloaden vertel je de browser dat dit beeld er eerst moet zijn. Lazy loading hoort net niet thuis op je hero, want dan stel je uit wat je nodig hebt.
• Beperk wat de pagina blokkeert. Zware lettertypes, externe scripts en onnodige CSS die eerst moet inladen, vertragen het moment waarop je content zichtbaar wordt. Hoe minder de browser moet doen voor de eerste weergave, hoe beter.

Veel van deze winst is technisch werk onder de motorkap. Het loont om dit goed te doen bij de bouw of bij een website redesign, want achteraf bijsturen kost altijd meer.

Hoe maak je je INP beter?

INP verbeter je door de hoeveelheid en de zwaarte van JavaScript terug te dringen, zodat de pagina vrij is om snel op een klik te reageren. Een trage INP voelt aan als een knop die niet reageert, waarna je geirriteerd nog eens klikt.

Wat het verschil maakt:

• Snoei in scripts van derden. Trackers, chatwidgets, A/B-testtools en marketingpixels stapelen op en houden de hoofdthread bezig. Schrap wat je niet echt gebruikt en laad de rest uitgesteld.
• Splits zwaar werk op. Lange, ononderbroken stukken JavaScript blokkeren elke reactie. Door taken op te delen geef je de browser ruimte om tussendoor op interacties te reageren.
• Wees kritisch op zware paginabouwers en plugins. Vooral op WordPress kan een opeenstapeling van plugins en een zware thema-builder je INP onderuithalen. Minder is hier vaak sneller.
• Houd formulieren licht. Je contact- en offerteformulieren zijn precies de plekken waar interactie telt. Een formulier dat hapert op het moment dat iemand wil versturen, kost je rechtstreeks een lead.

INP is de metric die het sterkst samenhangt met hoe “snappy” je site aanvoelt. Een pagina die meteen reageert, houdt mensen in de flow naar je conversiepunt.

Hoe los je CLS op?

CLS los je op door alles wat ruimte inneemt op voorhand een vaste plek te geven, zodat er niets verspringt terwijl de pagina inlaadt. Verspringende content is irritant en kost soms letterlijk een verkeerde klik.

De meest voorkomende oorzaken en hun fix:

• Beeld zonder vaste afmetingen. Geef elke afbeelding en video een vaste breedte en hoogte mee, zodat de browser de ruimte reserveert voor het beeld er is. Dit is veruit de meest voorkomende bron van layout shift.
• Advertenties, embeds en banners. Reserveer een vast blok voor content die later inlaadt, zoals een ingesloten kaart, video of cookiemelding. Zo duwt die niets naar beneden.
• Lettertypes die laat inladen. Wanneer een webfont pas later verschijnt en de tekst herschikt, springt je layout. Door fonts slim te laden en een goede terugvalstijl te kiezen, beperk je dat.
• Content die bovenaan wordt ingeschoven. Een melding of balk die plots boven je content verschijnt, duwt alles weg. Plan daar ruimte voor in plaats van het erbovenop te schuiven.

CLS is meestal de goedkoopste van de drie om te repareren, omdat de fixes vaak klein en lokaal zijn. Toch wordt hij vaak vergeten, juist omdat het op een snelle ontwikkelmachine nauwelijks opvalt.

Hoe controleer je of je verbeteringen werken?

Je meet vooraf en achteraf, en je kijkt naar je echte bezoekers, niet enkel naar een labtest. Anders verbeter je een cijfer dat je publiek nooit te zien krijgt.

In de praktijk gebruik je twee soorten bronnen samen:

• Veldgegevens (echte bezoekers). Google Search Console toont de Core Web Vitals voor je hele site op basis van werkelijke gebruikersdata, met de URL’s die aandacht vragen. Dit is je waarheidsbron, want het is precies wat Google beoordeelt.
• Labgegevens (diagnose). Tools zoals PageSpeed Insights en Google Lighthouse draaien een test in een gesimuleerde omgeving. Handig om te zien wat een pagina vertraagt en om snel te testen, maar de cijfers schommelen en zijn een diagnose, geen eindoordeel.

Werkwijze die werkt: meet de huidige stand, voer een fix door, en kijk na een paar weken in Search Console of je veldscores meebewegen. Veldgegevens lopen wat achter omdat ze over een periode worden opgebouwd, dus verwacht niet meteen na het deployen een ander cijfer. Test altijd ook op mobiel, want daar is de ervaring meestal het zwaarst en daar valt de meeste winst te halen.

Welke fix pak je eerst aan?

Begin bij de metric die op je belangrijkste pagina’s het verst van de drempel zit en de meeste bezoekers raakt. Niet bij wat technisch het leukst is om op te lossen.

Een eerlijke volgorde:

1. Kijk welke pagina’s verkeer en leads opleveren. Je homepage, je belangrijkste dienstenpagina’s en je sterkste landingspagina’s wegen zwaarder dan een diep weggestopte blogpost.
2. Pak daar de metric aan die in het rood staat. Staat je LCP op vier seconden, dan levert beeldcompressie meer op dan een laatste CLS-detail wegwerken.
3. Doe de goedkope wins mee. Vaste afmetingen voor beeld en een paar overbodige scripts schrappen kosten weinig en helpen direct.

Jaag geen perfecte scores na. Een pagina van 100 op 100 die niemand naar je formulier leidt, levert niets op. Het doel is dat bezoekers blijven, vlot doorklikken en converteren. Snelheid is daarin een hefboom, geen eindstreep. Wil je dieper begrijpen hoe dit past in een gezonde, vindbare site, dan vind je het brede kader in onze gids over een B2B-website laten maken.

De korte samenvatting

Core Web Vitals verbeter je per metric. Voor LCP draait het om lichtere afbeeldingen en snelle hosting, voor INP om minder en lichter JavaScript, en voor CLS om vaste afmetingen zodat niets verspringt. Werk vanuit echte bezoekersdata in Search Console, gebruik labtools voor diagnose, en begin bij de pagina’s en metrics die het meeste verkeer en de meeste leads raken. Zo wordt een snellere site geen doel op zich, maar een directe manier om meer bezoekers om te zetten.

Scoren je Core Web Vitals slecht en wil je weten waar de echte winst zit? Wij brengen in kaart wat je site vertraagt en lossen het op bij de wortel, met focus op leads en omzet in plaats van ijdele cijfers. Plan je gratis intake en je hoort waar je kansen liggen.