HTMLLinkElement.fetchPriority — Eigenschaft · JavaScript-Referenz

Signatur

HTMLLinkElement.fetchPriority

Beschreibung

Die Eigenschaft fetchPriority spiegelt das HTML-Attribut fetchpriority eines <link>-Elements wider. Sie ist ein Hinweis an den Browser, wie wichtig die Ressource im Vergleich zu anderen Ressourcen desselben Typs ist. Dazu gehören etwa ein Stylesheet gegenüber anderen Stylesheets oder ein vorgeladenes Bild gegenüber anderen Bildern. Der Browser kann den Hinweis beachten, ist dazu aber nicht verpflichtet.

Besonders nützlich ist die Eigenschaft zusammen mit rel="preload". So lässt sich etwa das LCP-Bild (Largest Contentful Paint) oder eine wichtige Schrift früh und mit hoher Priorität laden. Weniger wichtige Vorab-Ladevorgänge, z. B. Bilder für einen Karussell-Bereich weiter unten, bekommen dagegen "low".

Gültige Werte sind:

"high" – mit höherer Priorität als andere Ressourcen desselben Typs laden.
"low" – mit niedrigerer Priorität laden.
"auto" – keine Vorgabe, der Browser entscheidet (Standardverhalten).

Beim Lesen werden ungültige oder fehlende Werte als "auto" zurückgegeben. Beim Schreiben wird der String unverändert in das Attribut fetchpriority übernommen.

Parameter

Name	Typ	Default	Beschreibung
$value	"high" \| "low" \| "auto"	"auto"	Neuer Prioritätshinweis beim Setzen der Eigenschaft. Andere Strings werden zwar ins Attribut geschrieben, aber beim Lesen als `"auto"` behandelt.

Rückgabewert

Typ

string

Beschreibung

Einer der Werte "high", "low" oder "auto". Fehlt das Attribut oder ist es ungültig, wird "auto" zurückgegeben.

Beispiele

LCP-Bild dynamisch mit hoher Priorität vorladen

const link = document.createElement('link');
link.rel = 'preload';
link.as = 'image';
link.href = '/img/hero.webp';
link.fetchPriority = 'high'; // vor dem Einfügen setzen!
document.head.append(link);

console.log(link.fetchPriority);
console.log(link.getAttribute('fetchpriority'));

high high

Vorhandenen Wert auslesen und ungültige Werte

// <link id="main-css" rel="stylesheet" href="/main.css">
const css = document.querySelector('#main-css');
console.log(css.fetchPriority); // kein Attribut gesetzt

css.setAttribute('fetchpriority', 'urgent');
console.log(css.fetchPriority); // ungültiger Wert

auto auto

Unwichtige Preloads herabstufen mit Feature-Erkennung

const supportsPriority = 'fetchPriority' in HTMLLinkElement.prototype;

const preloadImage = (url, priority = 'auto') => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'image';
  link.href = url;
  if (supportsPriority) link.fetchPriority = priority;
  document.head.append(link);
  return link;
};

// Karussell-Bilder weiter unten: niedrige Priorität
['/img/slide-2.webp', '/img/slide-3.webp']
  .forEach((url) => preloadImage(url, 'low'));

console.log(supportsPriority);

true

// Wichtig · Fallstricke

Nur ein Hinweis: Browser können fetchPriority ignorieren. Die Priorität gilt außerdem nur im Vergleich zu Ressourcen desselben Typs. Ein "low"-Stylesheet blockiert das Rendern trotzdem.
Zeitpunkt: Setze den Wert, bevor das Element ins Dokument eingefügt wird. Wird er erst danach geändert, hat das in der Regel keinen Einfluss auf einen bereits gestarteten Abruf.
Sparsam einsetzen: Wenn zu viele Ressourcen "high" bekommen, ist der Effekt weg. Kandidaten sind typischerweise das LCP-Bild und kritische Schriften.
Schreibweise: Die JavaScript-Eigenschaft heißt fetchPriority (camelCase), das HTML-Attribut fetchpriority (klein). Die frühere Bezeichnung importance ist veraltet.
Kompatibilität: Chromium ab Version 102, Safari ab 17.2, Firefox ab 132. Ältere Browser ignorieren die Eigenschaft ohne Fehler. Zur Feature-Erkennung eignet sich 'fetchPriority' in HTMLLinkElement.prototype.

Siehe auch

HTMLLinkElement.integrity HTMLLinkElement.referrerPolicy HTMLLinkElement.crossOrigin HTMLLinkElement.relList HTMLLinkElement.blocking