Je belangrijkste afbeelding laadt als laatste: LCP in de praktijk

Largest Contentful Paint, of LCP, meet hoe lang het duurt voordat het grootste element in beeld zichtbaar is. Google noemt een LCP tot 2,5 seconden goed en boven de 4 seconden slecht, gemeten bij 75 procent van je bezoekers. In een webshop is dat grootste element bijna altijd een afbeelding: de banner op de homepage, de foto op een categoriepagina of de hoofdafbeelding van een product.

Het vreemde is dat juist die belangrijkste afbeelding vaak als een van de laatste laadt.

Waar de tijd zit

LCP bestaat uit vier stukken:

1. Serverrespons. Hoe lang het duurt voordat de eerste byte binnenkomt.
2. Vertraging tot laden. Hoe lang het duurt voordat de browser ontdekt dat hij de afbeelding moet ophalen.
3. Laadtijd. Hoe lang het downloaden van de afbeelding zelf duurt.
4. Vertraging tot tonen. Hoe lang het duurt voordat de afbeelding echt op het scherm staat.

In de praktijk zit de grootste winst vaak in stap 2. De afbeelding is niet te groot en de server is niet traag, maar de browser vindt de afbeelding pas laat.

Vaak is de afbeelding niet te zwaar. Hij wordt gewoon te laat gevonden.

De bekende boosdoeners

• Lazy loading op de verkeerde afbeelding. Lazy loading is goed voor afbeeldingen verderop in de pagina. Op de afbeelding die direct in beeld staat, vertraagt het juist.
• Een afbeelding die via JavaScript komt. Een slider of carrousel die pas na het laden van een script zijn eerste afbeelding toont, laat de browser wachten.
• Een achtergrondafbeelding in CSS. De browser ontdekt die pas als het stylesheet is geladen en verwerkt.
• Geen voorrang. Zonder hint behandelt de browser de belangrijkste afbeelding als elke andere.
• Eén formaat voor elk scherm. Een afbeelding van 2.000 pixels breed op een telefoon van 400 pixels breed kost onnodig downloadtijd.

Wat helpt

Laad de afbeelding die direct in beeld staat zonder lazy loading, en geef hem voorrang met fetchpriority="high". Zet hem als gewone afbeelding in de HTML, niet in een slider of als achtergrond in CSS. Gebruik moderne formaten als WebP of AVIF, en lever per schermgrootte een passend formaat.

Bij Watercoolergigant was een productafbeelding die te laat laadde een van de punten die we met RUM vonden en gericht oplosten. Op mobiel ging de LCP van 1,78 naar 1,28 seconden.

Meet per paginatype

Een homepage, een categoriepagina en een productpagina hebben elk een ander LCP-element. Kijk daarom per paginatype en per apparaat, bij echte bezoekers. Een test op je eigen laptop vertelt je weinig over een klant met een oudere telefoon in de trein.

Wat je hieruit meeneemt

1. Zoek per paginatype uit welk element de LCP bepaalt. In een shop is dat meestal een afbeelding.
2. Geen lazy loading en wel voorrang voor de afbeelding die direct in beeld staat.
3. Meet bij echte bezoekers, per paginatype en per apparaat.