Core Web Vitals: De complete gids voor een snellere website

Wil je weten hoe Google de prestaties van jouw website beoordeelt? Core Web Vitals zijn de meetwaarden die bepalen of je site snel, stabiel en gebruiksvriendelijk genoeg is. In deze gids leggen we uit wat Core Web Vitals zijn, hoe je ze meet en — belangrijker nog — hoe je ze verbetert voor betere rankings én tevreden bezoekers.

Wat zijn Core Web Vitals?

Core Web Vitals zijn een set van drie prestatiecijfers waarmee Google de gebruikerservaring van je website meet. Ze focussen op drie cruciale aspecten: hoe snel laadt je pagina, hoe snel reageert die op klikken, en hoe stabiel blijft de layout tijdens het laden.

Google introduceerde Core Web Vitals in 2020 als onderdeel van de Page Experience ranking factor. Sindsdien zijn ze een officieel onderdeel van het zoekalgoritme. Een website met slechte scores kan lager ranken dan concurrenten met vergelijkbare content maar betere prestaties.

De drie Core Web Vitals in 2026:

Metric	Meet	Target
LCP (Largest Contentful Paint)	Laadsnelheid	< 2,5 seconden
INP (Interaction to Next Paint)	Reactiesnelheid	< 200 milliseconden
CLS (Cumulative Layout Shift)	Visuele stabiliteit	< 0,1

Let op: In maart 2024 verving INP de oude FID (First Input Delay) metric. INP is strenger omdat het álle interacties meet, niet alleen de eerste.

Waarom zijn Core Web Vitals belangrijk voor SEO?

Google heeft bevestigd dat Core Web Vitals een rankingfactor zijn. De impact is genuanceerd: content relevantie blijft belangrijker, maar bij vergelijkbare content kunnen goede Core Web Vitals het verschil maken.

John Mueller van Google formuleerde het zo: relevantie is nog steeds verreweg het belangrijkste. Een snellere website wint niet automatisch van een relevantere concurrent. Maar bij twee gelijkwaardige pagina’s kan technische performance de doorslag geven.

De praktijk bewijst de waarde:

Case studies tonen concrete resultaten. Vodafone Italia verbeterde hun LCP met 31% en zag een omzetstijging van 8%. Yahoo Japan loste CLS-problemen op en behaalde 15% meer pageviews per sessie. CoinStats verhoogde het aantal URL’s met goede Core Web Vitals scores met 300% — en zag hun zoekverkeer met hetzelfde percentage stijgen.

Naast SEO-voordelen verbeteren goede Core Web Vitals ook conversies. Onderzoek toont aan dat elke 100ms verbetering in laadtijd de conversieratio met 1% kan verhogen. Pagina’s die binnen 1 seconde laden hebben een drie keer lagere bounce rate dan tragere pagina’s.

LCP: Largest Contentful Paint optimaliseren

LCP meet hoe lang het duurt voordat het grootste zichtbare element op je pagina volledig is geladen. Dit is meestal een hero-afbeelding, video of groot tekstblok. Google beschouwt een LCP onder 2,5 seconden als goed.

Wat beïnvloedt LCP?

De LCP-tijd bestaat uit vier onderdelen:

1. Time to First Byte (TTFB): De tijd tot je server begint te antwoorden
2. Resource Load Delay: Hoe snel de browser het LCP-element ontdekt
3. Resource Load Duration: De downloadtijd van het element
4. Element Render Delay: De tijd tot het element daadwerkelijk verschijnt

Praktische tips om LCP te verbeteren

Optimaliseer je afbeeldingen

Afbeeldingen zijn vaak het grootste element op een pagina. Gebruik moderne formaten zoals WebP of AVIF — een JPEG van 500KB kan als WebP slechts 300KB zijn met vergelijkbare kwaliteit. Zorg dat afbeeldingen niet groter zijn dan nodig: serveer responsive images met het srcset attribuut.

html

<img 
  src="hero-800.webp" 
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Beschrijving van de afbeelding"
  width="1200" 
  height="600"
>

Lazy load NIET je LCP-element

Dit is een veelgemaakte fout. Lazy loading is uitstekend voor afbeeldingen onder de fold, maar je LCP-element moet direct laden. Als je hero-afbeelding lazy loaded wordt, wacht de browser onnodig lang.

Voeg fetchpriority="high" toe aan je belangrijkste afbeelding:

html

<img src="hero.webp" fetchpriority="high" alt="Hero afbeelding">

Verbeter je serverrespons

Een trage server betekent een trage LCP. Implementeer caching, gebruik een CDN (Content Delivery Network) en overweeg betere hosting. Je TTFB zou onder 200ms moeten zijn.

Elimineer render-blocking resources

JavaScript en CSS die de rendering blokkeren vertragen je LCP. Defer niet-kritieke scripts en inline kritieke CSS. Gebruik async of defer attributen voor JavaScript:

html

<script src="analytics.js" defer></script>

INP: Interaction to Next Paint verbeteren

INP (Interaction to Next Paint) meet hoe snel je pagina reageert op gebruikersinteracties zoals klikken, tikken en typen. Het is de opvolger van FID en aanzienlijk strenger: waar FID alleen de eerste interactie mat, meet INP alle interacties gedurende het hele bezoek.

Een goede INP-score is onder 200 milliseconden. Dit betekent dat gebruikers binnen 200ms visuele feedback moeten krijgen na elke klik of tik.

Waarom INP lastiger is dan FID

FID mat alleen de vertraging bij de eerste interactie, wat relatief makkelijk te optimaliseren was. INP kijkt naar álle interacties en rapporteert de slechtste (exclusief outliers). Dit betekent dat één trage button ergens op je pagina je hele INP-score kan verpesten.

De drie fases van een interactie

INP bestaat uit drie meetbare onderdelen:

1. Input Delay: Wachttijd voordat event handlers starten (vaak door lopende JavaScript)
2. Processing Time: De tijd die event handlers nodig hebben
3. Presentation Delay: De tijd tot de browser het resultaat toont

Praktische tips om INP te verbeteren

Minimaliseer JavaScript op de main thread

De browser kan maar één taak tegelijk uitvoeren op de main thread. Zware JavaScript blokkeert gebruikersinteracties. Breek lange taken op in kleinere chunks:

javascript

// Slecht: één lange taak
function processAllItems(items) {
  items.forEach(item => heavyProcessing(item));
}

// Beter: chunks verwerken met yielding
async function processAllItems(items) {
  for (const item of items) {
    heavyProcessing(item);
    await new Promise(resolve => setTimeout(resolve, 0)); // Yield to main thread
  }
}

Gebruik requestAnimationFrame voor visuele updates

Als je een interactie afhandelt, geef eerst visuele feedback en doe daarna het zware werk:

javascript

button.addEventListener('click', () => {
  // Eerst: toon spinner (snel)
  showSpinner();
  
  // Dan: zware operatie uitstellen
  requestAnimationFrame(() => {
    setTimeout(() => {
      doHeavyWork();
      hideSpinner();
    }, 0);
  });
});

Verminder third-party scripts

Elke externe script — analytics, chatwidgets, advertenties — voegt JavaScript toe aan de main thread. Audit je third-party scripts en verwijder wat je niet gebruikt. Laad niet-essentiële scripts async of defer.

Overweeg web workers voor zware taken

Web workers draaien op een aparte thread en blokkeren de main thread niet:

javascript

// main.js
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

// heavy-task.js
onmessage = (e) => {
  const result = heavyCalculation(e.data);
  postMessage(result);
};

CLS: Cumulative Layout Shift voorkomen

CLS meet hoe stabiel je pagina visueel blijft tijdens het laden. Een score onder 0,1 is goed. Hoge CLS-scores ontstaan wanneer elementen onverwacht verschuiven — frustrerend voor gebruikers die per ongeluk op de verkeerde knop klikken of hun leespositie kwijtraken.

Veelvoorkomende oorzaken van layout shifts

Afbeeldingen en video’s zonder afmetingen

Als je geen width en height attributen opgeeft, weet de browser niet hoeveel ruimte te reserveren. Zodra de afbeelding laadt, verschuift alle content eronder.

html

<!-- Fout: geen afmetingen -->
<img src="foto.jpg" alt="Foto">

<!-- Goed: afmetingen opgegeven -->
<img src="foto.jpg" alt="Foto" width="800" height="600">

Webfonts die layout veroorzaken

Custom fonts kunnen anders groot zijn dan fallback fonts. Gebruik font-display: swap of font-display: optional en preload je belangrijkste fonts:

html

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

css

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Advertenties en embeds zonder gereserveerde ruimte

Ads zijn berucht voor CLS-problemen. Reserveer altijd ruimte met een container:

css

.ad-container {
  min-height: 250px; /* Reserveer ruimte voor de advertentie */
}

Dynamisch geïnjecteerde content

Content die later verschijnt en bestaande content naar beneden duwt veroorzaakt shifts. Gebruik skeleton loaders om ruimte te reserveren:

html

<div class="content-placeholder" style="height: 200px; background: #f0f0f0;">
  <!-- Content wordt hier geladen -->
</div>

Praktische tips om CLS te verminderen

1. Geef altijd afmetingen op voor afbeeldingen, video’s, iframes en ads
2. Preload webfonts en gebruik font-display: swap
3. Reserveer ruimte voor dynamische content met placeholders
4. Voeg nooit content toe boven bestaande content — alleen eronder
5. Gebruik CSS transform voor animaties in plaats van properties die layout triggeren

Core Web Vitals meten: de beste tools

Google PageSpeed Insights

De meest complete gratis tool. PageSpeed Insights combineert field data (echte gebruikersdata uit Chrome) met lab data (gesimuleerde tests). Field data is wat Google daadwerkelijk gebruikt voor rankings.

Tip: Let op het verschil tussen field en lab data. Je lab score kan groen zijn terwijl field data problemen toont — dat betekent dat echte gebruikers slechte ervaringen hebben.

Google Search Console

Het Core Web Vitals rapport in Search Console toont welke URL’s problemen hebben, gegroepeerd per type issue. Ideaal om site-brede problemen te identificeren en te prioriteren.

CoreDash (Real User Monitoring)

Het nadeel van CrUX-data in Search Console is de 28-dagen vertraging. Wanneer je een optimalisatie doorvoert, duurt het een maand voordat je het effect ziet. CoreDash lost dit op met real-time RUM (Real User Monitoring).

Met CoreDash zie je binnen minuten hoe echte bezoekers je site ervaren. Je kunt filteren op device, browser, pagina en zelfs A/B test varianten. Alerts waarschuwen je direct wanneer prestaties verslechteren — voordat het impact heeft op je rankings.

Voor WordPress-sites is er een dedicated plugin die installatie tot een paar klikken reduceert. Wij gebruiken CoreDash bij OnlineLabs om continu de Core Web Vitals van onze klanten te monitoren.

Chrome DevTools

Voor diepgaande debugging. Open DevTools (F12), ga naar het Performance tab, en neem een recording op. Je kunt precies zien welke elementen layout shifts veroorzaken en welke scripts de main thread blokkeren.

Lighthouse

Ingebouwd in Chrome en beschikbaar via PageSpeed Insights. Lighthouse geeft concrete aanbevelingen voor verbetering. Let op: Lighthouse meet alleen lab data, niet de echte gebruikerservaring.

Web Vitals Chrome Extension

Handige browser extensie die real-time LCP, INP en CLS toont terwijl je door je site navigeert.

Core Web Vitals en WordPress

WordPress-sites hebben vaak uitdagingen met Core Web Vitals door zware themes en plugins. De combinatie van page builders, ongeoptimaliseerde afbeeldingen en te veel plugins zorgt regelmatig voor rode scores in PageSpeed Insights.

Bij OnlineLabs pakken we WordPress snelheid bij de bron aan — niet met pleisters zoals caching plugins, maar met échte verbeteringen aan code en structuur. Bekijk onze website snelheid optimalisatie voor meer informatie over onze aanpak.

Hier zijn specifieke oplossingen:

Aanbevolen plugins:

• WP Rocket: All-in-one caching en optimalisatie
• Imagify/ShortPixel: Automatische afbeeldingsoptimalisatie en WebP-conversie
• Asset CleanUp: Verwijder ongebruikte CSS en JS per pagina
• Perfmatters: Granulaire controle over scripts en features

Belangrijke instellingen:

1. Schakel page caching in
2. Activeer GZIP/Brotli compressie
3. Lazy load afbeeldingen (maar niet above-the-fold!)
4. Defer non-critical JavaScript
5. Preload LCP-afbeelding

LCP-afbeelding uitsluiten van lazy loading:

In WP Rocket kun je specifieke afbeeldingen uitsluiten van lazy loading. Dit is essentieel voor je hero-afbeelding. De plugin heeft een “Critical Image” feature die dit automatisch detecteert.

Conclusie

Core Web Vitals zijn in 2026 een essentieel onderdeel van technische SEO. De drie metrics — LCP, INP en CLS — meten respectievelijk laadsnelheid, interactiviteit en visuele stabiliteit. Goede scores zijn LCP onder 2,5 seconden, INP onder 200 milliseconden, en CLS onder 0,1.

De belangrijkste optimalisaties:

• Voor LCP: Optimaliseer afbeeldingen, gebruik WebP, preload hero images, verbeter serverrespons
• Voor INP: Minimaliseer JavaScript, breek lange taken op, reduceer third-party scripts
• Voor CLS: Geef altijd afmetingen op, reserveer ruimte voor dynamische content, preload fonts

Begin met meten via PageSpeed Insights en Google Search Console. Prioriteer de grootste problemen en werk stap voor stap naar groene scores. De investering betaalt zich terug in betere rankings, hogere conversies en tevreden bezoekers.

Wil je hulp bij het optimaliseren van je Core Web Vitals? Bekijk onze diensten als SEO specialist of neem contact op voor een vrijblijvend adviesgesprek.