Core Web Vitals verbeteren: wat heeft echt effect?

Core Web Vitals verbeteren begint niet met willekeurig plugins installeren of bestanden verkleinen. We moeten eerst vaststellen welke metriek onvoldoende scoort, op welke paginatypen dat gebeurt en wat de vertraging of verschuiving veroorzaakt. De drie Core Web Vitals zijn Largest Contentful Paint (LCP), Interaction to Next Paint (INP) en Cumulative Layout Shift (CLS). Ze meten respectievelijk laadsnelheid, reactiesnelheid en visuele stabiliteit. Google gebruikt hiervoor praktijkdata van echte Chrome-gebruikers. Daardoor kan een snelle laboratoriumtest samengaan met een onvoldoende score in Search Console.

Meet eerst het juiste probleem

PageSpeed Insights toont zowel velddata als een gesimuleerde Lighthouse-test. Velddata uit het Chrome User Experience Report geven de prestaties over de afgelopen 28 dagen weer. Lighthouse is een momentopname onder nagebootste omstandigheden en helpt vooral bij de diagnose. Kijk daarom niet alleen naar de totaalscore van Lighthouse. Die score is geen Core Web Vital en kan per test variëren.

Begin in Google Search Console bij het rapport Core Web Vitals. Daar worden URL’s met vergelijkbaar gedrag gegroepeerd. Onderzoek vervolgens representatieve pagina’s in PageSpeed Insights en Chrome DevTools. Controleer zowel mobiel als desktop, omdat apparaten, netwerkverbindingen en templates verschillen. Let ook op het 75e percentiel in de velddata: Google beoordeelt hiermee of een pagina voor het merendeel van de bezoeken goed presteert.

• LCP is goed bij maximaal 2,5 seconden.
• INP is goed bij maximaal 200 milliseconden.
• CLS is goed bij maximaal 0,1.
• Vergelijk velddata met laboratoriumdata; gebruik de eerste voor beoordeling en de tweede voor diagnose.
• Test meerdere URL’s per template, zoals dienstenpagina’s, blogs, kamers en boekingspagina’s.

LCP verbeteren: optimaliseer het grootste zichtbare element

De LCP wordt vaak bepaald door een hero-afbeelding, grote kop of banner boven de vouw. De ingrepen met het meeste effect zitten meestal in vier onderdelen: serverreactietijd, het moment waarop de browser het element ontdekt, de downloadduur en de rendertijd. Controleer in DevTools welk element daadwerkelijk als LCP geldt. Een afbeelding optimaliseren terwijl een tekstblok de LCP veroorzaakt, levert weinig op.

Bij een LCP-afbeelding helpt het om de juiste afmetingen aan te bieden via srcset en moderne formaten zoals WebP of AVIF te gebruiken. Geef deze afbeelding geen lazy loading wanneer zij direct in beeld staat. Zorg dat zij al in de HTML vindbaar is en geef haar waar nodig een hoge laadprioriteit met fetchpriority="high". Een CSS-achtergrondafbeelding wordt doorgaans later ontdekt; een regulier image-element is daarom vaak geschikter voor belangrijke content.

Een trage serverreactie vraagt om een andere aanpak. Denk aan paginacaching, efficiëntere databaseverzoeken, minder redirects en een CDN voor bezoekers op verschillende locaties. Render-blocking CSS kan eveneens vertragen. Laad alleen de noodzakelijke stijlen vroeg en stel niet-kritieke CSS uit. Preload is alleen zinvol voor aantoonbaar kritieke bestanden. Te veel preloads laten bronnen concurreren en kunnen de LCP juist verslechteren.

INP verbeteren: verkort werk op de hoofdthread

INP meet hoe snel een pagina visueel reageert op klikken, tikken en toetsenbordinvoer. De voornaamste oorzaak van een hoge INP is langdurig JavaScript-werk op de hoofdthread. Zolang de browser een groot script uitvoert, kan hij een interactie niet direct verwerken en het resultaat niet tekenen. Vooral tagmanagers, chatfuncties, personalisatiescripts, sliders en omvangrijke front-end frameworks kunnen bijdragen.

Het meeste effect ontstaat door minder JavaScript naar de browser te sturen en lange taken op te delen. Verwijder ongebruikte bibliotheken en tags, laad functionaliteit pas wanneer die nodig is en voorkom dat één interactie grote delen van de pagina opnieuw rendert. Gebruik de Performance-tool in Chrome DevTools om te zien welke event handlers en long tasks een klik vertragen. Voor productieproblemen kan de web-vitals-bibliotheek helpen om trage interacties en betrokken elementen vast te leggen.

• Verwijder scripts en tags die geen meetbaar doel meer hebben.
• Splits grote JavaScript-bundels per pagina of functionaliteit.
• Stel niet-kritieke code uit met defer, async of dynamisch laden, afhankelijk van de afhankelijkheden.
• Beperk complexe DOM-structuren en onnodige herberekeningen van stijl en layout.
• Geef eerst visuele feedback op een interactie en voer zwaar vervolgwerk daarna uit.

CLS verbeteren: reserveer ruimte voordat content laadt

CLS ontstaat wanneer zichtbare onderdelen onverwacht verschuiven. De meest effectieve oplossing is ruimte vooraf vastleggen. Geef afbeeldingen en video’s altijd breedte en hoogte of een aspect-ratio. Reserveer vaste of minimale ruimte voor cookiebanners, advertenties, boekingswidgets en dynamische formulieren. Voeg meldingen bij voorkeur niet boven bestaande content in nadat de pagina is geladen.

Webfonts kunnen tekst laten verspringen wanneer het definitieve lettertype andere afmetingen heeft dan het tijdelijke lettertype. Verminder dit door alleen benodigde gewichten te laden, belangrijke fonts te preloaden en een fallback met vergelijkbare metriek te kiezen. Eigenschappen zoals size-adjust kunnen het verschil verder beperken. Animaties met transform veroorzaken doorgaans geen layoutverschuiving; animaties van hoogte, breedte of positie kunnen dat wel doen.

Wat vaak weinig effect heeft op de uiteindelijke score

Algemene optimalisaties zijn niet automatisch relevant voor Core Web Vitals. Afbeeldingen onderaan een lange pagina verkleinen kan dataverbruik verminderen, maar verandert de LCP vaak niet. Een cacheplugin installeren lost geen zware JavaScript-taken of ontbrekende afbeeldingsafmetingen op. Ook een hoge Lighthouse-score garandeert geen goede veldscore: echte bezoekers gebruiken andere apparaten, verbindingen en interacties.

Prioriteer daarom per metriek en template. Los eerst oorzaken op die veel URL’s raken, zoals een gedeelde header, hero, cookiebanner of scriptbundel. Controleer na publicatie of de technische signalen in laboratoriumtests verbeteren. Voor de veldscore is tijd nodig, omdat deze over een voortschrijdende periode wordt opgebouwd. Core Web Vitals zijn bovendien slechts één onderdeel van SEO. Goede prestaties ondersteunen gebruikservaring en vormen een rankingsignaal, maar vervangen geen relevante inhoud, duidelijke structuur of toegankelijke pagina’s.