Core Web Vitals: paginasnelheid en SEO

Core Web Vitals zijn de drie kernstatistieken waarmee Google de werkelijke gebruikerservaring van een pagina meet: laadsnelheid (LCP), reactievermogen bij interactie (INP) en visuele stabiliteit (CLS). Deze statistieken bepalen zowel hoe een pagina aanvoelt voor de gebruiker als — een kleine maar echte factor — je positie in de zoekresultaten. In deze gids leg ik uit wat elke metric betekent, welke drempelwaarden je moet nastreven en hoe je ze in de praktijk verbetert.

Wat zijn Core Web Vitals en waarom zijn ze belangrijk?

Om de pagina-ervaring te beoordelen gebruikt Google echte veldgegevens die bij Chrome-gebruikers worden verzameld (CrUX — het Chrome User Experience Report). Je scores worden dus niet in een laboratorium gemeten, maar op de apparaten en verbindingen van je echte bezoekers. De drie statistieken zijn:

• LCP (Largest Contentful Paint) — de tijd die nodig is om het grootste zichtbare contentelement (meestal een afbeelding of kop) weer te geven. Het staat voor laadsnelheid.
• INP (Interaction to Next Paint) — de vertraging voordat de pagina visueel reageert op een klik, tik of toetsaanslag. In maart 2024 verving het de oudere FID-metric en is nu de officiële maatstaf voor reactievermogen.
• CLS (Cumulative Layout Shift) — hoeveel elementen onverwacht verschuiven tijdens het laden; het meet de visuele stabiliteit.

Voor SEO zijn deze statistieken een rankingfactor, maar ze wegen minder zwaar dan de kwaliteit van de content. Toch wint tussen twee even goede pagina's de snelste, en een slechte ervaring schaadt nu al je conversies en bouncepercentage, wat indirect je ranking beïnvloedt.

Streefwaarden

Google definieert per metric de drempels "goed", "moet beter" en "slecht". De meting is gebaseerd op de waarde die 75% van de bezoekers ziet (het 75e percentiel):

• LCP: goed ≤ 2,5 s — slecht > 4 s
• INP: goed ≤ 200 ms — slecht > 500 ms
• CLS: goed ≤ 0,1 — slecht > 0,25

Je doel is om bij alle drie in de "goede" zone te blijven. Mobiel en desktop worden apart beoordeeld; mobiel is meestal lastiger, dus geef daar prioriteit aan.

Hoe verbeter je LCP?

LCP komt meestal voort uit een trage serverreactie of een grote, te laat geladen afbeelding. Stappen om het te verbeteren:

• Laad de belangrijkste afbeelding vroeg. Is het LCP-element een hero-afbeelding, gebruik dan geen lazy-load en haal het naar voren met fetchpriority="high".
• Gebruik moderne afbeeldingsformaten (WebP/AVIF) en lever ze in het juiste formaat; te grote afbeeldingen blazen de LCP op.
• Preconnect kritieke bronnen.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<img src="hero.avif" fetchpriority="high" width="1200" height="630" alt="...">

Om de serverreactietijd (TTFB) te verlagen levert caching (bijvoorbeeld php artisan optimize in Laravel, paginacache, een CDN) meestal de grootste winst op.

Hoe verbeter je INP?

INP hangt direct samen met hoe druk de main thread is. Als JavaScript nog zwaar werk uitvoert op het moment dat de gebruiker klikt, stelt de browser de reactie uit. Oplossingen:

• Verminder de hoeveelheid JavaScript en verwijder ongebruikte code; scripts van derden (chatwidgets, analytics, advertenties) zijn de oorzaak van de meeste INP-problemen.
• Splits lange taken op. Verdeel zware berekeningen in kleinere stukken of stel ze uit met requestIdleCallback / setTimeout.
• Geef visuele feedback voorrang. Werk na een klik eerst de UI bij en bewaar het zware werk voor later.

button.addEventListener('click', () => {
  showSpinner();              // directe visuele feedback
  requestAnimationFrame(() => {
    doExpensiveWork();        // zwaar werk in de volgende frame
  });
});

Hoe verbeter je CLS?

CLS ontstaat wanneer een element tijdens het laden van positie verandert en andere content wegduwt — bijvoorbeeld een laat geladen advertentie die de tekst naar beneden schuift. De meest effectieve maatregelen:

• Stel altijd width en height in op afbeeldingen en video's (of de CSS aspect-ratio) zodat de browser de ruimte vooraf reserveert.
• Gebruik placeholders voor dynamische content; reserveer vaste ruimte voor advertenties en embeds.
• Laad webfonts met font-display: swap en preload ze waar mogelijk om tekstverspringing te beperken.

Meettools

Je werkt met twee soorten gegevens: lab (gecontroleerde tests) en veld (echte gebruikers). Je hebt beide nodig:

• PageSpeed Insights — toont zowel de CrUX-veldgegevens als de Lighthouse-labscore samen; het meest praktische startpunt.
• Search Console > Core Web Vitals-rapport — rangschikt URL-groepen over je hele site als "goed / moet beter / slecht".
• Chrome DevTools (Lighthouse + Performance-paneel) — om één pagina diepgaand te analyseren.
• De web-vitals-bibliotheek — om statistieken van echte bezoekers te verzamelen en naar je analytics te sturen.

Belangrijke opmerking: statistieken als INP en CLS stapelen zich op tijdens interacties en scrollen, dus een labtest weerspiegelt niet altijd de werkelijke ervaring. Baseer je beslissingen op veldgegevens.

Veelgestelde vragen

Wordt FID nog gebruikt?

Nee. FID (First Input Delay) werd in maart 2024 officieel uitgefaseerd en vervangen door INP. Omdat INP de reactie van elke interactie op de pagina meet en niet alleen de eerste, is het een completere metric.

Verhogen Core Web Vitals direct mijn ranking?

Verwacht op zichzelf geen grote sprong. Deze statistieken zijn een rankingsignaal, maar relevantie en kwaliteit van content wegen veel zwaarder. De beste aanpak is goede content combineren met een snelle pagina.

Waarom schommelen mijn PageSpeed-scores?

De Lighthouse-labtest kan per keer variëren afhankelijk van netwerk- en apparaatomstandigheden. Vertrouw bij beslissingen op de 28-daagse CrUX-veldgegevens in plaats van op één test.

Is je pagina traag of staat je Core Web Vitals-rapport op rood? Ik kan je site auditen en een concreet verbeterplan opstellen om LCP, INP en CLS binnen de streefwaarden te brengen. Neem contact op.