Prioriteit voor afbeeldingsoptimalisatie

Browsers gebruiken heuristiek om laadprioriteiten toe te wijzen aan afbeeldingen, maar deze standaardinstellingen komen misschien niet altijd overeen met de Largest Contentful Paint (LCP) van je pagina.

Als je fetchpriority gebruikt voor een <img>-element, kun je het belang van een afbeelding expliciet aangeven aan de browser. Zo zorg je dat essentiële afbeeldingen sneller worden geladen, terwijl niet-essentiële afbeeldingen niet concurreren om bandbreedte.

Het kenmerk loading=lazy voorkomt dat afbeeldingen worden gedownload als ze ver genoeg buiten het scherm staan. Zo kun je afbeeldingen nog beter prioriteren.

Hoe wordt dit geïmplementeerd

1. De LCP-afbeelding bepalen: Bepaal welke afbeelding de meest waarschijnlijke kandidaat is voor de Largest Contentful Paint (meestal de hero-afbeelding bovenaan de pagina).
2. LCP-prioriteit verhogen: Voeg fetchpriority="high" toe aan het element <img> voor de LCP-kandidaat.
3. Geef niet-kritieke afbeeldingen een lagere prioriteit: Voor afbeeldingen die deel uitmaken van een secundaire UI of die alleen worden getoond na gebruikersinteractie (zoals megamenu's, modale vensters of carrouseldia's buiten het scherm), voeg je fetchpriority="low" toe.
4. Optimaliseer lazy loading: Gebruik nooit loading="lazy" voor de LCP-afbeelding. Voor standaardafbeeldingen onder de vouw is loading="lazy" voldoende om het verzoek uit te stellen totdat de gebruiker er dichtbij scrollt. Voeg geen fetchpriority="low" toe aan deze afbeeldingen, omdat u wilt dat ze met normale prioriteit worden geladen zodra de gebruiker ernaartoe scrollt. Reserveer fetchpriority="low" voor afbeeldingen die technisch gezien boven de vouw staan, maar niet meteen zichtbaar zijn (bijvoorbeeld verborgen carrouseldia's of megamenu's). Voor deze verborgen afbeeldingen is het ook acceptabel om loading="lazy" te gebruiken. De browser verwerkt de verzoektiming en respecteert de lage prioriteit.
5. Geef de voorkeur aan standaardprioriteiten: Als een afbeelding een normale laadprioriteit moet hebben, laat je het kenmerk fetchpriority helemaal weg in plaats van het in te stellen op auto. Dit is een stilistische conventie om je HTML overzichtelijker te houden terwijl je vertrouwt op de native heuristiek van de browser.

Voorbeeldcode

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Praktische tips

• VERPLICHT: Pas fetchpriority="high" altijd toe op de LCP-afbeelding.
• VERPLICHT: Gebruik fetchpriority="high" alleen voor maximaal 1-2 essentiële afbeeldingen om netwerkconflicten en verwatering van de prioriteitsboost te voorkomen.
• VERPLICHT: Gebruik fetchpriority="low" voor afbeeldingen die technisch gezien boven de vouw staan, maar in eerste instantie verborgen zijn (bijvoorbeeld verborgen carrouseldia's, afbeeldingen in megamenu's).
• VERPLICHT: Gebruik fetchpriority="low" niet voor standaardafbeeldingen onder de vouw die al loading="lazy" gebruiken. Deze afbeeldingen moeten met normale prioriteit worden geladen zodra ze in het kijkvenster komen.
• AANBEVOLEN: Gebruik geen fetchpriority="auto". Als je de standaardprioriteit wilt, laat je het kenmerk helemaal weg om je HTML overzichtelijk te houden.
• Combineer fetchpriority="high" NIET met loading="lazy".
• Gebruik het beëindigde kenmerk importance NIET. Deze is vervangen door fetchpriority en wordt door geen enkele browser ondersteund.
• Gebruik de beëindigde waarde loading="auto" NIET. Deze werd in eerste instantie ondersteund door Chrome, maar is verwijderd en wordt door geen enkele browser ondersteund.

Reservestrategie

Het kenmerk fetchpriority is een progressive enhancement voor het element <img>. Als een browser dit niet ondersteunt, wordt het kenmerk genegeerd en gebruikt de browser de standaard heuristiek voor prioriteit.