Diese Seite wurde von der Cloud Translation API übersetzt.

Laden von Ressourcen mit der Fetch Priority API optimieren

Die Fetch Priority API gibt dem Browser die relative Priorität von Ressourcen an. Sie kann ein optimales Laden ermöglichen und Core Web Vitals verbessern.

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Wenn ein Browser eine Webseite parst und damit beginnt, Ressourcen wie Bilder, Skripts oder CSS zu ermitteln und herunterzuladen, wird ihnen ein Abruf-priority zugewiesen, damit sie in optimaler Reihenfolge heruntergeladen werden können. 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 haben beispielsweise die Priorität High und die Priorität für früh geladene, das Rendering blockierende CSS mit <link>-Elementen im <head> kann Very High sein. Browser sind ziemlich gut darin, Prioritäten zuzuweisen, die gut funktionieren, aber möglicherweise nicht in allen Fällen optimal sind.

Auf dieser Seite werden die Fetch Priority API und das HTML-Attribut fetchpriority erläutert, mit dem 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

Hier sind einige wichtige Bereiche, in denen die Abrufpriorität helfen kann:

Erhöhen der Priorität des LCP-Bilds durch Angabe von fetchpriority="high" für das Bildelement, wodurch LCP früher erfolgt.
Die Priorität von async-Scripts wird mit einer besseren Semantik als beim aktuell gängigsten Hack erhöht (ein <link rel="preload"> für das async-Skript wird eingefügt).
Die Priorität von Late-Body-Scripts wird verringert, um eine bessere Sequenzierung mit Bildern zu ermöglichen.

Eine Filmstreifenansicht, in der zwei Tests der Google Flüge-Startseite verglichen werden. Unten wird die Abrufpriorität verwendet, um die Priorität des Hero-Images zu erhöhen, was zu einer Verringerung des LCP um 0,7 Sekunden führt. — Die Abrufpriorität verbesserte Largest Contentful Paint bei einem Test von Google Flüge von 2,6 Sek. auf 1,9 Sek.

In der Vergangenheit hatten Entwickler durch die Funktionen Preload und preconnect nur wenig Einfluss auf die Ressourcenpriorität. Mit dem Vorabladen können Sie den Browser frühzeitig über kritische Ressourcen informieren, die Sie laden möchten, bevor sie sie automatisch erkennen würden. Dies ist besonders nützlich für Ressourcen, die schwerer zu finden sind, wie z. B. in Stylesheets enthaltene Schriftarten, Hintergrundbilder oder Ressourcen, die aus einem Skript geladen werden. Durch Vorverbindung lassen sich Verbindungen zu ursprungsübergreifenden Servern aufwärmen und Messwerte wie Zeit bis zum ersten Byte verbessern. Das 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 handelt sich um ein Markup-basiertes Signal, das über das Attribut fetchpriority verfügbar ist und 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. Erstellen Sie ein Largest Contentful Paint-Bild, das nach dem Vorabladen trotzdem eine niedrige Priorität erhält. Wenn es von anderen Ressourcen mit niedriger Priorität zurückgewiesen wird, kann die Verwendung der Abrufpriorität helfen, wie schnell das Bild geladen wird.

Ressourcenpriorität

Die Reihenfolge, in der Ressourcen heruntergeladen werden, hängt von der Priorität ab, die dem Browser für jeder Ressource auf der Seite. Faktoren, die die Berechnung der Priorität beeinflussen können Logik beinhalten:

Der Ressourcentyp, z. B. CSS, Schriftarten, Skripts, Bilder und Ressourcen von Drittanbietern.
Der Speicherort oder die Reihenfolge, an der das Dokument auf Ressourcen verweist.
Ob die Attribute async oder defer in Skripts verwendet werden

Die folgende Tabelle zeigt, wie Chrome die meisten Ressourcen priorisiert und abordnet:

</ph> Beispiel für die Bedeutung dieser Tabelle: <ph type="x-smartling-placeholder">

Frühe CSS (wie CSS in <head>) sind standardmäßig highest und blockieren das Layout.
Durch spätes CSS (z. B. CSS in der Mitte von <body>) wird das anfängliche Layout nicht blockiert. Während sich der Browser in dieser Layoutblockierung befindet, wird nicht alles geladen, sondern nur nacheinander mit anderen Ressourcen geladen, bis der Browser die Layoutblockierungsphase beendet. So kann sich der Browser auf wichtigere Ressourcen konzentrieren.
Nicht übereinstimmende CSS-Elemente (wie media="print"-Stylesheets, wenn die Seite auf einem Bildschirm geladen und nicht gedruckt wird) werden mit der Priorität lowest geladen.

Weitere Erläuterungen finden Sie in den Fußnoten der Tabelle.

	In der Layoutblockierungsphase laden		Einzelnes Laden in der Layoutblockierungsphase
Blinken Priorität	VeryHigh	Hoch	Mittel	Niedrig	VeryLow
DevTools Priority	Höchste	Hoch	Mittel	Niedrig	Niedrigste
	Hauptressource
	Preisvergleichsportal (frühzeitig**)		Preisvergleichsportal (verspätet**)		CSS (nicht übereinstimmende Medien***)
		Script (frühzeitig** oder nicht vom Preload Scanner)	Skript (verspätet**)	Skript (asynchron)
	Schriftart	Schriftart (rel=preload)
		Importieren
		Bild (im Darstellungsbereich)	Bild (erste 5 Bilder > 10.000 px2)	Bild
				Medien (Video/Audio)
					Vorabruf
		XSL
	XHR (Synchronisierung)	XHR/fetch* (asynchron)

Hinweise:
* Vorabladevorgänge mit "as" oder fetch mit einem bestimmten "destination" verwenden die Priorität des angeforderten Ziels. Beim Vorabladen von as="style" wird beispielsweise die höchste Priorität verwendet. Ohne explizites Ziel wird der Abruf wie bei einer asynchronen XHR priorisiert.
** „Früh“ wird definiert als angefordert, bevor nicht vorab geladene Bilder angefordert werden, und „verspätet“ geschieht, nachdem nicht vorab geladene Images angefordert wurden.
*** CSS, bei denen der Medientyp nicht übereinstimmt, wird vom Preload-Scanner nicht abgerufen, sondern nur verarbeitet, wenn der Hauptparser ihn erreicht. Das bedeutet in der Regel, dass er sehr spät abgerufen wird.

Bilder fangen bei „Niedrig“ an. Priorität. Zum Zeitpunkt des Layouts werden Bilder im Darstellungsbereich auf „Hoch“ erhöht. Ab Chrome 117 sind die ersten 5 großen Bilder auf „Mittel“ festgelegt um dies zu beschleunigen. Zwei von ihnen können während des anfänglichen „eng Mode“ parallel abgerufen werden. Wenn Sie wichtige Bilder im Markup mit fetchpriority="high" taggen, können sie mit „Hoch“ beginnen. und laden schneller.

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, die den verschiedenen Ressourcen zugewiesen ist, beim Laden einer Seite auf dem Tab Netzwerk in den Chrome-Entwicklertools prüfen. Achten Sie darauf, die Spalte Priorität einzubeziehen, indem Sie mit der rechten Maustaste auf die Tabellenüberschriften klicken und diese markieren.

Tab „Network“ in den Chrome-Entwicklertools mit einer Reihe von Ressourcen für Schriftarten Sie haben alle die höchste Priorität. — Priorität für Ressource `type = "font"` auf der Detailseite der BBC-Nachrichten

Tab „Network“ in den Chrome-Entwicklertools mit einer Reihe von Ressourcen für Schriftarten Sie umfassen eine Mischung aus niedriger und hoher Priorität. — Priorität für Ressource `type = "script"` auf der Detailseite der BBC-Nachrichten.

Wenn sich Prioritäten ändern, können Sie sowohl die anfängliche als auch die letzte Priorität in der Einstellung Große Anfragezeilen oder in einer Kurzinfo sehen.

Tab „Netzwerk“ in den Chrome-Entwicklertools. „Große Anfragezeilen“ aktiviert ist und in der Spalte „Priority“ (Priorität) das erste Bild mit der Priorität „Hoch“ und darunter eine andere Anfangspriorität von „Medium“ angezeigt wird. Entsprechendes wird in der Kurzinfo angezeigt. — Prioritätsänderungen in den Entwicklertools

Wann ist die Abrufpriorität sinnvoll?

Da Sie nun die Priorisierungslogik des Browsers verstehen, können Sie die Downloadreihenfolge Ihrer Seite optimieren, um die Leistung und die Core Web Vitals zu optimieren. Hier sind einige Beispiele für Dinge, 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 leicht zu früh erkannt werden.
Mit async oder defer können Sie Skripts herunterladen, ohne andere Ressourcen zu blockieren.
Lazy Loading für „Below the fold“-Inhalte (below the fold) funktioniert, damit der Browser die verfügbare Bandbreite für kritische „above the fold“-Ressourcen nutzen kann.

Diese Techniken tragen dazu bei, die Berechnung der Priorität des Browsers zu steuern und so die Leistung und die Core Web Vitals zu verbessern. Wenn beispielsweise ein kritisches Hintergrundbild vorab geladen wird, kann es viel früher erkannt werden, wodurch der Largest Contentful Paint (LCP) verbessert wird.

Manchmal reichen diese Aliasse möglicherweise nicht aus, um Ressourcen für Ihre Anwendung optimal zu priorisieren. Hier sind einige der Szenarien, in denen die Abrufpriorität hilfreich sein könnte:

Sie haben mehrere „Above the fold“-Bilder, die ohne Scrollen sichtbar sind, aber nicht alle sollten dieselbe Priorität haben. In einem Bilderkarussell benötigt beispielsweise nur das erste sichtbare Bild eine höhere Priorität. Für die anderen, normalerweise nicht sichtbaren Bilder, kann anfänglich eine niedrigere Priorität festgelegt werden.
Bilder im Darstellungsbereich beginnen in der Regel 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 kommt es in der Regel zu einer erheblichen Verzögerung beim Laden wichtiger Bilder, z. B. von Hero-Images. Wenn im Markup die Abrufpriorität angegeben ist, kann das Bild mit der Priorität High beginnen und viel früher mit dem Laden beginnen. Um diesen Vorgang zu automatisieren, legt Chrome für die ersten fünf größeren Bilder die Priorität Medium fest, was hilfreich ist, aber ein explizites fetchpriority="high" ist noch besser.

Das Vorabladen ist weiterhin erforderlich, damit LCP-Bilder, die als CSS-Hintergründe enthalten sind, frühzeitig erkannt werden. Um Ihre Hintergrundbilder zu optimieren, Priorität haben, schließen Sie fetchpriority='high' beim Vorabladen ein.
Wenn Sie Skripts als async oder defer deklarieren, wird der Browser angewiesen, sie asynchron zu laden. Wie in der Prioritätstabelle dargestellt, wird diesen Skripts jedoch auch eine niedrige Priorität zugewiesen. Priorität haben. Sie können ihre Priorität erhöhen und gleichzeitig einen asynchronen Download gewährleisten, insbesondere bei Skripts, die für die Nutzerfreundlichkeit entscheidend sind.
Wenn Sie die JavaScript fetch() API verwenden, um Ressourcen oder Daten asynchron abzurufen, weist der Browser ihr die Priorität High zu. 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ät Low und die interaktiven API-Aufrufe mit der Priorität High.
Der Browser weist CSS und Schriftarten die Priorität High zu, 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. Beachten Sie, dass frühe CSS das Rendering blockieren und daher in der Regel eine High-Priorität haben sollten.

Das Attribut `fetchpriority`

Mit dem HTML-Attribut fetchpriority können Sie die Downloadpriorität für Ressourcentypen wie CSS, Schriftarten, Skripts und Bilder festlegen, wenn diese 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 üblich priorisiert, solange die eigene Heuristik des Browsers dies nicht verhindert.
low: Die Ressource hat eine niedrigere Priorität und Sie möchten, dass der Browser ihre Priorität herabgestuft wird – auch dann, wenn seine Heuristik das zulässt.
auto: Der Standardwert, mit dem der Browser die passende Priorität auswählen kann.

Hier sind einige Beispiele für die Verwendung des Attributs fetchpriority im Markup sowie der skriptäquivalenten 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 kennzeichnet die Standardpriorität für diesen Ressourcentyp. (auch als Google-Dokument verfügbar).

	In der Layoutblockierungsphase laden		Einzelne Elemente in der Layoutblockierungsphase laden
Blinken Priorität	VeryHigh	Hoch	Mittel	Niedrig	VeryLow
DevTools Priority	Höchste	Hoch	Mittel	Niedrig	Niedrigste
Hauptressource	◉
Preisvergleichsportal (frühzeitig**)	⬆◉	⬇
Preisvergleichsportal (verspätet**)		⬆	◉	⬇
CSS (nicht übereinstimmende Medien***)		⬆***			◉⬇
Script (frühzeitig** oder nicht vom Preload Scanner)		⬆◉		⬇
Skript (verspätet**)		⬆	◉	⬇
Script (asynchron/aussetzen)		⬆		◉⬇
Schriftart	◉
Schriftart (rel=preload)		⬆◉		⬇
Importieren		◉
Bild (im Darstellungsbereich – nach dem Layout)		⬆◉		⬇
Bild (erste 5 Bilder > 10.000 px2)		⬆	◉	⬇
Bild		⬆		◉⬇
Medien (Video/Audio)				◉
XHR (Synchronisierung) – eingestellt	◉
XHR/fetch* (asynchron)		⬆◉		⬇
Vorabruf					◉
XSL		◉

Hinweise:
* Beim Vorabladen mit "as" oder Abrufen mit einer bestimmten "destination" wird die Priorität des angeforderten Ziels verwendet. Beim Vorabladen von as="style" wird beispielsweise die höchste Priorität verwendet. Ohne explizite Bestimmung wird der Abruf wie bei einer asynchronen XHR priorisiert.
** „Früh“ wird definiert als angefordert, bevor nicht vorab geladene Bilder angefordert wurden ("späte" ist nach).
*** CSS, bei denen der Medientyp nicht übereinstimmt, wird vom Preload-Scanner nicht abgerufen, sondern nur verarbeitet, wenn der Hauptparser ihn erreicht. Das bedeutet in der Regel, dass er sehr spät abgerufen wird, auch bei fetchpriority="high".

Bilder beginnen standardmäßig mit der Einstellung „Niedrig“. und dann beim Layout auf „Hoch“. wenn sie sich innerhalb des Darstellungsbereichs befinden. Ab Chrome 117 sind die ersten 5 großen Bilder auf „Mittel“ festgelegt um dies zu beschleunigen. Zwei davon können während des anfänglichen "engsten Modus" parallel abgerufen werden. Wenn Sie wichtige Bilder im Markup mit fetchpriority="high" taggen, können sie mit „Hoch“ beginnen. und laden schneller.

Bei fetchpriority wird die relative Priorität festgelegt, d. h. die Standardpriorität wird um einen angemessenen Wert erhöht oder gesenkt, anstatt die Priorität explizit auf High oder Low festzulegen. Dies führt häufig zu einer Priorität von High oder Low, aber nicht immer. Beispielsweise behalten kritische CSS mit fetchpriority="high" die Werte „Sehr hoch“/„Höchste“ bei. Priorität hat. Durch die Verwendung von fetchpriority="low" für diese Elemente wird die Einstellung "Hoch" beibehalten. Priorität haben. In keinem dieser Fälle wird die Priorität explizit auf High oder Low festgelegt.

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">

Der folgende Vergleich zeigt die Google Flüge-Seite mit einem LCP-Hintergrundbild, das mit und ohne Abrufpriorität geladen ist. Mit der Priorität „Hoch“ hat sich der LCP von 2,6 Sek.auf 1,9 Sek.verbessert.

</ph>

Ein Experiment wurde mit Cloudflare-Workern durchgeführt, um die Google Flüge-Seite mit der Abrufpriorität neu zu schreiben.

Priorität von Bildern „above the fold“ verringern

Verwenden Sie fetchpriority="low", um die Priorität von Bildern, die ohne Scrollen sichtbar sind, nicht unmittelbar wichtig zu verringern, z. B. Bilder, die nicht auf dem Bildschirm zu sehen sind, 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, können jedoch als "nah genug" betrachtet werden. um sie auf high zu erhöhen. Sie werden auch geladen, wenn ein load=lazy-Attribut hinzugefügt wird. Daher ist fetchpriority="low" die richtige Lösung dafür.

In einem früheren Test mit der Geisler App haben wir diese Funktion verwendet, um die Priorität von Bildern zu verringern, die beim Laden nicht angezeigt werden. Die Seitenladezeit wurde um 2 Sekunden verkürzt.

Ein direkter Vergleich der Abrufpriorität im Bilderkarussell der Oodle-App. Auf der linken Seite legt der Browser Standardprioritäten für Karussellbilder fest, lädt diese Bilder jedoch etwa zwei Sekunden langsamer herunter als im Beispiel rechts, wodurch nur das erste Karussellbild eine höhere Priorität erhält. — </ph> Wenn Sie nur für das erste Karussellbild eine hohe Priorität festlegen, wird die Seite schneller geladen.

Priorität vorab geladener Ressourcen herabsetzen

Damit vorab geladene Ressourcen nicht mit anderen kritischen Ressourcen konkurrieren, können Sie ihre Priorität reduzieren. Verwenden Sie diese Technik 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 priorisieren

Skripts, die interaktiv sein müssen, sollten schnell geladen werden, aber keine anderen, wichtigeren Ressourcen blockieren, die das Rendering blockieren. Sie können diese als async mit hoher Priorität markieren.

<script src="async_but_important.js" async fetchpriority="high"></script>

Sie können ein Skript nicht als async markieren, wenn es bestimmte DOM-Status benötigt. Werden sie jedoch später auf der Seite ausgeführt, können Sie sie mit niedrigerer Priorität laden:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Dadurch wird der Parser dennoch blockiert, wenn er dieses Skript erreicht, aber Inhalte vor diesem Skript werden priorisiert.

Wenn das fertige DOM benötigt wird, können Sie alternativ das Attribut defer (das der Reihe nach nach DOMContentLoaded ausgeführt wird) oder sogar async unten auf der Seite verwenden.

Priorität für nicht kritische Datenabrufe verringern

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 und die für weniger wichtige 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. Bei der Verwendung der Abrufpriorität sind jedoch einige Dinge zu beachten:

Das Attribut fetchpriority ist ein Hinweis, keine Anweisung. Der Browser versucht, die Einstellungen des Entwicklers zu respektieren, kann aber auch seine Einstellungen zur Ressourcenpriorität 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 kann der Browser eine Ressource frühzeitig erkennen, sie wird aber dennoch mit der Standardpriorität abgerufen. Umgekehrt hilft die Abrufpriorität nicht bei der Auffindbarkeit, aber Sie können damit die Abrufpriorität erhöhen oder verringern.
- Es ist oft einfacher, die Auswirkungen eines Vorabladens zu beobachten und zu messen als die Auswirkungen einer Prioritätsänderung.
Die Abrufpriorität kann die Vorabladevorgänge ergänzen, indem der Detaillierungsgrad der Priorisierung erhöht wird. Wenn Sie bereits ein Vorabladen als eines der ersten Elemente in der <head> für ein LCP-Bild angegeben haben, verbessert die Abrufpriorität von high den LCP möglicherweise nicht wesentlich. Wenn das Vorabladen jedoch nach dem Laden anderer Ressourcen erfolgt, kann der LCP mit einer Abrufpriorität von high weiter verbessert werden. Wenn ein kritisches Bild ein CSS-Hintergrundbild ist, lade es mit fetchpriority = "high" vorab.
Verbesserungen bei der Ladezeit durch Priorisierung sind in Umgebungen, in denen mehr Ressourcen um die verfügbare Netzwerkbandbreite konkurrieren, relevanter. Dies kommt häufig bei HTTP/1.x-Verbindungen vor, 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 und auch nicht für HTTP/3. Selbst wenn der Browser die Priorität aus der Abrufpriorität kommuniziert, weist das CDN den Ressourcen möglicherweise keine neuen Prioritäten in der angegebenen Reihenfolge zu. Dies erschwert das Testen der Abrufpriorität. Die Prioritäten werden sowohl intern im Browser als auch mit Protokollen angewendet, die Priorisierung unterstützen (HTTP/2 und HTTP/3). Es lohnt sich dennoch, die Abrufpriorität nur für die interne Browserpriorisierung zu verwenden, unabhängig von CDN- oder Ursprungsunterstützung, da sich Prioritäten häufig ändern, wenn der Browser Ressourcen anfordert. Beispielsweise werden Ressourcen mit niedriger Priorität wie Bilder häufig nicht angefordert, während der Browser kritische <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 verschiedenen Ressourcen auf der Seite zuweisen. Wenn sie nicht Ihren Erwartungen entsprechen, können Sie die Abrufpriorität zur weiteren Optimierung 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.

Die Abrufpriorität legt fest, wie die Ressource abgerufen werden soll, wenn sie abgerufen wird.

Tipps für die Verwendung von Vorabladevorgängen

Beachten Sie bei der Verwendung von Vorabladevorgängen Folgendes:

Durch das Hinzufügen eines Vorabladens in HTTP-Headern wird dieser vor allem anderen in der Ladereihenfolge platziert.
Im Allgemeinen wird der Ladevorgang für alle Elemente mit der Priorität Medium oder höher in der Reihenfolge vorab geladen, in der sie vom Parser abgerufen werden. Seien Sie vorsichtig, wenn Sie Vorabladevorgänge am Anfang Ihres HTML-Codes einfügen.
Das Vorabladen von Schriftarten funktioniert wahrscheinlich am besten zum Ende des Kopfes oder zum Anfang des Körpers.
Importvorabladevorgänge (dynamische import() oder modulepreload) sollten nach dem Skript-Tag ausgeführt werden, das den Import erfordert. Achten Sie daher darauf, dass das Skript zuerst geladen oder geparst wird, damit es ausgewertet werden kann, während seine Abhängigkeiten geladen werden.
Vorabladevorgänge für Bilder haben standardmäßig die Priorität Low oder Medium. Ordnen Sie sie in Relation zu asynchronen Skripts und anderen Tags mit niedriger oder niedriger Priorität.

Verlauf

Die Abrufpriorität wurde 2018 erstmals in Chrome als Ursprungstest getestet. 2021 wurde dann noch einmal das Attribut importance verwendet. Damals hieß sie Prioritätshinweise. Die Benutzeroberfläche wurde inzwischen im Rahmen des Webstandards-Prozesses für HTML in fetchpriority und für die Fetch API von JavaScript in priority geändert. Um Verwirrung zu vermeiden, nennen wir diese API-Abrufpriorität.

Fazit

Entwickler sind wahrscheinlich an der Abrufpriorität interessiert, da sie die Probleme beim Vorabladen behoben haben und sich vor Kurzem auf Core Web Vitals und LCP konzentrieren. Sie hat jetzt zusätzliche Drehknöpfe, um ihre bevorzugte Ladereihenfolge zu erreichen.