Hoe verbeter ik slechte Core Web Vitals-scores?

Zoek uit welke metriek faalt, op welk apparaat en voor welke groep pagina's. Het Core Web Vitals-rapport van Search Console toont alle drie op basis van echte Chrome-bezoeken. Los vervolgens de oorzaak achter die metriek op: bij LCP is dat hoe snel de hoofdafbeelding of de hoofdtekst binnenkomt, bij INP zijn het lange JavaScript-taken die reacties vertragen en bij CLS is het content die verschijnt zonder dat er ruimte voor is gereserveerd. Velddata beslaat de afgelopen 28 dagen, dus beoordeel de oplossing pas na een maand.

Stap 1: ontdek wat er faalt

1. Open het rapport Core Web Vitals in Search Console en kies Mobiel of Desktop. Beide worden apart beoordeeld.
2. Open een van de genoemde problemen, bijvoorbeeld een LCP-probleem op mobiel, om de getroffen URL-groep en voorbeeld-URL's te zien. De hele groep deelt één status, die wordt bepaald door de slechtste metriek.
3. Voer een voorbeeld-URL uit in PageSpeed Insights om de velddata van die pagina te zien naast een labtest die je helpt bij het debuggen.

Labtools zoals Lighthouse kunnen INP niet meten, omdat niemand met de pagina communiceert. Ze rapporteren in plaats daarvan Total Blocking Time. Voor INP is meting bij echte gebruikers de betrouwbare maatstaf.

Een trage LCP verbeteren

De LCP-optimalisatiegids van web.dev verdeelt LCP in vier onderdelen: de reactietijd van de server, de vertraging voordat de hoofdresource begint te laden, de downloadtijd ervan en de vertraging voordat die wordt weergegeven. Pak eerst het grootste onderdeel aan:

• Maak de LCP-afbeelding vindbaar in de initiële HTML in plaats van deze met JavaScript of CSS in te voegen, en geef haar fetchpriority="high".
• Pas nooit lazy loading toe op de LCP-afbeelding.
• Lever haar kleiner aan: de juiste afmetingen, een modern formaat, compressie en een CDN dicht bij de bezoekers.
• Verwijder renderblokkerende resources: kleinere stylesheets, geen synchrone scripts in de <head> en server-side rendering voor de hoofdinhoud.
• Versnel de serverreactie: beperk redirects en laat pagina's aan de edge cachen.

Een slechte INP verbeteren

De INP-optimalisatiegids verdeelt elke interactie in invoervertraging, verwerkingstijd en presentatievertraging:

• Invoervertraging: beperk de JavaScript die tijdens het laden van de pagina draait, zodat de main thread vrij is wanneer iemand tikt.
• Verwerkingstijd: splits lange event handlers op in kleinere taken en geef de main thread tussendoor vrij. Voer de zichtbare update eerst uit en stel de rest uit.
• Presentatievertraging: houd de DOM klein, voorkom geforceerde layoutberekeningen door stijlen niet direct na een wijziging uit te lezen en gebruik content-visibility voor lange pagina's.

Een hoge CLS verbeteren

De CLS-optimalisatiegids somt de gebruikelijke boosdoeners en bijbehorende oplossingen op:

• Afbeeldingen en video's zonder afmetingen: voeg de attributen width en height toe, of een CSS-aspect-ratio.
• Advertenties, embeds en iframes: reserveer hun ruimte in de layout voordat ze laden.
• Content die boven bestaande content wordt ingevoegd: gebruik een placeholder van het juiste formaat, of voeg nieuwe content onder het gedeelte in dat de bezoeker leest.
• Webfonts: laad de belangrijkste vooraf in (preload), zodat tekst niet laat opnieuw wordt opgemaakt.
• Animaties: animeer transform in plaats van eigenschappen zoals top of left.

Pagina's die de back/forward cache van de browser kunnen gebruiken, vermijden ook layoutverschuivingen wanneer bezoekers erheen terugkeren.

Stap 3: bevestig de oplossing

Zet de wijziging live, open daarna het probleem in het Core Web Vitals-rapport en start de validatie. Google volgt de groep gedurende 28 dagen. Validatie zorgt niet voor een nieuwe crawl en versnelt niets, maar controleert alleen of het probleem is verdwenen. Omdat velddata over 28 dagen wordt doorgerekend, verbetert het rapport geleidelijk. Wat elke metriek betekent, lees je in Wat betekenen LCP, INP en CLS?.

Hoe AutoPSEO helpt

Het Core Web Vitals-rapport van AutoPSEO toont ongeveer zes maanden aan wekelijkse Chrome UX Report-data voor je site of voor één URL, op telefoon, desktop of tablet. Zo zie je in welke week een oplossing effect had, of in welke week een release de zaken verslechterde, zonder te wachten tot het volgende venster van 28 dagen is afgelopen.