Core Web Vitals zijn Google's metrics voor gebruikerservaring. Ze meten hoe snel je pagina laadt, hoe responsief deze is, en hoe stabiel de layout blijft. In deze gids leer je alles over het verbeteren van deze cruciale metrics.
Wat zijn Core Web Vitals?
Core Web Vitals zijn drie specifieke metrics die Google gebruikt om de gebruikerservaring van een webpagina te beoordelen:
- LCP (Largest Contentful Paint) - Meet laadsnelheid
- INP (Interaction to Next Paint) - Meet interactiviteit
- CLS (Cumulative Layout Shift) - Meet visuele stabiliteit
LCP: Largest Contentful Paint
LCP meet hoe lang het duurt voordat het grootste zichtbare element op de pagina is geladen. Dit is meestal een hero image, video of groot tekstblok.
Goede LCP scores
- Goed: 2.5 seconden of minder
- Verbetering nodig: 2.5 - 4.0 seconden
- Slecht: Meer dan 4.0 seconden
LCP verbeteren
- Optimaliseer en comprimeer afbeeldingen
- Gebruik moderne formaten zoals WebP of AVIF
- Implementeer lazy loading voor offscreen images
- Minimaliseer render-blocking resources
- Gebruik een CDN voor snellere levering
- Preload belangrijke resources
INP: Interaction to Next Paint
INP verving FID in 2024 en meet de responsiviteit van je pagina. Het kijkt naar alle interacties tijdens een paginabezoek en rapporteert de slechtste.
Goede INP scores
- Goed: 200 milliseconden of minder
- Verbetering nodig: 200 - 500 milliseconden
- Slecht: Meer dan 500 milliseconden
INP verbeteren
- Minimaliseer JavaScript execution time
- Break up long tasks in kleinere chunks
- Gebruik web workers voor zware berekeningen
- Optimaliseer event handlers
- Vermijd layout thrashing
CLS: Cumulative Layout Shift
CLS meet hoeveel de pagina-inhoud verschuift tijdens het laden. Niets is zo frustrerend als een knop die wegspringt net als je erop wilt klikken.
Goede CLS scores
- Goed: 0.1 of minder
- Verbetering nodig: 0.1 - 0.25
- Slecht: Meer dan 0.25
CLS verbeteren
- Geef afbeeldingen en videos altijd width en height attributen
- Reserveer ruimte voor advertenties en embeds
- Laad fonts correct met font-display: swap
- Vermijd het invoegen van content boven bestaande content
- Gebruik transform animaties in plaats van top/left
Tools om Core Web Vitals te meten
- PageSpeed Insights - Google's officiële tool
- Google Search Console - Bekijk data voor je hele site
- Lighthouse - Ingebouwd in Chrome DevTools
- Web Vitals extension - Real-time monitoring