fetchpriority ist ein HTML-Attribut, mit dem Entwickler dem Browser mitteilen, ob eine Ressource früh oder spät geladen werden soll. Der Browser behandelt den Wert als Hinweis und wägt ihn mit seinen eigenen Prioritäten ab. Laut MDN funktioniert das Attribut seit Oktober 2024 in allen aktuellen großen Browsern (Baseline 2024).
Werte und Elemente
Das Attribut kennt drei Werte. high fordert eine höhere Priorität, low eine niedrigere, auto ist der Standard ohne Präferenz. Laut MDN funktioniert es bei img, link und script. Es ergänzt rel="preload". Preload hilft dem Browser, eine Ressource früh zu entdecken, fetchpriority verändert die Priorität beim Laden.
Einsatz bei Core Web Vitals
Typisch ist fetchpriority="high" am Bild, das den Largest Contentful Paint (LCP) bildet. web.dev nennt außerdem low für Bilder in Karussells außerhalb des sichtbaren Bereichs und high für wichtige asynchrone Skripte.
MDN weist darauf hin, das Attribut sparsam zu verwenden. Zu viele Ressourcen mit hoher Priorität konkurrieren miteinander und können das Laden verschlechtern. Außerdem setzen CDNs die Priorisierung über HTTP/2 und HTTP/3 laut web.dev nicht einheitlich um. Ist das LCP-Element ein CSS-Hintergrundbild, empfiehlt web.dev, es per preload mit fetchpriority="high" vorzuladen.
Beispiel
<!-- Hauptbild der Seite, bestimmt den LCP -->
<img src="hero.jpg" fetchpriority="high" alt="Produktfoto">
<!-- Kleines Zählpixel, darf warten -->
<img src="tracker.gif" fetchpriority="low" alt="">
Quellen
- fetchpriority HTML attribute – MDN Web Docsdeveloper.mozilla.org
- Optimize resource loading with the Fetch Priority API – web.devweb.dev
- HTMLImageElement: fetchPriority-Eigenschaft – MDN Web Docs (Baseline 2024)developer.mozilla.org
Stand: