Core Web Vitals: LCP, INP en CLS uitgelegd

• LCP (Largest Contentful Paint) – hoe lang duurt het voordat het grootste zichtbare element geladen is? Meestal je hero-afbeelding of de kop. Goed is 2,5 seconde of sneller.
• INP (Interaction to Next Paint) – hoe snel reageert de pagina zichtbaar op een klik of toetsaanslag? Dit verving in 2024 de oude FID-meting en is een stuk strenger. Goed is 200 milliseconden of sneller.
• CLS (Cumulative Layout Shift) – hoeveel verspringt de lay-out tijdens het laden? Denk aan de knop die wegschuift op het moment dat je hem wilt indrukken. Goed is 0,1 of lager.

Belangrijk: je haalt een drempel pas als 75 procent van je bezoeken eronder blijft. Een gemiddelde die net goed is, betekent dus vaak dat een kwart van je bezoekers een slechte ervaring heeft.

1. Te grote afbeeldingen – veruit de meest voorkomende oorzaak van een slechte LCP. Een foto van 4 MB die verkleind wordt weergegeven in 600 pixels breed, moet nog steeds volledig gedownload worden.
2. Lettertypen die de tekst blokkeren – laad je fonts lokaal, gebruik font-display: swap en laad alleen de gewichten die je echt gebruikt.
3. Te veel JavaScript op de hoofdthread – elke externe widget, chatbot en trackingpixel vecht om dezelfde thread. Dat is bijna altijd de oorzaak van een slechte INP.
4. Afbeeldingen en advertenties zonder afmetingen – geef elk img-element een breedte en hoogte mee, dan reserveert de browser de ruimte en verspringt er niets.
5. Cookiebanners die achteraf worden ingeschoven – een banner die pas na het renderen verschijnt en de content omlaag duwt, is een klassieke CLS-veroorzaker.