Wat doe je als de browser je LCP-afbeelding te laat ontdekt?

De browser kan een afbeelding pas ophalen als hij weet dat die er is. Staat de verwijzing diep in de pagina verstopt of wordt hij pas door JavaScript toegevoegd, dan begint het laden onnodig laat.

Drie situaties waarin dit misgaat. Een achtergrondafbeelding die alleen in een CSS-bestand staat, wordt pas ontdekt nadat die CSS is opgehaald en verwerkt. Een slider of carrousel die door JavaScript wordt opgebouwd, verbergt de eerste afbeelding tot dat script klaar is. En een afbeelding die via een script wordt ingeladen, bestaat voor de browser aanvankelijk niet.

Wat helpt: zet de belangrijkste afbeelding als gewoon img-element in de HTML, geef hem fetchpriority hoog, en gebruik waar nodig een preload-verwijzing in de head. Vermijd sliders bovenaan de pagina, want die kosten bijna altijd meer dan ze opleveren.