Signatur
Beschreibung
Die Eigenschaft fetchPriority spiegelt das HTML-Attribut fetchpriority eines <img>-Elements wider. Mit ihr sagst du dem Browser, wie wichtig ein Bild im Verhältnis zu anderen Ressourcen desselben Typs ist. Der Browser vergibt Prioritäten sonst selbst nach eigenen Regeln. Mit fetchPriority kannst du diese Regeln gezielt verschieben.
Am häufigsten nutzt man "high" für das LCP-Bild (Largest Contentful Paint), also etwa das große Titelbild oben auf der Seite. Browser laden Bilder anfangs meist mit niedriger Priorität, bis das Layout feststeht und klar ist, welche Bilder im sichtbaren Bereich liegen. Mit "high" fängt der Download sofort mit hoher Priorität an, und die Ladezeit des sichtbaren Hauptinhalts sinkt messbar. Umgekehrt eignet sich "low" für Bilder, die zwar im sichtbaren Bereich liegen, aber nicht wichtig sind, zum Beispiel die hinteren Folien eines Karussells.
Die Eigenschaft ist nur ein Hinweis: Der Browser muss sich nicht daran halten. Wenn du sie über JavaScript setzt, wirkt das nur, solange der Ladevorgang des Bildes noch nicht begonnen hat. Setze sie deshalb am besten, bevor du src oder srcset zuweist.
"high": Das Bild wird gegenüber anderen Bildern mit hoher Priorität geladen."low": Das Bild wird gegenüber anderen Bildern mit niedriger Priorität geladen."auto": Keine Vorgabe, der Browser entscheidet selbst. Das ist der Standardwert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "high" | "low" | "auto" | "auto" | Neuer Prioritätshinweis beim Setzen der Eigenschaft. Ungültige Werte werden als "auto" behandelt. |
Rückgabewert
"high", "low" oder "auto". Fehlt das Attribut oder ist es ungültig, wird "auto" zurückgegeben.Beispiele
Hohe Priorität für ein dynamisch eingefügtes Titelbild
const hero = new Image();
// Priorität VOR src setzen, damit der Hinweis beim Laden schon gilt
hero.fetchPriority = 'high';
hero.src = '/img/hero-1600.avif';
hero.alt = 'Sommerkollektion 2024';
hero.width = 1600;
hero.height = 900;
document.querySelector('.hero').append(hero);
console.log(hero.fetchPriority);
console.log(hero.getAttribute('fetchpriority'));Karussell: nur die erste Folie bevorzugen
// HTML: <div class="carousel"><img data-src="a.jpg"><img data-src="b.jpg"><img data-src="c.jpg"></div>
const slides = document.querySelectorAll('.carousel img');
slides.forEach((img, index) => {
img.fetchPriority = index === 0 ? 'high' : 'low';
img.src = img.dataset.src;
});
console.log([...slides].map((img) => img.fetchPriority));Wert auslesen, ungültige Werte und Feature-Erkennung
const img = document.createElement('img');
console.log(img.fetchPriority); // Attribut fehlt
img.setAttribute('fetchpriority', 'urgent'); // ungültiger Wert
console.log(img.fetchPriority);
const supported = 'fetchPriority' in HTMLImageElement.prototype;
console.log(`fetchPriority unterstützt: ${supported}`);// Wichtig · Fallstricke
- Zeitpunkt: Wenn du den Wert erst setzt, nachdem der Download schon begonnen hat, wirkt er meist nicht mehr. Setze ihn deshalb vor
srcbzw.srcset. Für Bilder im HTML ist das Attributfetchpriority="high"direkt im Markup der beste Weg, denn der Preload-Scanner des Browsers liest es sehr früh. - Groß- und Kleinschreibung: Die JavaScript-Eigenschaft heißt
fetchPriority(camelCase), das HTML-Attribut dagegenfetchpriority(alles klein). - Sparsam einsetzen: Wenn viele Bilder
"high"bekommen, hebt sich die Wirkung auf. Oft konkurrieren sie dann sogar mit wichtigem CSS oder JavaScript. In der Regel verdient nur ein einziges Bild pro Seite, das LCP-Bild, eine hohe Priorität. - Nicht mit
loading="lazy"kombinieren: Ein verzögert geladenes Bild wird erst angefordert, wenn es in die Nähe des sichtbaren Bereichs kommt."high"beschleunigt daran nichts. LCP-Bilder sollten niemalsloading="lazy"haben. - Kompatibilität: Unterstützt von Chrome/Edge ab 101, Safari ab 17.2 und Firefox ab 132. Ältere Browser ignorieren die Eigenschaft ohne Fehler, sie verbessert die Seite also schrittweise, ohne etwas zu brechen. In Chromium-Browsern kannst du die Wirkung in den DevTools im Netzwerk-Tab in der Spalte „Priority“ prüfen.