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 analysiert und Ressourcen wie Bilder, Skripts oder CSS erkennt und herunterlädt, wird ihm eine Abruf-priority zugewiesen, um Ressourcen in einer optimalen Reihenfolge herunterzuladen. Diese Prioritäten können von der Art der Ressource und deren Position im Dokument abhängen. Beispiel: Bilder im Darstellungsbereich können die Priorität High haben, während die Priorität für frühzeitig geladene, das Rendering blockierende CSS über <link>s im <head> Very High sein könnte. Browser sind ziemlich gut im Zuweisen von Prioritäten, die gut funktionieren, aber nicht in allen Fällen optimal sind.
In diesem Artikel 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. Die Abrufpriorität kann dabei helfen, die Core Web Vitals zu 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. - Erhöhen Sie die Priorität von
async-Skripts mit einer besseren Semantik als beim aktuellen, häufig verwendeten Hack (ein<link rel="preload">für dasasync-Skript einfügen). - Verringern Sie die Priorität von Late-Body-Skripts, 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. Die Abrufpriorität ergänzt diese Ressourcenhinweise, es ist jedoch wichtig zu verstehen, wo sie alle hineinpassen. Mit der Funktion „Vorabladen“ können Sie den Browser über kritische Ressourcen informieren, die Sie laden möchten, bevor sie auf natürliche Weise entdeckt werden. Dies ist besonders nützlich bei Ressourcen, die nicht leicht zu finden sind, wie Schriftarten in Stylesheets, Hintergrundbilder oder aus einem Skript geladene Ressourcen. Preconnect hilft beim Aufwärmen von Verbindungen zu ursprungsübergreifenden Servern und kann zur Verbesserung von Messwerten wie Time-to-first-byte beitragen. Es ist nützlich, wenn Sie einen Ursprung, aber nicht unbedingt die genaue URL einer benötigten Ressource kennen.
Die Abrufpriorität ist ein Markup-basiertes Signal (verfügbar über das Attribut fetchpriority), 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 priority-Eigenschaft 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.
Die Abrufpriorität ist ab Chrome 101 verfügbar.
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. Verschiedene Faktoren können die Berechnungslogik für die Priorität beeinflussen. Beispiel:
- CSS, Schriftarten, Skripte, Bilder und Ressourcen von Drittanbietern haben unterschiedliche Prioritäten.
- Der Ort oder die Reihenfolge, in der Sie auf Ressourcen im Dokument verweisen, wirkt sich auch auf die Priorität von Ressourcen aus.
- Der Ressourcenhinweis
preloadhilft dem Browser, eine Ressource schneller zu finden und auf diese Weise zu laden, bevor das Dokument geladen wird. Er wirkt sich auf die Priorität aus. - Änderungen bei der Prioritätsberechnung für
async- oderdefer-Skripts.
In der folgenden Tabelle werden diese Faktoren berücksichtigt, um zu zeigen, wie die meisten Ressourcen derzeit in Chrome priorisiert und geordnet werden.
| 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 wurden. 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. (Stellen Sie sicher, dass Sie die Prioritätsspalte einfügen, indem Sie mit der rechten Maustaste auf die Tabellenüberschriften klicken.)
type = "font" auf der Nachrichtenseite der BBC
Wenn sich Prioritäten ändern, können Sie mit der Einstellung Big Request Rows (Zeilen für große Anfragen) sowohl die anfängliche als auch die letzte Priorität ansehen. Dasselbe wird unabhängig von der Einstellung Big Request Rows in einer Kurzinfo angezeigt.
Wann benötigen Sie die Abrufpriorität?
Wenn Sie die Priorisierungslogik des Browsers kennen, können Sie die Reihenfolge der Downloads anpassen. Sie können
- Platzieren Sie Ressourcen-Tags wie
<script>und<link>abhängig von der Reihenfolge, in der Sie sie herunterladen möchten. 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 müssen die gleiche Priorität haben. In einem Bilderkarussell benötigt beispielsweise nur das erste sichtbare Bild eine höhere Priorität als die anderen.
- Hero-Images im Darstellungsbereich haben normalerweise die Priorität „Niedrig“. Beachten Sie, dass in Chrome 117 die ersten fünf großen Bilder auf „Mittel“ gesetzt werden. In diesem Fall kann jedoch Ihr Hero-Image enthalten sein. Sobald das Layout fertig ist, erkennt Chrome, dass sie sich im Darstellungsbereich befinden, und erhöht ihre Priorität. Dadurch dauert das Laden des Bildes in der Regel deutlich länger. Wenn Sie im Markup die Abrufpriorität angeben, wird das Bild mit der Priorität „Hoch“ gestartet und viel früher geladen.
Hinweis: Das Vorabladen ist weiterhin erforderlich, um LCP-Bilder, die als CSS-Hintergründe enthalten sind, frühzeitig zu entdecken. Sie können sie mit der Abrufpriorität kombinieren, indem Sie beim Vorabladen die Prioritätfetchpriority='high'angeben. Andernfalls wird für Bilder weiterhin die Priorität „Niedrig“ oder „Mittel“ festgelegt. - Wenn Sie Skripts als
asyncoderdeferdeklarieren, wird der Browser angewiesen, sie asynchron zu laden. Wie in der vorherigen Tabelle gezeigt, haben diese Skripts jedoch auch die Priorität "Niedrig". Sie können diese Priorität erhöhen und gleichzeitig für asynchrone Downloads sorgen. Dies gilt insbesondere für Skripts, die für die Nutzerfreundlichkeit wichtig sind. - Mit der JavaScript API
fetch()können Sie Ressourcen oder Daten asynchron abrufen. Dem Abruf wird vom Browser die Priorität „Hoch“ zugewiesen. Es kann Situationen geben, in denen Sie nicht möchten, dass alle Abrufe mit der Priorität „Hoch“ ausgeführt werden, und stattdessen eine andere Abrufpriorität verwenden. Dies kann hilfreich sein, wenn Hintergrund-API-Aufrufe ausgeführt und mit API-Aufrufen gemischt werden, die auf Nutzereingaben reagieren, z. B. mit der automatischen Vervollständigung. Die Hintergrund-API-Aufrufe können mit der Priorität „Niedrig“ und die interaktiven API-Aufrufe mit der Priorität „Hoch“ gekennzeichnet werden. - Der Browser weist CSS und Schriftarten die Priorität „Hoch“ zu, aber alle diese Ressourcen sind für den LCP möglicherweise nicht gleich wichtig oder erforderlich. Sie können die Abrufpriorität verwenden, um die Priorität einiger dieser Ressourcen zu verringern.
Das Attribut fetchpriority
Sie können eine Abrufpriorität mithilfe des HTML-Attributs fetchpriority angeben. Sie können das Attribut mit den Tags link, img und script verwenden. Mit dem Attribut können Sie die Priorität für Ressourcentypen wie CSS, Schriftarten, Skripts und Bilder angeben, wenn diese mit den unterstützten Tags heruntergeladen werden.
Für das Attribut fetchpriority kann einer von drei Werten angegeben werden:
high: Sie stufen der Ressource eine hohe Priorität ein und möchten, dass der Browser sie priorisiert, solange die Heuristik des Browsers dies nicht verhindert.low: Sie stufen der Ressource eine niedrige Priorität ein und möchten, dass der Browser ihr eine niedrigere Priorität einräumt, wenn die Heuristik dies zulässt.auto: Das ist der Standardwert, für den Sie keine Präferenz haben. Die Priorität wird vom Browser festgelegt.
Hier sind einige Beispiele für die Verwendung des fetchpriority-Attributs im Markup und der skriptbezogenen priority-Eigenschaft.
<!-- 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>
Browserpriorität und fetchpriority
Sie können das Attribut fetchpriority auf verschiedene Ressourcen anwenden, wie in der folgenden Abbildung gezeigt, um die berechnete Priorität potenziell zu erhöhen oder zu verringern. fetchpriority="auto" (◉) in jeder Zeile gibt die Standardpriorität für diesen Ressourcentyp an (auch verfügbar als Google-Dokument).
| 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/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 | ◉ | ||||
Beachten Sie, dass fetchpriority die relative Priorität festlegt, d. h. die Standardpriorität entsprechend erhöht oder verringert wird, anstatt die Priorität explizit auf „Hoch“ oder „Niedrig“ zu setzen und der Browser entscheidet die relative Priorität. Oftmals „Hoch“ oder „Niedrig“, aber nicht immer. Zum Beispiel behält kritisches CSS mit fetchpriority="high" weiterhin die Priorität „VeryHigh“/„Highest“ bei. Wenn Sie fetchpriority="low" für diese verwenden, bleibt die Priorität „High“ erhalten – in keinem Fall wird die Priority (Priorität) explizit auf „High“ (Hoch) oder „Low“ (Niedrig) festgelegt.
Anwendungsfälle
Mit dem Attribut fetchpriority können Sie dem Browser einen zusätzlichen Hinweis zur Priorität beim Abrufen einer Ressource geben.
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
Mit fetchpriority="low" können Sie die Priorität von Bildern verringern, die ohne Scrollen sichtbar sind und anfänglich nicht wichtig sind, z. B. 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>
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 Ladezeit verkürzte sich um 2 Sekunden.
Priorität vorab geladener Ressourcen verringern
Sie können einen Hinweis zur Reduzierung ihrer Priorität bereitstellen, um zu verhindern, dass vorab geladene Ressourcen mit anderen kritischen Ressourcen konkurrieren. Sie können dieses Verfahren mit Bildern, Skripts und CSS verwenden.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
Skripts neu festlegen
Skripte, die erforderlich sind, um einige Teile der Seite interaktiv zu gestalten, sind unerlässlich. Sie sollten jedoch keine anderen Ressourcen blockieren. Sie können sie als asynchron mit hoher Priorität markieren.
<script src="async_but_important.js" async fetchpriority="high"></script>
Skripts können nicht als asynchron markiert werden, wenn sie auf bestimmten DOM-Zuständen basieren. Wenn sie sich jedoch weiter unten auf der Seite befinden, werden sie möglicherweise mit einer niedrigeren Priorität heruntergeladen, wie abgebildet.
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Priorität für nicht kritische Datenabrufe senken
Der Browser führt fetch mit einer hohen Priorität aus. Falls mehrere Abrufe gleichzeitig ausgelöst werden können, können Sie die hohe Standardpriorität für kritischere Datenabrufe verwenden und für weniger kritische 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 die Leistung in bestimmten Anwendungsfällen verbessern, wie oben erläutert. Beachten Sie Folgendes:
- Das Attribut
fetchpriorityist ein Hinweis und keine Anweisung. Der Browser versucht, die Einstellungen des Entwicklers zu berücksichtigen. Es ist auch möglich, dass der Browser bei Konflikten seine Einstellungen für die Ressourcenpriorität anwendet, sofern dies erforderlich ist. Die Abrufpriorität sollte nicht mit einem Vorabladevorgang verwechselt werden. Beide unterscheiden sich aus folgenden Gründen:
- Das Vorabladen ist ein obligatorischer Abruf und kein Hinweis.
- Durch das Vorabladen kann der Browser die Ressource frühzeitig erkennen, sie wird jedoch weiterhin mit der Standardpriorität abgerufen. Umgekehrt trägt die Abrufpriorität nicht bei der Auffindbarkeit bei, sondern ermöglicht es Ihnen, die Abrufpriorität zu erhöhen oder zu verringern.
- Es ist einfacher, die Auswirkungen eines Vorabladevorgangs zu beobachten und zu messen.
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, führt die Abrufprioritäthighmöglicherweise nicht zu erheblichen Verbesserungen. Wenn das Vorabladen jedoch auf andere Ressourcen erfolgte, kann die Abrufprioritäthighden LCP verbessern. Wenn es sich bei einem wichtigen Bild um ein CSS-Hintergrundbild handelt, sollten Sie es vorab mitfetchpriority = "high"laden.Die deutlichen Verbesserungen aufgrund der Priorisierung sind in Umgebungen, in denen mehr Ressourcen um die verfügbare Netzwerkbandbreite konkurrieren, relevanter. Das ist häufig bei HTTP/1.x-Verbindungen der Fall, bei denen keine parallelen Downloads möglich sind, oder bei HTTP/2-Verbindungen mit niedriger Bandbreite. Durch Priorisierung können Engpässe unter diesen Bedingungen beseitigt werden.
CDNs implementieren die HTTP/2-Priorisierung nicht einheitlich. Selbst wenn der Browser die mithilfe der Abrufpriorität vorgeschlagene Priorität kommuniziert, erhält das CDN Ressourcen möglicherweise nicht in der erforderlichen Reihenfolge neu. 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 lohnt sich auch nur für die interne Browserpriorisierung, unabhängig vom CDN- oder Ursprungssupport, da sich diese oft ändert, wenn Ressourcen vom Browser angefordert werden. Beispielsweise werden Ressourcen mit niedriger Priorität wie Bilder häufig zurückgehalten, während der Browser die wichtigen
<head>-Elemente verarbeitet.Möglicherweise ist es nicht möglich, die Abrufpriorität in Ihren ersten Entwurf als Best Practice einzuführen. Es handelt sich dabei um eine Optimierung, die Sie später im Entwicklungszyklus anwenden können. Sie können die Prioritäten prüfen, die verschiedenen Ressourcen auf der Seite zugewiesen sind. Wenn sie nicht Ihren Erwartungen entsprechen, können Sie zur weiteren Optimierung die Abrufpriorität einführen.
Vorabladen nach Chrome 95
Die Funktion „Abrufpriorität“ war für den Testzeitraum in Chrome 73 bis 76 verfügbar. Sie wurde jedoch aufgrund von Priorisierungsproblemen, bei denen Vorabladevorgänge in Chrome 95 behoben wurden, nicht veröffentlicht. Vor Chrome 95 werden Anfragen über <link rel=preload> immer vor anderen Anfragen gestartet, die vom Vorladescanner erkannt wurden, auch wenn die anderen Anfragen eine höhere Priorität haben.
Mit der Fehlerbehebung in Chrome 95 und der Verbesserung der Abrufpriorität hoffen wir, dass Entwickler Vorabladevorgänge für den beabsichtigten Zweck nutzen werden, 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. Einige wichtige Punkte bei der Verwendung des Vorabladens:
- Wenn die Vorabladefunktion in HTTP-Header eingebunden wird, überspringt sie alles andere.
- Im Allgemeinen werden Vorladevorgänge in der Reihenfolge geladen, in der sie vom Parser für etwas über der Priorität „Mittel“ erreicht werden. Seien Sie also vorsichtig, wenn Sie Vorladevorgänge am Anfang des HTML-Codes einfügen.
- Das Vorabladen von Schriftarten funktioniert am besten gegen das Ende des Headers oder den Textanfang.
- Vorabladevorgänge (dynamisches
import()odermodulepreload) sollten nach dem Script-Tag erfolgen, das den Import benötigt, damit das eigentliche Script zuerst geladen bzw. geparst wird. Wenn über das Skript-Tag ein Skript geladen wird, das das Laden von Abhängigkeiten auslöst, muss der<link rel=preload>für die Abhängigkeiten nach dem übergeordneten Skript-Tag liegen. Andernfalls werden die Abhängigkeiten möglicherweise vor dem Hauptskript geladen. In der richtigen Reihenfolge kann das Hauptskript geparst/evaluiert werden, während die Abhängigkeiten geladen werden. - Vorabladevorgänge für Bilder haben die Priorität „Niedrig“ oder „Mittel“ (ohne Abrufpriorität) und sollten relativ zu asynchronen Skripts und anderen Tags mit niedriger oder niedriger Priorität sortiert werden.
Verlauf
Die Abrufpriorität wurde 2018 erstmals als Ursprungstest in Chrome und 2021 mit dem Attribut importance getestet. Zu dieser Zeit hieß das System 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. Um Verwirrung zu vermeiden, bezeichnen wir diese API jetzt als Abrufpriorität.
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. Jetzt stehen zusätzliche Optionen zur Verfügung, um die gewünschte Ladereihenfolge zu erreichen.