Hoe verbeter je Core Web Vitals?

Minimaal 75% van je echte bezoeken moet goed scoren, anders kleurt je rapport rood. Je Core Web Vitals verbeteren begint dus niet met nog een losse test draaien, maar met lezen wat echte bezoekers meemaken.

Rood betekent dat te veel echte bezoeken de grens missen voor laden, reageren of stabiliteit. Pak eerst het LCP-element en zware beelden aan, beperk en splits daarna JavaScript voor een betere reactie, en reserveer ruimte tegen verspringen.

Wat betekent rood bij Core Web Vitals eigenlijk?

Rood betekent dat een te groot deel van je echte bezoeken een slechte ervaring heeft op je pagina’s. Je kijkt niet naar één meetmoment, maar naar het gedrag van veel bezoeken bij elkaar op verschillende telefoons, verbindingen en browsers.

Begin zo met lezen:

• Kijk in Search Console welke maat rood is: LCP, INP of CLS.
• Kijk daarna op welk paginatype het zit, bijvoorbeeld homepage, productpagina, blog of checkout. Prioriteer op template- en paginatype, niet pagina voor pagina.
• Open één voorbeeld-URL uit die groep in PageSpeed Insights en check welk element of welke interactie de score naar beneden trekt.

Staat alles rood, begin dan bij LCP. Dat is meestal het grootste en zichtbaarste probleem voor bezoekers.

Wat betekenen LCP, INP en CLS in gewone taal?

LCP, INP en CLS meten drie simpele dingen: hoe snel je pagina laadt, hoe snel hij reageert op een klik en hoe stabiel hij blijft staan. Elk in één zin:

• LCP meet het laden: je grootste zichtbare element is binnen 2,5 seconde in beeld bij een goede score.
• INP meet het reageren op klikken en tikken: je pagina reageert binnen 200 milliseconden bij een goede score.
• CLS meet stabiliteit: je inhoud verspringt bijna niet, met een score tot en met 0,1 bij een goede score.

INP is daarbij de opvolger van FID als maat voor interactie. Je meet dus niet meer alleen de eerste vertraging, maar hoe de pagina tijdens het hele bezoek aanvoelt bij klikken, tikken en typen.

Zie je rood bij LCP, dan wachten bezoekers te lang op beeld. Zie je rood bij INP, dan voelt de pagina log aan bij klikken. Zie je rood bij CLS, dan schuift tekst of een knop weg net als iemand wil lezen of klikken.

Wanneer ben je goed, matig of slecht?

Je bent pas goed als minimaal 75% van je echte bezoeken goed scoort, dat is de 75%-regel. Haalt minder dan 75% de grens voor goed, dan kleurt de groep matig of slecht, afhankelijk van hoeveel bezoeken ernaast zitten.

Deze tabel laat zien wanneer je per maat goed scoort bij echte bezoeken:

Zo lees je het rapport:

• Goed: minimaal 75% van de bezoeken haalt de grens uit de tabel.
• Matig: een deel van de bezoeken mist de grens, je zit tegen verbetering aan.
• Slecht: te veel bezoeken missen de grens, dit is rood en vraagt om eerst actie.

Kijk dus niet alleen naar je eigen telefoon op wifi. Jouw test kan snel voelen, terwijl bezoekers op een oudere mobiel met 4G alsnog rood veroorzaken.

Waarom zegt Search Console iets anders dan PageSpeed Insights?

Search Console laat vertraagde data van echte bezoekers zien, PageSpeed Insights en Lighthouse laten vooral een momentopname zien. Daarom lijken ze elkaar tegen te spreken, terwijl ze iets anders meten.

• Search Console: groepen URL’s met echte gebruikerscijfers uit de CrUX-dataset. Rood blijft hier langer staan, omdat het om weken aan bezoeken gaat.
• PageSpeed Insights: combineert echte gebruikerscijfers voor die URL met een labtest die je net hebt gedraaid. Handig om te zien wat er nu gebeurt.
• Lighthouse: alleen een labtest in een vaste omgeving. Handig om een oorzaak te vinden, niet om te bepalen of je geslaagd bent.

Zegt Search Console rood en PageSpeed groen voor één test, dan was die ene test toevallig snel. Zegt PageSpeed rood en Search Console nog groen, dan heb je een nieuw probleem dat nog niet in de velddata zit. Wil je je Core Web Vitals testen, gebruik PageSpeed dus om te zoeken en Search Console om te oordelen.

Hoe begin je met je Core Web Vitals verbeteren bij een rode LCP?

Begin bij een rode LCP altijd bij het grootste element boven de vouw en bij zware beelden en video. Dat element bepaalt je LCP-tijd, dus daar zit de meeste winst.

Concrete stappen:

• Zoek in PageSpeed Insights welk element je LCP is, meestal een hero-afbeelding, video of grote kop met webfont.
• Maak die afbeelding kleiner en moderner, laad hem met hoge prioriteit en stel hem niet uit. Laad beelden lager op de pagina juist wel lui.
• Haal een video op mobiel weg of vervang hem door een lichte afbeelding, zeker als hij automatisch start.
• Beperk wat het laden blokkeert: haal ongebruikte scripts en zware sliders uit de header en zorg dat je caching en hosting op orde zijn.
• Check je template, niet losse pagina’s. Is je hero op alle dienstenpagina’s hetzelfde opgebouwd, dan los je het één keer centraal op.

Helpt dit niet genoeg, kijk dan naar je lettertypes en naar scripts van derden die eerst laden voordat je beeld er staat.

Hoe verbeter je een rode INP en CLS?

Een rode INP los je op door JavaScript te beperken en te splitsen, een rode CLS door ruimte te reserveren tegen verspringen. Het zijn dus twee verschillende klussen.

Voor INP verbeteren:

• Telt je pagina traag bij klikken op menu, filters of knoppen, beperk dan wat er bij die klik draait. Haal ongebruikte apps, trackers en thema-scripts weg.
• Splits zware JavaScript, zodat de browser eerst reageert en pas daarna de rest laadt.
• Let op overlays, zoekbalken en cookiebanners die bij elke klik werk doen.

Voor CLS verbeteren:

• Reserveer vaste hoogte en breedte voor beelden, banners, advertenties en embeds, zodat tekst niet naar beneden duwt als ze laden.
• Laad lettertypes stabiel, zodat tekst niet eerst smal en daarna breed wordt.
• Schuif geen pop-up of banner over je inhoud heen vlak na het laden.

Zie je in PageSpeed Insights rood voor CLS, kijk dan met filmstrip of schermopname waar de verspringing zit. Vaak is het één blok dat geen vaste plek heeft.

Wanneer wordt rood weer groen?

Rood wordt niet direct groen na een fix, omdat Search Console naar weken aan echte bezoeken kijkt. Je verbetering moet eerst door genoeg nieuwe bezoeken bevestigd worden.

Reken hierop:

• Je labtest in PageSpeed kan direct beter zijn, dat is een goed teken maar nog geen goedkeuring.
• Je velddata in Search Console loopt achter, vaak moet je weken wachten tot de groep URL’s opnieuw als goed wordt beoordeeld.
• Blijf in de tussentijd PageSpeed en je eigen metingen volgen per paginatype, zodat je ziet of de lijn daalt.

Wordt het na een paar weken niet groen, dan heb je of het verkeerde template aangepakt, of er zit nog een tweede oorzaak achter, zoals een traag script dat alleen op mobiel stoort. Laat je het verbeteren en bijhouden liever doen, dan helpt onderhoud uitbesteden je om dit structureel op te lossen in plaats van eenmalig te pleisteren.

Open vandaag Search Console, schrijf op welke maat rood is en voor welk paginatype, en pak in die volgorde aan: eerst beelden en LCP-element, dan JavaScript voor INP, dan ruimte reserveren voor CLS.