Largest Contentful Paint (LCP)

Largest Contentful Paint, afgekort LCP, meet hoe lang het duurt voordat het grootste zichtbare element in het scherm van je bezoeker geladen is. Dat is meestal een hero-afbeelding, een videoposter of een groot tekstblok. LCP is een van de drie Core Web Vitals en het beste beschikbare cijfer voor de vraag: hoe snel voelt deze pagina voor een bezoeker?

Wat een goede score is

Google hanteert een LCP onder de 2,5 seconde als goed, tussen 2,5 en 4 seconden als voor verbetering vatbaar, en boven de 4 seconden als slecht. Die score wordt gemeten bij het 75e percentiel van je echte bezoekers, dus niet bij een gemiddelde. Een snelle glasvezelgebruiker compenseert niet voor een trage mobiele verbinding.

Let op het verschil tussen labdata en velddata. PageSpeed Insights toont beide. De labscore is een simulatie op een gesimuleerd apparaat, de velddata komt uit het Chrome User Experience Report en gaat over echte bezoekers. Voor Google telt de velddata, en die vind je ook terug in Google Search Console.

Waar de tijd naartoe gaat

LCP bestaat uit vier stukken: de tijd tot de server het eerste byte stuurt, de vertraging voordat de browser het bepalende element ontdekt, de tijd om dat element te downloaden, en de tijd om het te tekenen. Bij de meeste WordPress-sites zit de klap in de eerste twee.

Een trage server met veel plugins levert een eerste byte van meer dan een seconde op. En de hero-afbeelding wordt vaak pas ontdekt nadat de browser de CSS heeft verwerkt, omdat hij als achtergrondafbeelding via CSS wordt ingeladen in plaats van als gewone afbeelding in de HTML.

Hoe je hem verbetert

Zet je hero-afbeelding als echte afbeelding in de HTML, geef hem fetchpriority=”high” en zet er géén lazy loading op. Lazy loading op het element boven de vouw is de meest gemaakte fout: je vertelt de browser dat hij het belangrijkste element van de pagina mag uitstellen. Serveer de afbeelding in WebP, op het formaat waarop hij getoond wordt, en zet caching aan zodat je server niet per bezoeker de pagina opnieuw opbouwt.

Een concreet voorbeeld: een site met een hero van 1,8 MB in PNG-formaat, ingeladen via CSS en met lazy loading eroverheen, kwam op een LCP van 5,4 seconden. Diezelfde afbeelding als WebP van 140 kB, in de HTML, zonder lazy loading, bracht hem naar 1,9 seconden. Er is geen regel code aan de site veranderd.