Die Fetch Priority API gibt die relative Priorität von Ressourcen für den Browser an. Damit lassen sich optimale Ladezeiten erzielen und Core Web Vitals verbessern.
Wenn ein Browser eine Webseite parst und Ressourcen wie Bilder, Skripts oder CSS erkennt und herunterlädt, wird ihm ein Abruf-priority zugewiesen, damit er sie in einer optimalen Reihenfolge herunterladen kann. Die Priorität einer Ressource hängt in der Regel davon ab, worum es sich im Dokument handelt und wo sie sich befindet. Beispiel: Bilder im Darstellungsbereich können die Priorität High haben. Die Priorität für frühzeitig geladene, das Rendering blockierende CSS mit <link>s im <head> kann Very High sein. Browser sind ziemlich gut im Zuweisen von Prioritäten, die gut funktionieren, aber nicht in allen Fällen optimal sind.
Auf dieser Seite werden die Fetch Priority API und das HTML-Attribut fetchpriority erläutert, mit denen Sie auf die relative Priorität einer Ressource (high oder low) hinweisen können. Mit der Abrufpriorität können Sie die Core Web Vitals optimieren.
Zusammenfassung
Die Abrufpriorität kann in folgenden Bereichen hilfreich sein:
- Du kannst die Priorität des LCP-Bildes erhöhen, indem du
fetchpriority="high"für das Bildelement angibst, damit der LCP früher stattfindet. - Die Priorität von
async-Skripts wird erhöht, wobei eine bessere Semantik als beim aktuellen häufigsten Hack verwendet wird (<link rel="preload">für das Skriptasynceinfügen). - Die Priorität von Late-Body-Skripten wird verringert, um eine bessere Sequenzierung mit Bildern zu ermöglichen.
In der Vergangenheit hatten Entwickler mit Preload und Preconnect bisher nur begrenzten Einfluss auf die Ressourcenpriorität. Mit der Funktion „Vorabladen“ können Sie den Browser frühzeitig über kritische Ressourcen informieren, die Sie laden möchten, bevor sie automatisch erkannt werden. Dies ist besonders nützlich für Ressourcen, die schwerer zu finden sind, wie Schriftarten in Stylesheets, Hintergrundbilder oder aus einem Skript geladene Ressourcen. Mithilfe von Preconnect können Sie Verbindungen zu ursprungsübergreifenden Servern aufwärmen und Messwerte wie Zeit bis zum ersten Byte verbessern. Dies ist nützlich, wenn Sie den Ursprung, aber nicht unbedingt die genaue URL einer Ressource kennen, die benötigt wird.
Die Abrufpriorität ergänzt diese Ressourcenhinweise. Es ist ein Markup-basiertes Signal, das über das Attribut fetchpriority verfügbar ist, mit dem Entwickler die relative Priorität einer bestimmten Ressource angeben können. Sie können diese Hinweise auch über JavaScript und die Fetch API mit der Eigenschaft priority nutzen, um die Priorität von Ressourcenabrufen für Daten zu beeinflussen. Die Abrufpriorität kann auch das Vorabladen ergänzen. Nehmen Sie ein Largest Contentful Paint-Bild auf, das, wenn es vorab geladen wird, weiterhin eine niedrige Priorität hat. Wenn es von anderen frühen Ressourcen mit niedriger Priorität zurückgezogen wird, kann die Verwendung von Abrufpriorität helfen, wie schnell das Bild geladen wird.
Ressourcenpriorität
Die Reihenfolge des Ressourcendownloads hängt von der Priorität ab, die dem Browser für jede Ressource auf der Seite zugewiesen wurde. Folgende Faktoren können die Berechnungslogik der Priorität beeinflussen:
- Der Ressourcentyp, z. B. CSS, Schriftarten, Skripts, Bilder und Ressourcen von Drittanbietern
- Der Ort oder die Reihenfolge, in der das Dokument auf Ressourcen verweist.
- Gibt an, ob die Attribute
asyncoderdeferin Skripts verwendet werden.
In der folgenden Tabelle sehen Sie, wie Chrome die meisten Ressourcen priorisiert und anordnet:
| In Layoutblocking-Phase laden | Laden eines Stücks in der Layoutblocking-Phase | ||||
|---|---|---|---|---|---|
| Priorität Blinken |
VeryHigh | Hoch | Mittel | Niedrig | VeryLow |
| Priorität für Entwicklertools |
Höchste | Hoch | Mittel | Niedrig | Niedrigste |
| Hauptressource | |||||
| Preisvergleichsportal (früher**) | Preisvergleichsportal (später**) | CSS (nicht übereinstimmende Medien***) | |||
| Script (zu früh** oder nicht aus dem Vorabladen des Scanners) | Script (später**) | Script (asynchron) | |||
| Schriftart | Schriftart (rel=preload) | ||||
| Importieren | |||||
| Bild (im Darstellungsbereich) | Bild (erste 5 Bilder > 10.000 px2) | Bild | |||
| Medien (Video/Audio) | |||||
| Prefetch | |||||
| XSL | |||||
| XHR (Synchronisierung) | XHR/Abrufen* (asynchron) | ||||
Der Browser lädt Ressourcen mit derselben berechneten Priorität in der Reihenfolge herunter, in der sie erkannt werden. Sie können die Priorität prüfen, die verschiedenen Ressourcen beim Laden einer Seite zugewiesen ist. Rufen Sie dazu den Tab Netzwerk in den Chrome-Entwicklertools auf. Fügen Sie die Spalte Priority (Priorität) hinzu, indem Sie mit der rechten Maustaste auf die Tabellenüberschriften klicken und das Häkchen setzen.
type = "font" auf der Nachrichtenseite der BBC
type = "script" auf der Nachrichtenseite der BBC.Wenn sich Prioritäten ändern, können Sie sowohl die anfängliche als auch die letzte Priorität in der Einstellung Zeilen für große Anfragen oder in einer Kurzinfo sehen.
Wann benötigen Sie möglicherweise die Abrufpriorität?
Sie kennen jetzt die Priorisierungslogik des Browsers und können nun die Downloadreihenfolge der Seite anpassen, um die Leistung und die Core Web Vitals zu optimieren. Hier sind einige Beispiele für Änderungen, die Sie ändern können, um die Priorität von Ressourcendownloads zu beeinflussen:
- Platzieren Sie Ressourcen-Tags wie
<script>und<link>in der Reihenfolge, in der sie vom Browser heruntergeladen werden sollen. Ressourcen mit derselben Priorität werden im Allgemeinen in der Reihenfolge geladen, in der sie erkannt wurden. - Verwenden Sie den
preload-Ressourcenhinweis, um erforderliche Ressourcen früher herunterzuladen, insbesondere für Ressourcen, die vom Browser nicht ohne Weiteres entdeckt werden können. - Verwenden Sie
asyncoderdefer, um Skripts herunterzuladen, ohne andere Ressourcen zu blockieren. - Lazy Loading von „Below the fold“-Inhalten, damit der Browser die verfügbare Bandbreite für wichtigere „above the fold“-Ressourcen nutzen kann.
Mit diesen Verfahren können Sie die Prioritätsberechnung des Browsers steuern und so die Leistung und die Core Web Vitals verbessern. Wenn beispielsweise ein kritisches Hintergrundbild vorab geladen wird, kann es viel früher erkannt werden. Dadurch wird der Largest Contentful Paint (LCP) verbessert.
Manchmal reichen diese Handles nicht aus, um Ressourcen für Ihre Anwendung optimal zu priorisieren. Hier sind einige Szenarien, in denen die Abrufpriorität hilfreich sein könnte:
- Sie haben mehrere „Above the fold“-Bilder, aber nicht alle sollten die gleiche Priorität haben. In einem Bilderkarussell benötigt beispielsweise nur das erste sichtbare Bild eine höhere Priorität. Die anderen Bilder, die normalerweise außerhalb des sichtbaren Bereichs sind, können anfangs auf eine niedrigere Priorität gesetzt werden.
- Bilder im Darstellungsbereich beginnen normalerweise mit der Priorität
Low. Sobald das Layout fertig ist, erkennt Chrome, dass sie sich im Darstellungsbereich befinden, und erhöht ihre Priorität. Dadurch dauert das Laden kritischer Bilder, wie Hero-Images, in der Regel deutlich länger. Wenn du im Markup die Abrufpriorität angibst, wird das Bild mit der PrioritätHighgestartet und viel früher geladen. Um dies etwas zu automatisieren, werden die ersten fünf größeren Bilder von Chrome auf die PrioritätMediumgesetzt. Eine explizitefetchpriority="high"wäre jedoch noch besser.
Das Vorabladen ist weiterhin erforderlich, damit LCP-Bilder, die als CSS-Hintergründe enthalten sind, frühzeitig erkannt werden. Um die Priorität deiner Hintergrundbilder zu erhöhen, fügefetchpriority='high'beim Vorabladen hinzu. - Wenn Sie Skripts als
asyncoderdeferdeklarieren, wird der Browser angewiesen, sie asynchron zu laden. Wie in der Prioritätstabelle gezeigt, wird diesen Skripts jedoch auch die Priorität "Niedrig" zugewiesen. Sie können deren Priorität erhöhen und gleichzeitig einen asynchronen Download sicherstellen, insbesondere bei Skripts, die für die Nutzererfahrung sehr wichtig sind. - Wenn Sie die JavaScript
fetch()API verwenden, um Ressourcen oder Daten asynchron abzurufen, weist der Browser ihr die PrioritätHighzu. Möglicherweise möchten Sie einige Ihrer Abrufe mit niedrigerer Priorität ausführen, insbesondere wenn Sie Hintergrund-API-Aufrufe mit API-Aufrufen mischen, die auf Nutzereingaben reagieren. Kennzeichnen Sie die Hintergrund-API-Aufrufe mit der PrioritätLowund die interaktiven API-Aufrufe mit der PrioritätHigh. - Der Browser weist CSS und Schriftarten die Priorität
Highzu, aber einige dieser Ressourcen sind möglicherweise wichtiger als andere. Sie können die Abrufpriorität verwenden, um die Priorität nicht kritischer Ressourcen zu verringern. Hinweis: Frühes CSS blockiert das Rendering, sollte daher normalerweise die PrioritätHighhaben.
Das Attribut fetchpriority
Verwenden Sie das HTML-Attribut fetchpriority, um die Downloadpriorität für Ressourcentypen wie CSS, Schriftarten, Skripts und Bilder anzugeben, wenn sie mit link-, img- oder script-Tags heruntergeladen werden. Folgende Werte sind möglich:
high: Die Ressource hat eine höhere Priorität und Sie möchten, dass der Browser sie höher als gewöhnlich priorisiert, sofern dies nicht durch die Heuristik des Browsers verhindert wird.low: Die Ressource hat eine niedrigere Priorität und Sie möchten, dass der Browser ihr eine niedrigere Priorität einräumt, auch wenn die Heuristik dies zulässt.auto: Der Standardwert, bei dem der Browser die geeignete Priorität auswählen kann.
Im Folgenden findest du einige Beispiele für die Verwendung des fetchpriority-Attributs im Markup sowie der skriptäquivalenten priority-Property.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
Auswirkungen der Browserpriorität und fetchpriority
Sie können das Attribut fetchpriority auf verschiedene Ressourcen anwenden, wie in der folgenden Tabelle gezeigt, um die berechnete Priorität zu erhöhen oder zu verringern. fetchpriority="auto" (◉) in jeder Zeile markiert die Standardpriorität für diesen Ressourcentyp. (auch als Google-Dokument verfügbar).
| In Layoutblocking-Phase laden | Ein Element nach dem anderen in der Layoutblockierungsphase laden | ||||
|---|---|---|---|---|---|
| Priorität Blinken |
VeryHigh | Hoch | Mittel | Niedrig | VeryLow |
| Priorität für Entwicklertools |
Höchste | Hoch | Mittel | Niedrig | Niedrigste |
| Hauptressource | ◉ | ||||
| Preisvergleichsportal (früher**) | ⬆◉ | ⬇ | |||
| Preisvergleichsportal (später**) | ⬆ | ◉ | ⬇ | ||
| CSS (nicht übereinstimmende Medien***) | ⬆*** | ◉⬇ | |||
| Script (zu früh** oder nicht aus dem Vorabladen des Scanners) | ⬆◉ | ⬇ | |||
| Script (später**) | ⬆ | ◉ | ⬇ | ||
| Script (asynchron/verzögern) | ⬆ | ◉⬇ | |||
| Schriftart | ◉ | ||||
| Schriftart (rel=preload) | ⬆◉ | ⬇ | |||
| Importieren | ◉ | ||||
| Bild (im Darstellungsbereich – nach Layout) | ⬆◉ | ⬇ | |||
| Bild (erste 5 Bilder > 10.000 px2) | ⬆ | ◉ | ⬇ | ||
| Bild | ⬆ | ◉⬇ | |||
| Medien (Video/Audio) | ◉ | ||||
| XHR (Synchronisierung) – eingestellt | ◉ | ||||
| XHR/Abrufen* (asynchron) | ⬆◉ | ⬇ | |||
| Prefetch | ◉ | ||||
| XSL | ◉ | ||||
fetchpriority legt die relative Priorität fest. Das bedeutet, dass die Standardpriorität um einen angemessenen Betrag erhöht oder verringert wird, anstatt die Priorität explizit auf High oder Low festzulegen. Das führt häufig zur Priorität High oder Low, aber nicht immer. Beispiel: Kritisches CSS mit fetchpriority="high" behält die Priorität „Sehr hoch“/„Höchste“ bei. Wenn Sie fetchpriority="low" für diese Elemente verwenden, bleibt die Priorität „Hoch“ erhalten. In keinem dieser Fälle muss die Priorität ausdrücklich auf High oder Low festgelegt werden.
Anwendungsfälle
Verwenden Sie das Attribut fetchpriority, wenn Sie dem Browser einen zusätzlichen Hinweis darüber geben möchten, mit welcher Priorität eine Ressource abgerufen werden soll.
Priorität des LCP-Bilds erhöhen
Sie können fetchpriority="high" angeben, um die Priorität des LCP oder anderer kritischer Images zu erhöhen.
<img src="lcp-image.jpg" fetchpriority="high">
Im folgenden Vergleich sehen Sie die Google Flüge-Seite mit einem LCP-Hintergrundbild, das mit und ohne Abrufpriorität geladen wird. Mit der Priorität „Hoch“ verbesserte sich der LCP von 2,6 s auf 1,9 s.
Priorität von Bildern verringern, die ohne Scrollen sichtbar sind
Verwenden Sie fetchpriority="low", um die Priorität von Bildern ohne Scrollen sichtbar zu verringern, die nicht sofort wichtig sind, z. B. Bilder, die nicht auf dem Bildschirm zu sehen sind, z. B. Bilder in einem Bilderkarussell.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
Die Bilder 2 bis 4 befinden sich zwar außerhalb des Darstellungsbereichs, werden aber möglicherweise als „nah genug“ angesehen, damit sie auf high gesetzt und auch geladen werden, wenn ein load=lazy-Attribut hinzugefügt wird. Daher ist fetchpriority="low" die richtige Lösung dafür.
In einem früheren Experiment mit der Oodle App haben wir dies verwendet, um die Priorität von Bildern zu verringern, die beim Laden nicht angezeigt werden. Die Seitenladezeit wurde um 2 Sekunden verkürzt.
Priorität vorab geladener Ressourcen verringern
Sie können ihre Priorität reduzieren, um zu verhindern, dass vorab geladene Ressourcen mit anderen kritischen Ressourcen konkurrieren. Verwenden Sie dieses Verfahren mit Bildern, Skripts und CSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">
<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
Skripts neu festlegen
Wenn Ihre Seite interaktiv sein muss, sollten sie schnell geladen werden. Andere, kritischere Ressourcen, die das Rendering blockieren, sollten jedoch nicht blockiert werden. Sie können sie als async mit hoher Priorität markieren.
<script src="async_but_important.js" async fetchpriority="high"></script>
Sie können ein Script nicht als async markieren, wenn es bestimmte DOM-Zustände benötigt. Wenn sie jedoch später auf der Seite ausgeführt werden, können Sie sie mit einer niedrigeren Priorität laden:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Dadurch wird der Parser weiterhin blockiert, wenn dieses Skript erreicht wird, Inhalte davor werden jedoch priorisiert.
Wenn das ausgefüllte DOM erforderlich ist, können Sie alternativ das Attribut defer (das der Reihe nach nach DOMContentLoaded ausgeführt wird) oder auch async unten auf der Seite verwenden.
Priorität für nicht kritische Datenabrufe senken
Der Browser führt fetch mit einer hohen Priorität aus. Wenn mehrere Abrufe gleichzeitig ausgelöst werden können, können Sie die hohe Standardpriorität für die wichtigeren Datenabrufe verwenden und die Priorität weniger kritischer Daten herabsetzen.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
Hinweise zur Implementierung der Priorität abrufen
Die Abrufpriorität kann in bestimmten Anwendungsfällen die Leistung verbessern. Beachten Sie jedoch Folgendes, wenn Sie die Abrufpriorität verwenden:
- Das Attribut
fetchpriorityist ein Hinweis, keine Anweisung. Der Browser versucht, die Einstellung des Entwicklers zu respektieren, kann aber auch seine Einstellungen für die Ressourcenpriorität anwenden, um Konflikte zu lösen. Verwechseln Sie die Abrufpriorität nicht mit dem Vorabladen:
- Das Vorabladen ist ein obligatorischer Abruf, kein Hinweis.
- Durch das Vorabladen erkennt der Browser eine Ressource frühzeitig, ruft die Ressource jedoch mit der Standardpriorität ab. Umgekehrt trägt die Abrufpriorität nicht zur Auffindbarkeit bei, aber Sie können damit die Abrufpriorität erhöhen oder verringern.
- Häufig ist es einfacher, die Auswirkungen eines Vorabladevorgangs zu beobachten und zu messen als die Auswirkungen einer Prioritätsänderung.
Die Abrufpriorität kann Vorabladevorgänge ergänzen, indem sie den Detaillierungsgrad der Priorisierung erhöht. Wenn Sie bereits ein Vorabladen als eines der ersten Elemente im
<head>für ein LCP-Bild angegeben haben, verbessert die Abrufprioritäthighden LCP möglicherweise nicht wesentlich. Wenn das Vorabladen jedoch nach dem Laden anderer Ressourcen erfolgt, kann der LCP mit der Abrufprioritäthighweiter verbessert werden. Wenn ein wichtiges Bild ein CSS-Hintergrundbild ist, laden Sie es vorab mitfetchpriority = "high".Verbesserungen der Ladezeit durch Priorisierung sind in Umgebungen, in denen mehr Ressourcen um die verfügbare Netzwerkbandbreite konkurrieren, relevanter. Dies tritt häufig bei HTTP/1.x-Verbindungen auf, bei denen keine parallelen Downloads möglich sind, oder bei HTTP/2- oder HTTP/3-Verbindungen mit niedriger Bandbreite. In diesen Fällen kann die Priorisierung helfen, Engpässe zu beheben.
CDNs implementieren die HTTP/2-Priorisierung nicht einheitlich. Dies gilt auch für HTTP/3. Selbst wenn der Browser die Priorität von der Abrufpriorität übermittelt, ordnet das CDN Ressourcen möglicherweise nicht in der angegebenen Reihenfolge neu zu. Dies erschwert das Testen der Abrufpriorität. Die Prioritäten werden sowohl intern im Browser als auch mit Protokollen angewendet, die die Priorisierung unterstützen (HTTP/2 und HTTP/3). Es empfiehlt sich dennoch, die Abrufpriorität nur für die interne Browserpriorisierung unabhängig vom CDN- oder Ursprungssupport zu verwenden, da sich Prioritäten häufig ändern, wenn der Browser Ressourcen anfordert. Beispielsweise werden Ressourcen mit niedriger Priorität wie Bilder oft nicht angefordert, während der Browser wichtige
<head>-Elemente verarbeitet.Möglicherweise können Sie die Abrufpriorität nicht als bewährte Methode in Ihren ersten Entwurf einführen. Später im Entwicklungszyklus können Sie die Prioritäten den verschiedenen Ressourcen auf der Seite zuweisen. Wenn sie nicht Ihren Erwartungen entsprechen, können Sie zur weiteren Optimierung die Abrufpriorität einführen.
Entwickler sollten das Vorabladen für den vorgesehenen Zweck verwenden, um Ressourcen, die vom Parser nicht erkannt werden (Schriftarten, Importe, LCP-Hintergrundbilder), vorab zu laden. Die Platzierung des preload-Hinweises wirkt sich darauf aus, wann die Ressource vorab geladen wird.
Bei der Abrufpriorität legen Sie fest, wie die Ressource abgerufen werden soll.
Tipps zur Verwendung von Vorabladevorgängen
Beachten Sie bei der Verwendung von Vorabladevorgängen Folgendes:
- Wenn Sie eine Vorabladung in HTTP-Header einschließen, wird sie vor allem anderen in der Ladereihenfolge platziert.
- Im Allgemeinen werden die Vorabladevorgänge in der Reihenfolge geladen, in der sie der Parser für alles mit der Priorität
Mediumoder höher erhält. Seien Sie vorsichtig, wenn Sie Vorabladevorgänge am Anfang Ihres HTML-Codes einfügen. - Das Vorabladen von Schriftarten funktioniert am besten gegen das Ende des Kopfes oder den Textanfang.
- Vorabladevorgänge (dynamisches
import()odermodulepreload) sollten nach dem Script-Tag ausgeführt werden, das den Import benötigt. Das Script muss also zuerst geladen oder geparst werden, damit es ausgewertet werden kann, während die Abhängigkeiten geladen werden. - Vorabladevorgänge haben standardmäßig die Priorität
LowoderMedium. Sortieren Sie sie nach asynchronen Skripts und anderen Tags mit niedriger oder niedriger Priorität.
Verlauf
Die Abrufpriorität wurde 2018 erstmals in Chrome als Ursprungstest getestet und 2021 noch einmal mit dem Attribut importance. Sie nannte sich damals Prioritätshinweise. Die Benutzeroberfläche wurde inzwischen im Rahmen des Webstandards in fetchpriority für HTML und priority für die Fetch API von JavaScript geändert. Zur Verwirrung wird diese jetzt als API-Abrufpriorität bezeichnet.
Fazit
Entwickler sind sehr wahrscheinlich an der Abrufpriorität interessiert, da die Probleme beim Vorabladen behoben wurden und der Fokus auf Core Web Vitals und LCP liegt. Es gibt jetzt zusätzliche Schalter, mit denen die bevorzugte Ladereihenfolge erreicht werden kann.