Preload de Largest Contentful Paint afbeelding

Wat is preloading?

Het preloaden van een resource zorgt ervoor dat de browser een resource vroegtijdig downloadt, nog voordat de hoofdrendering van de browser op gang komt. Dit zorgt ervoor dat een resource eerder beschikbaar is en minder kans heeft om de rendering van de pagina te blokkeren, wat in de meeste gevallen de prestaties verbetert. In LCP-timingverband vermindert preloading de Resource Load Delay: het gat tussen het moment dat de browser de HTML ontvangt en begint met het downloaden van de LCP afbeelding.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

Waarom zou ik de Largest Contentful Paint afbeelding preloaden?

Afbeeldingen die zichtbaar zijn en in de viewport staan, krijgen een hoge prioriteit en worden relatief vroeg in het hele paginalaadproces gedownload. Browsers zoals Chrome doen hun best om die afbeeldingen voor je te prioriteren en doen dat vaak goed. Toch maakt de browser een inschatting van de downloadvolgorde en zal vaak andere resources zoals extern JavaScript of andere zichtbare afbeeldingen prioriteit geven boven de LCP afbeelding.

Door dit gedrag start de download van de LCP afbeelding niet zo vroeg als je zou willen. Het preloaden van de Largest Contentful Paint afbeelding lost dit probleem op.

De cijfers bevestigen dit. Volgens de 2025 Web Almanac heeft 76% van de mobiele pagina's een afbeelding als hun LCP element. Toch preloadt slechts 2,1% van de pagina's die afbeelding daadwerkelijk. Dat is een enorme gemiste kans. Bovendien zijn veel LCP afbeeldingen niet vindbaar in de initiële HTML omdat ze afhankelijk zijn van JavaScript of CSS om te renderen. De browser kan niet downloaden wat hij niet kan vinden. Een preload tag lost dat op.

Hoe beïnvloedt het preloaden van de Largest Contentful Paint afbeelding de paginaprestaties?

Het preloaden van de Largest Contentful Paint afbeelding maakt de afbeelding eerder beschikbaar voor rendering in het renderproces. Dit leidt meestal tot een betere LCP-score. In vrijwel alle gevallen levert het preloaden van het LCP element betere Lighthouse- en velddata-scores op.

Op sites die worden gemonitord door CoreDash, scoort 98% van de paginaladingen met een gepreloade LCP afbeelding 'goed', vergeleken met 88% zonder preloading. De p75 LCP voor gepreloade afbeeldingen is ongeveer 2x sneller dan voor niet-gepreloade afbeeldingen.

Het preloaden van het LCP element kan nog voordeliger zijn wanneer de LCP afbeelding om een of andere reden niet de eerste afbeelding is die wordt gedownload. Dit kan gebeuren wanneer:

• Er meerdere afbeeldingen in de zichtbare viewport zijn
• De LCP afbeelding een achtergrondafbeelding is (achtergrondafbeeldingen worden meestal later gedownload dan voorgrondafbeeldingen)
• Het LCP element afhankelijk is van JavaScript. Bijvoorbeeld bij een sliderscript of als je site is gebouwd op een JavaScript framework zoals React.

Toch lazy-loadt 17% van de mobiele sites hun LCP afbeelding volgens de 2025 Web Almanac. Slechts 62% van de mobiele origins slaagt voor LCP. Deze twee feiten zijn niet ongerelateerd. Als je je LCP afbeelding lazy-loadt, los dat dan eerst op en preload deze vervolgens.

Gebruik fetchpriority="high" op de LCP afbeelding

Naast preloading moet je ook fetchpriority="high" toevoegen aan het LCP afbeeldingselement zelf. Dit vertelt de browser om deze afbeelding prioriteit te geven boven andere resources. Een test op Google Flights liet LCP-verbeteringen zien van 2,6 seconden naar 1,9 seconden door alleen dit attribuut toe te voegen.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

Een gepreloade afbeelding krijgt nog steeds standaardprioriteit tenzij je deze expliciet verhoogt. Het combineren van rel="preload" met fetchpriority="high" op zowel de link tag als het img element geeft de browser het duidelijkst mogelijke signaal. Voor meer informatie over hoe browsers beslissen wat ze eerst downloaden, zie de complete gids voor resource prioritering.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

De adoptie van fetchpriority="high" groeide van 0,03% van de mobiele sites in 2022 naar 17,3% in 2025, grotendeels dankzij de toevoeging door WordPress aan de core. Als je CMS dit niet automatisch instelt, voeg het dan zelf toe.

Hoe preload je de Largest Contentful Paint afbeelding

Het preloaden van de LCP afbeelding is eenvoudig. Er zijn slechts 3 stappen nodig:

1. Bepaal het LCP element: Voer een Lighthouse audit uit en controleer het Largest Contentful Paint element. Zorg ervoor dat het LCP element inderdaad een afbeelding is!
2. Controleer op responsieve afbeeldingsformaten. Als je responsieve afbeeldingen gebruikt, moet je al die afbeeldingsformaten toevoegen aan de srcset van de preload tag. Anders preloaden we de verkeerde afbeelding. Dat zal de pagina alleen maar vertragen.
3. Voeg de preload tag toe. Het enige dat nog rest is het toevoegen van de preload tag.

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

De imagesizes waarde moet overeenkomen met het sizes attribuut op je <img> element. Als je afbeelding op de helft van de viewportbreedte wordt weergegeven, gebruik dan imagesizes="50vw". Als je dit fout doet, preloadt de browser de verkeerde afbeeldingsvariant.

Preload alleen de LCP afbeelding. Als je te veel resources preloadt, verdun je de prioriteitsverhoging en kan de browser niet onderscheiden wat het belangrijkst is. Eén preload voor de LCP afbeelding is alles wat je nodig hebt. Voor een nog agressievere aanpak kun je preloading combineren met 103 Early Hints om de download te starten voordat de HTML zelfs maar aankomt.

Preloading zorgt ervoor dat de afbeelding eerder wordt gedownload, maar de afbeelding zelf moet nog steeds geoptimaliseerd zijn. Serveer deze in een modern formaat zoals WebP of AVIF en in de juiste afmetingen. Zie afbeeldingen optimaliseren voor Core Web Vitals voor het volledige overzicht.

Preloading helpt alleen bij één onderdeel van de LCP-timing: de vertraging voordat de afbeelding begint te downloaden. Als je Time to First Byte langzaam is, kan geen enkele hoeveelheid preloading dat compenseren. De preload tag staat in de HTML, dus de browser moet eerst de HTML ontvangen. Controleer je TTFB voordat je preload hints toevoegt.

Hoe preload je de Largest Contentful Paint afbeelding in WordPress

Het preloaden van de Largest Contentful Paint afbeelding in WordPress is helemaal niet moeilijk. Meestal is de Largest Contentful Paint afbeelding de uitgelichte afbeelding van een blogpost of pagina. Met slechts een paar regels code kunnen we de URL en srcset van de uitgelichte afbeelding ophalen en toevoegen aan de head van de pagina.

Voeg deze code direct toe na het title element in het header.php bestand van je huidige template.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>