Core Web Vitals bepalen je Google-ranking en conversies. Leer LCP, INP en CLS meten en verbeteren met dit praktische stappenplan.
Foto: CHUTTERSNAP / Unsplash
Elke seconde telt. Letterlijk. Een website die 1 seconde langzamer laadt, verliest gemiddeld 7% van zijn conversies. Bij een webshop met 100.000 euro maandomzet is dat 7.000 euro per maand - 84.000 euro per jaar - die je laat liggen omdat je website te traag is. Google weet dit ook en heeft daarom Core Web Vitals geintroduceerd als officiele rankingfactoren.
Maar wat zijn Core Web Vitals precies? Hoe meet je ze? En belangrijker: hoe verbeter je ze zonder een compleet nieuw platform te bouwen? In onze complete gids over websites laten maken behandelen we technische kwaliteit als fundament.
Core Web Vitals zijn drie meetwaarden die Google gebruikt om de gebruikservaring van je website te beoordelen. Ze meten hoe snel je pagina laadt, hoe snel die reageert op klikken, en hoe stabiel de layout is tijdens het laden. Samen bepalen ze of bezoekers een prettige ervaring hebben of gefrustreerd afhaken. Volgens Google web.dev gebruikt Google de drempelwaarden op het 75e percentiel van echte bezoekersdata — dat betekent dat 75% van je bezoekers een goede ervaring moet hebben voordat Google je pagina als "goed" bestempelt. Google Search Central bevestigt dat deze metrics onderdeel zijn van de Page Experience ranking signals.
Wat het meet: Hoe lang het duurt voordat het grootste zichtbare element op de pagina is geladen. Dit is meestal een hero-afbeelding, een groot tekstblok of een video-thumbnail.
De drempelwaarden: Goed onder 2,5s, moet verbeterd worden 2,5-4s, slecht boven 4s.
Waarom het ertoe doet: LCP is het moment waarop de bezoeker denkt dat de pagina geladen is. Als dat te lang duurt, drukt de bezoeker op de terugknop. Onderzoek van Google toont aan dat 53% van mobiele bezoekers een pagina verlaat als deze langer dan 3 seconden laadt. Veelvoorkomende oorzaken: trage TTFB (>600ms), ongeoptimaliseerde hero-afbeeldingen, render-blocking CSS/JS, en client-side rendering zonder SSR.
Wat het meet: Hoe snel je website reageert op gebruikersinteracties zoals klikken, tikken en typen. Zoals Google web.dev over INP documenteert, vervangt INP sinds 12 maart 2024 officieel de oude FID-metric als Core Web Vital en is veel strenger: het meet alle interacties gedurende het hele bezoek en neemt typisch de slechtste als representatieve waarde. Een enkele hapering kan je score verknallen.
De drempelwaarden: Goed onder 200ms, moet verbeterd worden 200-500ms, slecht boven 500ms.
Waarom het ertoe doet: Een trage reactie op klikken voelt als een vastgelopen website. INP is berucht: websites die voorheen groene FID-scores hadden, scoren ineens rood omdat de lat hoger ligt. De oorzaak is bijna altijd zware JavaScript die de main thread blokkeert - denk aan chat widgets, analytics, React hydration en onnodige re-renders.
Wat het meet: Hoeveel de pagina-indeling verschuift tijdens het laden. Je wilt op een knop klikken en ineens springt alles naar beneden omdat er een advertentie of afbeelding laadt - dat is layout shift. CLS wordt berekend als impact fraction x distance fraction.
De drempelwaarden: Goed onder 0,1, moet verbeterd worden 0,1-0,25, slecht boven 0,25.
Waarom het ertoe doet: Layout shifts leiden tot miskliks en frustratie. Veelvoorkomende oorzaken: afbeeldingen zonder width/height, webfonts die laden na de initiele render (FOUT), advertenties en embeds, en dynamisch ingevoegde cookiemeldingen of banners bovenaan de pagina.
Voordat je kunt verbeteren, moet je weten waar je staat. Het belangrijkste: er is verschil tussen field data (echte bezoekersgegevens) en lab data (gesimuleerde tests). Google gebruikt alleen field data voor rankings.
PageSpeed Insights (pagespeed.web.dev) is de aanbevolen starttool. Je krijgt field data uit het Chrome User Experience Report (CrUX) en gesimuleerde lab data via Lighthouse. Let op: CrUX vereist een minimum aantal bezoekers (typisch enkele duizenden per 28 dagen) voordat field data beschikbaar komt. Kleinere websites krijgen geen field data en moeten Real User Monitoring (RUM) inzetten via tools als SpeedCurve, Sentry Performance of de gratis web-vitals JavaScript library van Google.
Chrome DevTools biedt het Performance-tabblad en Lighthouse voor lokale tests. Zet throttling op "Slow 4G" en "4x CPU slowdown" voor een realistische mobiele ervaring. De Performance Insights panel geeft specifieke tips inclusief "LCP request discovery" en "INP interactions".
Google Search Console toont onder Core Web Vitals een overzicht van alle paginas, gecategoriseerd als goed, moet verbeterd worden of slecht. Search Console groepeert vergelijkbare URLs automatisch - onmisbaar voor websites met honderden productpaginas. Voor historische trends gebruik je het CrUX Dashboard in Looker Studio.
Test altijd meerdere paginatypen, niet alleen je homepage. Google beoordeelt elke pagina afzonderlijk.
LCP is voor de meeste websites de moeilijkste metric, maar ook de metric met de grootste impact.
1. Verbeter server response time (TTFB). TTFB is het fundament. Als je server er langer dan 600ms over doet, wordt een goede LCP onmogelijk. Upgrade shared hosting naar VPS of managed hosting met NVMe-opslag. Activeer server-side caching (WP Rocket, LiteSpeed Cache). Gebruik HTTP/3 en Brotli-compressie (15-25% beter dan Gzip). Edge functions op Vercel, Cloudflare Workers of Netlify Edge verlagen TTFB drastisch door code dichtbij de gebruiker te draaien.
2. Optimaliseer afbeeldingen. Afbeeldingen zijn verantwoordelijk voor 70% van de LCP-problemen. Gebruik moderne formaten: WebP is 25-35% kleiner dan JPEG, AVIF is 40-50% kleiner. Stel de juiste afmetingen in met srcset en sizes. Lazy load alles behalve de hero (loading="lazy") - maar nooit je LCP-afbeelding, dat verslechtert de score. Preload je hero met <link rel="preload" as="image" fetchpriority="high">. Image CDNs zoals Cloudinary, Imgix en Vercel Image Optimization leveren automatisch het beste formaat per device.
3. Minimaliseer render-blocking resources. Inline critical CSS in een <style> tag (tools: Critical, Critters). Laad de rest asynchroon. Voeg defer of async toe aan non-essentiele scripts. Verwijder ongebruikte CSS met PurgeCSS - Tailwind CSS 4 doet dit automatisch.
4. Gebruik een CDN. Cloudflare, Vercel Edge, Bunny.net en AWS CloudFront serveren bestanden dichtbij de bezoeker. Verschil kan oplopen tot 1-2 seconden voor bezoekers buiten je serverregio.
5. Server-side rendering. Client-side rendering is funest voor LCP. Schakel over naar SSR of SSG. React Server Components en streaming SSR sturen de eerste bytes al naar de browser terwijl de rest wordt gegenereerd.
Praktijkvoorbeeld: Een WordPress-site met LCP van 4,2s haalden we naar 1,8s door hero-afbeelding naar AVIF te converteren (-1,1s), preload met fetchpriority="high" (-0,4s), WP Rocket caching (-0,5s), managed VPS (-0,3s) en Cloudflare CDN (-0,2s).
INP is de nieuwste Core Web Vital en veel websites scoren er slecht op. De oorzaak is bijna altijd te veel of te zwaar JavaScript.
1. Verminder JavaScript. Pas code splitting toe - Next.js en Remix doen dit automatisch via route-based splitting. Gebruik tree shaking om ongebruikte code te verwijderen. Controleer bundles met @next/bundle-analyzer op onverwachte boosdoeners: moment.js (70kb), lodash, iconenbibliotheken die alles inladen. Audit third-party scripts: Intercom en Drift kunnen tot 600kb toevoegen. Partytown verplaatst analytics naar een Web Worker zodat ze de main thread niet blokkeren.
2. Optimaliseer event handlers. Debounce scroll- en resize-events (100-200ms). Gebruik requestAnimationFrame voor visuele updates. Verplaats zware berekeningen naar Web Workers. In React: gebruik startTransition voor niet-urgente updates en React.memo om onnodige re-renders te voorkomen.
3. Vermijd lange taken. De browser kan niet reageren zolang een taak >50ms draait op de main thread. Breek lange taken op met setTimeout of requestIdleCallback. Gebruik scheduler.yield() om tussentijds controle terug te geven aan de browser.
Praktijkvoorbeeld: Een SaaS-dashboard bracht INP van 380ms naar 120ms door React.memo op lijst-items (-80ms), useCallback op event handlers (-40ms), vervanging van Recharts door Visx (-90ms), en Intercom op requestIdleCallback (-50ms).
CLS is vaak de makkelijkste metric om te verbeteren. Een paar kleine wijzigingen kunnen je score van rood naar groen brengen.
1. Geef afmetingen op voor media. Voeg altijd width en height attributen toe aan <img> en <video> tags. De browser reserveert dan ruimte voordat het bestand geladen is. Voor CSS-gebaseerde layouts kun je aspect-ratio: 4 / 3 gebruiken.
2. Reserveer ruimte voor dynamische content. Advertenties, embeds en lazy-loaded content moeten een vaste ruimte krijgen via aspect-ratio of min-height. Voor Google Ads: gebruik fixed-size slots. Voor YouTube-embeds: wrap ze in een container met vaste aspect ratio.
3. Optimaliseer font loading. Webfonts veroorzaken vaak FOUT (Flash of Unstyled Text): de tekst laadt en verandert ineens van grootte. Zonder maatregelen kan dit alleen al 0,15+ CLS opleveren. Gebruik font-display: swap, preload het belangrijkste lettertype met <link rel="preload" as="font" type="font/woff2" crossorigin>, subset je fonts tot alleen benodigde karakters (bespaart tot 80%), en gebruik size-adjust in @font-face om de fallback exact te matchen. Next.js' next/font doet dit automatisch.
4. Voorkom dynamische content boven de vouw. Banners, cookiemeldingen en notificaties duwen content naar beneden. Gebruik overlays met position: fixed of sticky bottom sheets. Skeleton loaders zijn prima, mits ze exact dezelfde afmetingen hebben als de uiteindelijke content.
WordPress: Begin met een caching plugin (WP Rocket, LiteSpeed Cache). Gebruik ShortPixel of Imagify voor automatische WebP-conversie. Kies een performance-thema (GeneratePress, Astra, Kadence) in plaats van zware pagebuilders. Minimaliseer plugins - doe elk kwartaal een audit. Overweeg managed hosting (Kinsta, WP Engine, Cloudways) boven shared hosting.
Next.js: Gebruik next/image voor automatische optimalisatie en next/font voor font-optimalisatie met size-adjust. Activeer Partial Prerendering (PPR) in Next.js 15+ voor hybride statische/dynamische rendering. Stream componenten met Suspense. Monitor met useReportWebVitals. Zie de officiële Next.js performance-gids voor de complete checklist aan ingebouwde optimalisaties (image, font, script, bundling, lazy loading).
Shopify: Kies een snel Online Store 2.0 thema (Dawn, Sense, Craft). Audit je apps - elke app voegt scripts toe. Gebruik Shopify's image CDN met img_url filters. Minimaliseer tracking pixels - Facebook Pixel, TikTok Pixel en Hotjar kunnen tezamen 300+ kb toevoegen.
| Aspect | Minimum | Aanbevolen |
|---|---|---|
| TTFB | < 800ms | < 200ms |
| Hosting | VPS | Managed/Edge |
| HTTP-versie | HTTP/2 | HTTP/3 |
| Compressie | Gzip | Brotli |
| CDN | Optioneel | Ja, met edge caching |
| Opslag | SSD | NVMe |
Waarom doen we dit allemaal? Omdat Core Web Vitals direct impact hebben op zowel je organische rankings als je conversieratio.
SEO impact: Google gebruikt Core Web Vitals als onderdeel van de Page Experience ranking signals sinds 2021 — Google Search Central documenteert deze rol expliciet. Bij vergelijkbare content kan een snellere pagina boven een tragere uitkomen in de zoekresultaten. Voor competitieve keywords is dit vaak het verschil tussen positie 5 en positie 12. Bovendien heeft Google aangekondigd dat Core Web Vitals zwaarder meewegen voor mobiele zoekresultaten.
Conversie impact: De cijfers liegen niet. Uit onderzoek van Deloitte en Google blijkt dat elke 0,1 seconde verbetering in laadtijd leidt tot:
Crawl budget: Voor grote websites (10.000+ paginas) heeft snelheid ook impact op het crawl budget. Google crawlt snellere sites vaker en uitgebreider, wat betekent dat nieuwe content sneller wordt geindexeerd.
Alleen de homepage testen. Google beoordeelt elke pagina individueel. Test minimaal je top-10 paginas op basis van verkeer in Search Console.
Te veel plugins en widgets. Elke WordPress-plugin, social media widget en analytics-tag voegt JavaScript toe. Sites met 15-20 scripts hebben bijna altijd INP-scores van 600ms+. Audit meedogenloos: als je een tool 3 maanden niet hebt gebruikt, verwijder hem.
Afbeeldingen zonder optimalisatie uploaden. De meeste CMS-systemen optimaliseren niet automatisch. Een 4MB camerafoto blijft 4MB op je website. Gebruik een plugin die bij upload converteert naar WebP en verkleint.
Mobielbeleving vergeten. Google gebruikt mobile-first indexing - de mobiele versie is bepalend voor je ranking. Test altijd eerst op mobiel.
Een typisch MKB-verbetertraject: LCP van 4,2s naar 1,8s, INP van 380ms naar 120ms, CLS van 0,18 naar 0,04. Impact: 34% lager bouncepercentage, 22% meer paginaweergaven per sessie, en meetbare stijging in organisch verkeer binnen 4-8 weken.
Week 1: Meten en analyseren. Test alle belangrijke paginas, maak prioriteitenlijst op basis van Search Console data. Week 2: Quick wins implementeren. Afbeeldingen optimaliseren, font loading strategie, onnodige scripts verwijderen. Week 3: Technische optimalisaties. Code splitting, server-side caching, CDN configureren. Week 4: Finetuning en monitoring. Hertest alle paginas, stel continue monitoring in via Search Console of SpeedCurve.
Core Web Vitals verbeteren is geen luxe - het is een noodzaak voor elke website die serieus gevonden wil worden. LCP, INP en CLS meten samen de complete gebruikservaring en zijn directe rankingfactoren. Het goede nieuws: de meeste verbeteringen zijn technisch niet ingewikkeld. Met de juiste aanpak zie je binnen 4-8 weken meetbare resultaten.
Begin vandaag met een meting in PageSpeed Insights. Pak de quick wins als eerste aan. Maak van prestatieoptimalisatie een vast onderdeel van je website-onderhoud - bespreek met je ontwikkelaar of webbureau hoe monitoring onderdeel wordt van het ontwikkelproces. Goede ontwikkelaars testen Core Web Vitals bij elke deploy en vangen regressies vroegtijdig op. Je bezoekers en Google zullen je ervoor belonen.
Opgesteld met AI-tools en gecontroleerd door het redactieteam van CleverTech — tech-leads met ervaring in AI, procesautomatisering en IT-consulting.
Het redactieteam van CleverTech combineert expertise in AI, procesautomatisering en digitale transformatie. Alle content wordt opgesteld met behulp van AI-tools en zorgvuldig gecontroleerd op juistheid, actualiteit en praktische toepasbaarheid door tech-leads met ervaring in AI, procesautomatisering en IT-consulting.
