Je hoofdafbeelding komt te laat binnen: geef hem voorrang

Je hoofdafbeelding is vaak het grootste element bovenaan je pagina, en daarmee je LCP. Als de browser die afbeelding pas laat ontdekt of hem achteraan in de rij zet, lijkt je pagina langer leeg dan nodig.

In het kud-rapport Je hoofdafbeelding komt te laat binnen

Waarom het uitmaakt

De browser laadt niet alles tegelijk; hij bepaalt zelf een volgorde. Door je hoofdafbeelding expliciet voorrang te geven, staat je belangrijkste inhoud eerder in beeld.

Een veelgemaakte fout: loading="lazy" op de bovenste afbeelding. Dan wacht de browser er juist mee.

Zo los je het op

Haal loading="lazy" weg van de afbeelding bovenaan je pagina.
Geef die afbeelding fetchpriority="high".
Staat de afbeelding als achtergrond in je CSS? Dan ontdekt de browser hem pas laat. Gebruik liever een gewone img-tag, of voeg een preload toe in de head.
Zorg dat de afbeelding zelf licht is, zie de gids over afbeeldingen verkleinen.

<!-- in de head, als de afbeelding in je CSS staat -->
<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">

<!-- of direct op de afbeelding -->
<img src="/img/hero.webp" fetchpriority="high" width="1600" height="900" alt="...">

Op jouw platform

WordPress: Sinds WordPress 6.3 krijgt de eerste grote afbeelding vaak automatisch fetchpriority="high". Paginabouwers en sliders omzeilen dat soms; controleer het in je broncode.

Veelgestelde vragen

Kan ik meerdere afbeeldingen fetchpriority="high" geven?

Liever niet. Als alles voorrang heeft, heeft niks voorrang. Geef het alleen aan de belangrijkste afbeelding bovenaan.

Mijn hoofdafbeelding is een slider. Wat nu?

Geef alleen de eerste slide voorrang en laad de rest later. Nog beter: één sterke afbeelding in plaats van een slider.