Preload Largest Contentful Paint image

Wat is preloading?

Preloading vertelt de browser om iets vroeg te downloaden, voordat de hoofdrendering begint. Het bestand is eerder klaar en blokkeert de render van de pagina niet. In LCP-timing termen vermindert preloading de Resource Load Delay: de tijd tussen het ontvangen van de HTML door de browser en het starten van het downloaden van de LCP image.

<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 image preloaden?

Afbeeldingen die zichtbaar zijn en in het 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 hij vaak andere bronnen zoals extern JavaScript of andere zichtbare afbeeldingen voorrang geven boven de LCP image.

Door dit gedrag begint het downloaden van de LCP image niet zo vroeg als je zou willen. Het preloaden van de Largest Contentful Paint image lost dit probleem op.

De cijfers bevestigen dit. Volgens het 2025 Web Almanac heeft 76% van de mobiele pagina's een afbeelding als LCP element. Toch preloadt slechts 2,1% van de pagina's die afbeelding daadwerkelijk. Dat is een enorme gemiste kans. Bovendien zijn veel LCP images 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 image de paginaprestaties?

Het preloaden van de LCP image maakt deze sneller beschikbaar voor rendering. Het resultaat: een betere LCP-score in zowel Lighthouse als velddata.

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

Preloading is nog belangrijker wanneer de LCP image niet de eerste afbeelding is die de browser downloadt. Dit gebeurt wanneer:

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

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

Gebruik fetchpriority="high" op de LCP image

Naast preloading moet je ook fetchpriority="high" toevoegen aan het LCP image element zelf. Dit vertelt de browser om deze afbeelding voorrang te geven boven andere bronnen. Een test op Google Flights toonde LCP-verbeteringen van 2,6 seconden naar 1,9 seconden alleen door 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 over hoe browsers beslissen wat ze eerst downloaden, zie de complete gids over resource prioritering.

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

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

Hoe preload je de Largest Contentful Paint Image

Het preloaden van de LCP image 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 responsive afbeeldingsformaten. Als je responsive 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 moet gebeuren is de preload tag toevoegen.

<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 viewport-breedte wordt weergegeven, gebruik dan imagesizes="50vw". Als dit niet klopt, preloadt de browser de verkeerde afbeeldingsvariant.

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

Preloading zorgt ervoor dat de afbeelding sneller begint te downloaden, maar de afbeelding zelf moet nog steeds geoptimaliseerd worden. Serveer deze in een modern formaat zoals WebP of AVIF en met de juiste afmetingen. Zie afbeeldingen optimaliseren voor Core Web Vitals voor het volledige overzicht.

Preloading helpt alleen bij één deel van de LCP-timing: de vertraging voordat de afbeelding begint te downloaden. Als je Time to First Byte traag is, zal 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 Image in WordPress

Het preloaden van de Largest Contentful Paint image in WordPress is helemaal niet moeilijk. Meestal is de Largest Contentful Paint Image de uitgelichte afbeelding voor 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 na het title element toe 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 } ?>