Core Web Vitals in de praktijk: een veldgids

De Core Web Vitals van Google meten hoe een pagina aanvoelt: hoe snel de belangrijkste content verschijnt, hoe vlot de pagina reageert op input en of er tijdens het laden dingen verspringen.

Largest Contentful Paint (LCP)

LCP meet wanneer het grootste element op het scherm klaar is met renderen, meestal een hero-afbeelding. Dit hielp het meest:

• Serveer afbeeldingen via een image-CDN in moderne formaten als AVIF en WebP
• Geef elke afbeelding een expliciete breedte en hoogte
• Preload de hero-afbeelding en lazy-load hem nooit

Interaction to Next Paint (INP)

INP heeft First Input Delay vervangen en meet de responsiviteit tijdens het hele bezoek. Minder JavaScript meesturen is veruit de grootste winst. Met server-side rendering en selectieve hydration bestaat het grootste deel van de pagina uit gewone HTML.

Cumulative Layout Shift (CLS)

Layout shift ontstaat wanneer content verschuift nadat die al zichtbaar is. Reserveer ruimte voor afbeeldingen en embeds, en voeg geen banners toe boven bestaande content.

Bij onze laatste drie projecten brachten deze verbeteringen de mobiele performancescore van rond de 60 naar ruim boven de 95.