Core Web Vitals uitgelegd: LCP, INP, CLS – Een complete beginnersgids (2026)

Core Web Vitals zijn Google’s set van gebruikersgerichte statistieken die de echte pagina-ervaring meten. Ze zijn sinds 2021 rankingfactoren, en in 2026 zijn ze belangrijker dan ooit – ze halen kan uw zoekrankings en conversieratio’s direct verbeteren. Deze gids legt elke statistiek uit, hoe u ze meet en precies hoe u veelvoorkomende problemen oplost.

Waarom Core Web Vitals belangrijk zijn (De zakelijke case)

• Pagina’s die Core Web Vitals halen, worden 24% minder snel verlaten.
• Een verbetering van 0,5 s in LCP kan conversies met 12-15% verhogen (Google casestudy).
• Slechte Core Web Vitals zijn een doorslaggevende factor – als twee pagina’s vergelijkbare relevantie hebben, rangschikt de snellere, stabielere pagina hoger.

Als uw site een van de drie statistieken niet haalt, laat u geld en rankings op tafel liggen.

De drie Core Web Vitals – Gedetailleerde uitsplitsing

1. LCP (Largest Contentful Paint) – Laadsnelheid

Wat het meet: De tijd die het grootste zichtbare element (hero-afbeelding, koptekst, video) nodig heeft om te renderen. Goed: minder dan 2,5 seconden. Slecht: meer dan 4 seconden.

Waarom het belangrijk is: Gebruikers nemen snelheid waar op basis van wanneer de hoofdinhoud verschijnt. Een trage LCP voelt als een kapotte site.

Veelvoorkomende oorzaken van slechte LCP:

• Grote hero-afbeeldingen (>200KB).
• Trage serverreactietijd (TTFB >600ms).
• Render‑blokkerende CSS of JavaScript.
• Client-side rendering (React/Vue) die de weergave vertraagt.

2. INP (Interaction to Next Paint) – Responsiviteit

Wat het meet: De tijd tussen een gebruikersinteractie (klik, tik, toetsaanslag) en de volgende visuele update. Goed: minder dan 200 milliseconden. Verving FID in 2024.

Waarom het belangrijk is: Een trage INP geeft uw site een traag gevoel. Gebruikers klikken op een knop en er gebeurt niets – ze nemen aan dat hij kapot is.

Veelvoorkomende oorzaken van slechte INP:

• Lange JavaScript-taken die de hoofdthread blokkeren (>50ms).
• Zware gebeurtenishandlers bij elke interactie.
• Scripts van derden (analyse, chatwidgets) die tijdens interactie worden uitgevoerd.

3. CLS (Cumulative Layout Shift) – Visuele stabiliteit

Wat het meet: De hoeveelheid onverwachte lay-outverschuiving (beweging) van zichtbare elementen. Goed: minder dan 0,1. Slecht: meer dan 0,25.

Waarom het belangrijk is: Verschuivende inhoud zorgt ervoor dat gebruikers hun plek verliezen, per ongeluk op advertenties klikken of gefrustreerd raken. Het is een directe gebruikerservaringsfout.

Veelvoorkomende oorzaken van slechte CLS:

• Afbeeldingen of video’s zonder expliciete `width` en `height`.
• Laat ladende lettertypen die tekst verwisselen en verschuiven.
• Dynamisch geïnjecteerde inhoud (advertenties, banners) die bestaande inhoud naar beneden duwt.

Hoe u de Core Web Vitals van uw site meet

• Veldgegevens (echte gebruikers, bepalen ranking): Google Search Console → Core Web Vitals rapport. Ook CrUX (Chrome User Experience Report).
• Labgegevens (gesimuleerd, voor debugging): PageSpeed Insights, Lighthouse in DevTools, WebPageTest.

Concentreer u op veldgegevens voor rankingimpact, maar gebruik labgegevens om problemen te vinden en op te lossen.

Slechte LCP oplossen – Stap voor stap

1. Optimaliseer hero-afbeeldingen

Converteer naar WebP, comprimeer met tools zoals Squoosh of ImageOptim. Gebruik `srcset` om apparaatpassende afbeeldingen te leveren.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="Hero"&gt;</code>

2. Preload het LCP-element

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. Verbeter TTFB (Time to First Byte)

• Gebruik een VPS in plaats van gedeelde hosting.
• Schakel PHP‑FPM in met OPcache.
• Implementeer database-indexering en caching (Redis of Memcached).
• Overweeg een CDN (Cloudflare, Bunny.net) voor wereldwijde distributie.

4. Elimineer render‑blokkerende bronnen

Voeg kritieke CSS inline in, stel niet-kritieke CSS uit en voeg `defer` of `async` toe aan JavaScript-bestanden.

<code>&lt;style&gt; /* kritieke CSS */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

Slechte INP oplossen – Diepgaande analyse van responsiviteit

1. Splits lange JavaScript-taken op

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. Optimaliseer gebeurtenishandlers

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. Verwijder of stel scripts van derden uit

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

Slechte CLS oplossen – Elimineer lay-outverschuivingen

1. Voeg expliciete breedte/hoogte toe aan alle media

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. Reserveer ruimte voor lettertypen

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. Vermijd het invoegen van inhoud boven bestaande inhoud

Als u een banner of melding moet weergeven, reserveer dan ruimte met een tijdelijke div met vaste hoogte.

WordPress vs op maat gemaakte PHP voor Core Web Vitals

Op maat gemaakte PHP-sites scoren consequent hoger omdat er geen plugin-opgeblazenheid, geen thema-overhead en geen gedwongen JavaScript is. Een standaard WordPress-installatie faalt vaak voor CLS vanwege de beheerhub die inhoud verschuift voor ingelogde gebruikers (zelfs als bezoekers het niet zien). Met op maat gemaakte PHP heeft u de controle over elke byte. U kunt kritieke CSS inline invoegen, precies laden wat nodig is en lay-outverschuivingen volledig vermijden.

Echte klantcasus: Van falen naar slagen in 7 dagen

Een bedrijf voor thuisdiensten had een WordPress-site met slechte Core Web Vitals: LCP 4,2 s, INP 540 ms, CLS 0,29. We hebben de front-end gemigreerd naar een op maat gemaakte statische PHP-site (met behoud van hun bestaande backend voor boekingen).

Genomen acties:

• Hero-afbeelding geconverteerd naar WebP en gepreload.
• Kritieke CSS voor de hero-sectie en navigatie inline ingevoegd.
• Alle JavaScript verplaatst naar `defer` of geladen na gebruikersinteractie.
• Expliciete afmetingen ingesteld voor alle afbeeldingen en iframes.

Resultaten na 1 week (veldgegevens van GSC):

• LCP: 4,2 s → 1,1 s (geslaagd).
• INP: 540 ms → 98 ms (geslaagd).
• CLS: 0,29 → 0,02 (geslaagd).
• Organisch verkeer: +34% na 60 dagen (door rankingverbeteringen).

De klant betaalt nu geen doorlopende kosten voor plugins en bezit de slanke, snelle code.

Stappenplan om uw Core Web Vitals te verbeteren

1. Meet de huidige staat – Voer PageSpeed Insights uit. Noteer LCP, INP, CLS voor mobiel.
2. Los eenvoudige problemen op – Comprimeer afbeeldingen, schakel caching in, gebruik een CDN.
3. Als LCP > 2,5 s: Preload de hero-afbeelding, voeg kritieke CSS inline in, verbeter serverrespons.
4. Als INP > 200 ms: Splits lange JS-taken, stel scripts van derden uit, optimaliseer gebeurtenishandlers.
5. Als CLS > 0,1: Voeg afmetingen toe aan alle media, gebruik `font-display: swap`, vermijd het invoegen van dynamische inhoud boven de vouw.
6. Test opnieuw en monitor – Gebruik het Core Web Vitals rapport van Google Search Console om echte gebruikersgegevens in de loop van de tijd te volgen.

Als u op WordPress zit, overweeg dan over te stappen op een lichtgewicht thema (GeneratePress, Kadence), overbodige plug-ins te verwijderen en een plug-in zoals Perfmatters of FlyingPress te gebruiken. Maar de ultieme oplossing is een op maat gemaakte PHP-site die is gebouwd voor prestaties.

Klaar om Core Web Vitals te halen en rankings te verbeteren?

Ik bouw op maat gemaakte PHP-websites die 100 scoren op Lighthouse en uit de doos alle Core Web Vitals halen. U betaalt een eenmalig bedrag – geen abonnementen, geen verborgen kosten. Ik zal ook de Core Web Vitals van uw bestaande site verbeteren als u niet klaar bent om te migreren.

Laten we praten over uw site – ik bied een gratis Core Web Vitals audit aan.

Gegevens afkomstig van echte klantprojecten en gepubliceerde casestudy’s van Google. Individuele resultaten kunnen variëren.