Wat is fetchpriority? Uitleg en gebruik voor SEO

Definitie

fetchpriority is een HTML-attribuut waarmee je de browser vertelt welke bestanden voorrang krijgen. Met fetchpriority="high" op je LCP-afbeelding laadt die eerder, wat je LCP kan verbeteren.

Wat doet fetchpriority?

De browser geeft elk bestand een prioriteit. CSS in de <head> krijgt hoog, afbeeldingen starten meestal laag. Vaak is je grootste afbeelding boven de vouw juist het LCP-element. Met fetchpriority corrigeer je die inschatting.

Er zijn drie waarden: high, low en auto (de standaard). Je kunt het attribuut zetten op <img>, <link> en <script>. Voor fetch() in JavaScript bestaat de optie priority. Het is een hint: de browser mag ervan afwijken.

Volgens web.dev wordt het ondersteund vanaf Chrome en Edge 102, Firefox 132 en Safari 17.2. web.dev noemt een test bij Google Flights waarin LCP daalde van 2,6 naar 1,9 seconden door de hero-afbeelding voorrang te geven. Dat is één test; jouw winst hangt af van hoeveel bestanden tegelijk om bandbreedte strijden.

Zo werkt het in Magento/Hyvä, Shopify en Laravel

In Hyvä zet je fetchpriority="high" op de hoofdafbeelding van de productpagina en de eerste banner op de homepage. Zorg dat die afbeelding niet ook loading="lazy" heeft. Bij een slider geef je de eerste slide high en de rest low.

In Shopify werk je in Liquid. Het image_tag-filter accepteert extra HTML-attributen, dus je kunt fetchpriority: 'high' meegeven aan de eerste afbeelding van een sectie. Controleer per sectie welke afbeelding echt het LCP-element is.

In Laravel zet je het attribuut direct in je Blade-template. Is het LCP-element een CSS-achtergrondafbeelding, dan heeft de browser die laat in beeld. Gebruik dan een preload met fetchpriority="high", of beter: maak er een <img> van.

Veelgemaakte fouten

- Alles op high zetten. Dan is er geen voorrang meer, en concurreren je afbeeldingen met CSS en scripts.

- fetchpriority="high" combineren met loading="lazy" op dezelfde afbeelding. Lazy loading stelt het laden uit tot de afbeelding in beeld komt; dat werkt tegen elkaar in.

- Denken dat fetchpriority hetzelfde is als preload. Preload helpt de browser een bestand eerder te vinden. fetchpriority verandert alleen de prioriteit van een bestand dat al gevonden is.

- Niet meten. Kijk in het Network-paneel van DevTools naar de kolom Priority, en in velddata naar je LCP.

LCP-afbeelding voorrang geven

<img src="/media/hero.webp" width="1200" height="600"
     alt="Nieuwe collectie wandelschoenen"
     fetchpriority="high">

<!-- Overige slides in een carousel -->
<img src="/media/slide-2.webp" alt="..." fetchpriority="low" loading="lazy">

Verder lezen

Gerelateerde begrippen

Preload en fetchpriority LCP (Largest Contentful Paint)Lazy loading Core Web Vitals WebP en AVIF Preconnect Render-blocking resources

Veelgestelde vragen

Welke afbeelding krijgt fetchpriority="high"?+

Alleen het LCP-element, meestal de grootste afbeelding boven de vouw. Op een productpagina is dat vaak de hoofdfoto, op een homepage de hero-banner. Controleer het met PageSpeed Insights of DevTools.

Werkt fetchpriority in alle browsers?+

Volgens web.dev in Chrome en Edge vanaf 102, Firefox vanaf 132 en Safari vanaf 17.2. Browsers die het niet kennen negeren het attribuut gewoon.

Moet ik fetchpriority of preload gebruiken?+

Staat de afbeelding als <img> in de HTML, dan volstaat fetchpriority. Wordt hij laat ontdekt, zoals een CSS-achtergrond, dan heb je preload nodig, eventueel met fetchpriority="high".

fetchpriority