HTMLLinkElement: fetchPriority-Eigenschaft

Die fetchPriority-Eigenschaft der HTMLLinkElement-Schnittstelle stellt einen Hinweis für den Browser dar, wie er das Laden einer bestimmten Ressource im Verhältnis zu anderen Ressourcen desselben Typs priorisieren sollte. Sie spiegelt das fetchpriority-Attribut des entsprechenden <link>-Elements wider.

Mit der Eigenschaft kann ein Entwickler signalisieren, dass das frühzeitige Laden einer bestimmten Ressource im Ladeprozess mehr oder weniger Einfluss auf die Benutzererfahrung hat, als ein Browser vernünftigerweise bei der Zuweisung einer internen Priorität ableiten kann, insbesondere beim Vorladen von Ressourcen. Dies ermöglicht es dem Browser, die Priorität zu erhöhen oder zu verringern und die Ressource potenziell früher oder später zu laden, als er es sonst tun würde. Die Eigenschaft sollte sparsam eingesetzt werden, da übermäßige oder falsche Priorisierung die Leistung beeinträchtigen kann.

Die Ladepriorität kann verwendet werden, um das Vorladen zu ergänzen, indem ein Entwickler die Priorität einer Ressource vor weniger wichtigen Ressourcen erhöht, die standardmäßig mit höherer Priorität vorgeladen werden. Beispielsweise könnte ein bestimmtes Bild, das erheblich zum Größten inhaltsbezogenen Rendering (LCP) der Website beiträgt, so eingestellt werden, dass es vorgeladen wird und mit hoher Ladepriorität versehen wird.

Beachten Sie, dass sowohl die interne Priorität jeder Ladevorgang als auch der Einfluss von fetchPriority auf die Priorität vollständig vom Browser abhängen.

const preloadLink = document.createElement("link");
preloadLink.href = "my-image.jpg";
preloadLink.rel = "preload";
preloadLink.as = "image";
preloadLink.fetchPriority = "high";
document.head.appendChild(preloadLink);