Core Web Vitals zijn de meetlat waarmee Google de gebruikservaring van je website beoordeelt. Sinds 2021 zijn LCP (laadsnelheid), INP (reactiesnelheid) en CLS (visuele stabiliteit) directe rankingfactoren die bepalen of jouw website boven of onder de concurrentie verschijnt in zoekresultaten. Voor MKB-bedrijven betekent dit concreet: een trage website kost je klanten en omzet. Elke seconde vertraging leidt tot 7% minder conversies. In deze praktische gids leggen we de drie Core Web Vitals uit in begrijpelijk Nederlands, laten we zien hoe je ze meet met gratis tools als PageSpeed Insights, Chrome DevTools en Google Search Console, en geven we per metric concrete optimalisatietechnieken die je direct kunt toepassen. Van afbeeldingsoptimalisatie en code splitting tot lazy loading, CDN-configuratie en font-strategie - alles wat je nodig hebt om je website sneller, gebruiksvriendelijker en beter vindbaar te maken. Met een concreet 4-weken stappenplan, before-and-after voorbeelden en de vijf veelgemaakte fouten die je moet vermijden.
Foto: Luke Chesser / 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. In dit artikel zoomen we in op de drie metrics die Google gebruikt om jouw website te beoordelen.
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.
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:
Waarom het ertoe doet: LCP is het moment waarop de bezoeker denkt: "Oké, de pagina is geladen." 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.
Wat het meet: Hoe snel je website reageert op gebruikersinteracties zoals klikken, tikken en typen. INP vervangt sinds maart 2024 de oude FID-metric (First Input Delay) en is strenger: het meet niet alleen de eerste interactie, maar alle interacties gedurende het hele bezoek.
De drempelwaarden:
Waarom het ertoe doet: Een trage reactie op klikken voelt als een vastgelopen website. Bezoekers verliezen vertrouwen als knoppen niet direct reageren, formulieren haperen of menu's traag openen.
Wat het meet: Hoeveel de pagina-indeling verschuift tijdens het laden. Ken je dat? Je wilt op een knop klikken en ineens springt alles naar beneden omdat er een advertentie of afbeelding laadt. Dat is layout shift.
De drempelwaarden:
Waarom het ertoe doet: Layout shifts zijn niet alleen irritant, ze leiden tot miskliks. Een bezoeker die per ongeluk op de verkeerde link klikt door een layout shift, verlaat je website en komt niet terug.
Voordat je kunt verbeteren, moet je weten waar je staat. Gelukkig zijn er uitstekende gratis tools beschikbaar.
Ga naar pagespeed.web.dev en voer je URL in. Je krijgt twee soorten data:
Tip: Test altijd zowel je homepage als je belangrijkste landingspaginas. Een snelle homepage betekent niet dat je productpaginas ook snel zijn.
Open Chrome DevTools (F12), ga naar het tabblad Performance en klik op de knop Record. Navigeer door je pagina en stop de opname. Je ziet nu precies welke processen tijd kosten en waar layout shifts optreden.
Het Lighthouse-tabblad in DevTools geeft dezelfde analyse als PageSpeed Insights, maar dan lokaal. Handig om snel wijzigingen te testen voordat je ze live zet.
Onder Core Web Vitals in Search Console zie je een overzicht van alle paginas op je website, gecategoriseerd als goed, moet verbeterd worden of slecht. Dit is het beste overzicht om te bepalen welke paginas prioriteit hebben.
LCP is voor de meeste websites de moeilijkste metric om te verbeteren, maar ook de metric met de grootste impact. Hier zijn de concrete stappen:
Afbeeldingen zijn verantwoordelijk voor 70% van de LCP-problemen. De oplossing:
srcset en sizes attributenloading="lazy" voor alle afbeeldingen behalve de eerste<link rel="preload" as="image"> toe aan de <head> voor je LCP-afbeeldingCSS en JavaScript bestanden die in de <head> staan, blokkeren het renderen van de pagina.
<style> tagdefer of async toe aan script-tags die niet direct nodig zijnEen Content Delivery Network serveert je bestanden vanaf een server dichtbij de bezoeker. In Nederland zijn Cloudflare, Vercel Edge Network en AWS CloudFront populaire opties. Het verschil kan oplopen tot 1-2 seconden voor bezoekers buiten je serverregio.
Als je server er langer dan 600ms over doet om te reageren, wordt het bijna onmogelijk om een goede LCP-score te halen.
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.
webpack-bundle-analyzer of @next/bundle-analyzer welke pakketten groot zijnrequestAnimationFrame voor visuele updatesDe browser kan niet reageren op klikken zolang er een lange taak (>50ms) draait op de main thread.
setTimeout of requestIdleCallbackscheduler.yield() (nieuw in Chrome) om tussentijds controle terug te geven aan de browserCLS is vaak de makkelijkste metric om te verbeteren, omdat de oorzaken goed te identificeren zijn.
Voeg altijd width en height attributen toe aan <img> en <video> tags. De browser reserveert dan ruimte voordat het mediabestand is geladen.
<!-- Slecht: geen afmetingen -->
<img src="foto.webp" alt="Productfoto">
<!-- Goed: afmetingen opgegeven -->
<img src="foto.webp" alt="Productfoto" width="800" height="600">
Advertenties, embeds en lazy-loaded content moeten een vaste ruimte krijgen via CSS aspect-ratio of min-height.
Webfonts zijn een veelvoorkomende oorzaak van layout shifts. Het lettertype laadt en ineens verandert de tekstgrootte.
font-display: swap als CSS-eigenschap<link rel="preload" as="font">size-adjust in @font-face)Banners, cookiemeldingen en notificaties die bovenaan de pagina worden ingevoegd, duwen alle content naar beneden. Gebruik in plaats daarvan overlays of sticky positionering.
De beste optimalisaties helpen niet als je hosting ondermaats is. Hier is wat je minimaal nodig hebt:
| Aspect | Minimum | Aanbevolen |
|---|---|---|
| Server responstijd (TTFB) | < 800ms | < 200ms |
| Hosting type | VPS | Managed/Edge |
| HTTP-versie | HTTP/2 | HTTP/3 |
| SSL/TLS | TLS 1.2 | TLS 1.3 |
| Compressie | Gzip | Brotli |
| CDN | Optioneel | Ja, met edge caching |
Voordat we naar de resultaten kijken, is het goed om te weten welke fouten we het vaakst tegenkomen bij MKB-websites:
Veel bedrijven testen alleen hun homepage in PageSpeed Insights en denken dat ze klaar zijn. Maar je productpaginas, blogartikelen en contactpagina hebben vaak heel andere scores. Google beoordeelt elke pagina individueel. Test minimaal je top-10 paginas op basis van verkeer in Search Console.
Elke WordPress-plugin, elke social media widget en elke analytics-tag voegt JavaScript toe aan je pagina. We zien regelmatig websites met 15-20 scripts die tegelijk laden. Het resultaat: een INP-score van 600ms+ en een LCP die door het dak gaat. Audit je scripts en wees meedogenloos: als je een tool de afgelopen 3 maanden niet hebt gebruikt, verwijder hem.
De meeste CMS-systemen optimaliseren afbeeldingen niet automatisch. Een foto van 4MB die rechtstreeks vanuit de camera wordt geupload, wordt een foto van 4MB op je website. Gebruik een automatische beeldoptimalisatie-service of plugin die afbeeldingen bij upload converteert naar WebP en verkleint naar de juiste afmetingen.
Browser caching en server-side caching zijn twee van de meest effectieve optimalisaties, maar worden vaak over het hoofd gezien. Met de juiste cache-headers hoeft een terugkerende bezoeker niet alle bestanden opnieuw te downloaden. Dit verbetert niet alleen de snelheid, maar vermindert ook je serverbelasting en hostingkosten.
Google gebruikt mobile-first indexing, wat betekent dat de mobiele versie van je website bepalend is voor je ranking. Toch optimaliseren veel bedrijven primair voor desktop. Test je Core Web Vitals altijd eerst op mobiel - dat is wat Google ziet.
Een typisch MKB-website verbetertraject levert de volgende resultaten op:
Voor optimalisatie:
Na optimalisatie:
Impact: 34% lager bouncepercentage, 22% meer paginaweergaven per sessie, en een meetbare stijging in organisch verkeer binnen 4-8 weken na implementatie.
Week 1: Meten en analyseren
Week 2: Quick wins implementeren
Week 3: Technische optimalisaties
Week 4: Finetuning en monitoring
Core Web Vitals verbeteren is geen eenmalige actie. Het is een doorlopend proces dat aandacht verdient bij elke website-update. Bespreek met je ontwikkelaar of webbureau hoe prestatiemonitoring onderdeel wordt van het ontwikkelproces. Goede ontwikkelaars testen Core Web Vitals bij elke deploy en vangen regressies vroegtijdig op.
Core Web Vitals verbeteren is geen luxe - het is een noodzaak voor elke website die serieus gevonden wil worden. De drie metrics (LCP, INP en CLS) meten samen de complete gebruikservaring en zijn directe rankingfactoren voor Google. Het goede nieuws: de meeste verbeteringen zijn technisch niet ingewikkeld. Met de juiste aanpak zie je binnen 4-8 weken meetbare resultaten in zowel je Core Web Vitals scores als je zoekverkeer.
Begin vandaag met een meting in PageSpeed Insights. Pak de quick wins als eerste aan. En maak van prestatieoptimalisatie een vast onderdeel van je website-onderhoud. Je bezoekers - en Google - zullen je ervoor belonen.
Meer over Digitalisering
Veel bedrijven denken dat hun oude systemen eerst vervangen moeten worden voordat AI mogelijk is. Niet waar.
Moderniseer legacy systemen zonder bedrijfsonderbreking. Praktisch stappenplan met 5 strategieen, van rehosting tot volledige vervanging.
Ontdek hoe AI assistenten je team productiever maken. Van slimme notulen en email-assistentie tot documentverwerking: een 4-weken implementatieplan.
Ontdek hoe CleverTech jouw organisatie kan helpen met digitale transformatie.
Tom Hendriks is Business Consultant bij CleverTech, gespecialiseerd in ROI-analyse en business case ontwikkeling voor AI en automatiseringsprojecten. Met een achtergrond in bedrijfskunde en financial management, helpt Tom MKB-bedrijven om de zakelijke waarde van technologie-investeringen te kwantificeren. Hij is expert in het vertalen van technische mogelijkheden naar concrete bedrijfsresultaten en het bouwen van overtuigende business cases voor digitale transformatie.
Ontvang wekelijks praktische inzichten over digitale transformatie in je inbox.
In een kort gesprek bespreken we jouw situatie en laten we zien welke processen het meeste opleveren als je ze automatiseert. Geen verplichtingen.
Gratis · vrijblijvend · reactie binnen 24 uur
Al 40+ bedrijven besparen tijd en kosten met onze oplossingen.
