Wenn ein Browser eine Webseite analysiert 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, was sie ist und wo sie sich im Dokument befindet. Bilder im Darstellungsbereich können beispielsweise 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. Die automatische Prioritätszuweisung funktioniert in der Regel gut. Es gibt jedoch Anwendungsfälle, bei denen die zugewiesene Reihenfolge nicht optimal ist.
Auf dieser Seite werden die Fetch Priority API und das HTML-Attribut fetchpriority beschrieben, mit denen Sie die Core Web Vitals optimieren können, indem Sie Hinweise auf die relative Priorität einer Ressource (high oder low) geben.
Zusammenfassung
Die Abrufpriorität kann in folgenden Bereichen hilfreich sein:
- Du kannst die Priorität des LCP-Bilds erhöhen, indem du
fetchpriority="high"für das Bildelement angibst, sodass der LCP früher stattfindet. - Die Priorität von
async-Skripts wird erhöht. Dabei wird eine bessere Semantik als beim aktuellen häufigsten Hack verwendet (ein<link rel="preload">für das Skriptasynceinfügen). - Die Priorität von Late-Body-Skripten wird verringert, um Bilder besser zu sequenzieren.
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. Preconnect hilft beim Aufwärmen von Verbindungen zu ursprungsübergreifenden Servern und kann zur Verbesserung von Messwerten wie Zeit bis zum ersten Byte beitragen. Dies ist nützlich, wenn Sie den Ursprung, aber nicht unbedingt die genaue URL einer benötigten Ressource kennen.
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 dem Attribut priority verwenden, 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, das, wenn es vorab geladen wird, weiterhin eine niedrige Priorität hat. Wenn es von anderen Ressourcen mit niedriger Priorität zurückgezogen wird, kann die Verwendung der Abrufpriorität helfen, wie schnell das Image 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.
- Der Ressourcenhinweis
preload, der dem Browser hilft, eine Ressource schneller zu finden und früher zu laden. - Änderungen bei der Prioritätsberechnung für
async- oderdefer-Skripts.
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. Verwenden Sie dazu den Tab Netzwerk in den Chrome-Entwicklertools. (Achten Sie darauf, 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 sowohl die anfängliche als auch die letzte Priorität in der Einstellung Big Request Rows oder in einer Kurzinfo sehen.
Wann benötigen Sie möglicherweise die Abrufpriorität?
Jetzt kennen Sie die Priorisierungslogik des Browsers und können die Downloadreihenfolge Ihrer Seite anpassen, um die Leistung und die Core Web Vitals zu optimieren. Hier sind einige Beispiele für Änderungen, die Sie ohne die Abrufpriorität ändern können:
- Platzieren Sie Ressourcen-Tags wie
<script>und<link>in der Reihenfolge, in der sie vom Browser heruntergeladen werden sollen. - Verwenden Sie den Ressourcenhinweis
preload, um erforderliche Ressourcen früher herunterzuladen, insbesondere Ressourcen, die vom Browser schwerer zu erkennen sind. - Verwenden Sie
asyncoderdefer, um Skripts herunterzuladen, ohne andere Ressourcen zu blockieren. - Lazy-Loading-Inhalte „below the fold“ (mit Scrollen sichtbar), damit der Browser die verfügbare Bandbreite für wichtigere „above the fold“-Ressourcen nutzen kann
Im Folgenden finden Sie einige komplexere Fälle, in denen Sie mit dem Abruf der Priorität die benötigte Reihenfolge der Ressourcenprioritäten ermitteln können:
- 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.
- Hero-Images im Darstellungsbereich beginnen normalerweise mit der Priorität
LowoderMedium. Wenn das Layout fertig ist, erkennt Chrome, dass sie sich im Darstellungsbereich befinden, und erhöht ihre Priorität. Dadurch dauert das Laden der Bilder in der Regel deutlich länger. Durch Angabe der Abrufpriorität im Markup kann das Bild mit der Priorität „Hoch“ beginnen und viel früher geladen werden.
Das Vorabladen ist weiterhin erforderlich, damit LCP-Bilder, die als CSS-Hintergründe enthalten sind, frühzeitig erkannt werden. Wenn du die Priorität deiner Hintergrundbilder erhöhen möchtest, 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 für asynchrone Downloads sorgen. Dies gilt insbesondere für Skripts, die für die Nutzerfreundlichkeit 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, dass einige Ihrer Abrufe mit niedrigerer Priorität ausgeführt werden, insbesondere wenn Sie API-Aufrufe im Hintergrund mit API-Aufrufen kombinieren, 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 eine
High" priorityzu, 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.
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 hohe Priorität und Sie möchten, dass der Browser sie priorisiert, solange die Heuristik des Browsers dies nicht verhindert.low: Die Ressource hat eine niedrige Priorität und Sie möchten, dass der Browser ihr eine geringere Priorität einräumt, wenn die Heuristik dies zulässt.auto: Der Standardwert, mit 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 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>
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.
| 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. Die Standardpriorität wird also um einen angemessenen Betrag erhöht oder gesenkt, anstatt die Priorität explizit auf High oder Low festzulegen. Dies führt häufig zur Priorität High oder Low, aber nicht immer. Beispielsweise behält kritisches CSS mit fetchpriority="high" die Priorität „VeryHigh“/„Highest“ bei. Wenn Sie fetchpriority="low" für diese Elemente verwenden, bleibt die Priorität „High“ 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 darauf 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 Einstellung „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. 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 damit die Priorität von Bildern verringert, die beim Laden nicht angezeigt werden. Die Seitenladezeit wurde um 2 Sekunden reduziert.
Priorität vorab geladener Ressourcen verringern
Sie können deren 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" 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
Wenn Sie Skripts interaktiv gestalten möchten, müssen sie schnell geladen werden. Sie sollten aber keine anderen Ressourcen blockieren. 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>
Priorität für nicht kritische Datenabrufe senken
Der Browser führt fetch mit einer hohen Priorität aus. Wenn Sie mehrere Abrufe haben, die möglicherweise gleichzeitig ausgelöst werden, 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
Beachten Sie bei der Verwendung der Abrufpriorität Folgendes:
- Das Attribut
fetchpriorityist ein Hinweis, keine Anweisung. Der Browser versucht, die Einstellung des Entwicklers zu respektieren. Er kann aber auch seine Einstellungen für Ressourcenprioritäten 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. Währenddessen hilft die Abrufpriorität nicht bei der Sichtbarkeit, aber Sie können damit die Abrufpriorität erhöhen oder verringern.
- Es ist einfacher, die Auswirkungen eines Vorabladens 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-Image 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 kritisches 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 geschieht häufig bei HTTP/1.x-Verbindungen, bei denen keine parallelen Downloads möglich sind, oder bei HTTP/2-Verbindungen mit niedriger Bandbreite. In diesen Fällen kann durch Priorisierung Engpässe behoben werden.
CDNs implementieren die HTTP/2-Priorisierung nicht einheitlich. Selbst wenn der Browser die Priorität aus 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 innerhalb des Browsers 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 oft ändern, wenn der Browser Ressourcen anfordert. Beispielsweise werden Ressourcen mit niedriger Priorität wie Images häufig daran gehindert, angefordert zu werden, während der Browser wichtige
<head>-Elemente verarbeitet.Möglicherweise können Sie die Abrufpriorität nicht als Best Practice in Ihrem ursprünglichen Design 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.
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 vom Parser für alles über der Priorität „Mittel“ abgerufen werden. Seien Sie vorsichtig, wenn Sie Vorabladevorgänge am Anfang des HTML-Codes einfügen.
- Vorabladevorgänge von Schriftarten funktionieren wahrscheinlich am besten gegen das Ende des Heads oder den Textanfang.
- Import-Vorabladevorgänge (dynamisches
import()odermodulepreload) sollten nach dem Skript-Tag ausgeführt werden, das den Import benötigt. Daher muss das Skript 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 „Niedrig“ oder „Mittel“. Ordnen Sie sie relativ zu asynchronen Skripts und anderen Tags mit niedriger oder niedriger Priorität an.
Verlauf
Die Abrufpriorität wurde 2018 erstmals in Chrome als Ursprungstest getestet und 2021 noch einmal mit dem Attribut importance. Zu dieser Zeit hieß es 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, wird diese
API-Abrufpriorität genannt.