Optimierung der Ressourcenladung mit fetchpriority

Hintergrund

Preloading ermöglicht das Laden wichtiger Inhalte, bevor die gesamte Webseite fertig geladen ist, was den Nutzern eine bessere Erfahrung bietet und die Wartezeit reduziert. In einigen Fällen müssen wir jedoch die Priorität der vorgeladenen Ressourcen weiter kategorisieren. Da Preloading allein die Ressourcenpriorisierung nicht vollständig steuern kann, wurde das Attribut fetchpriority eingeführt, um es zu ergänzen.

Ziele

• Beeinflussung der Priorität des Ressourcenabrufs.
• Ergänzung der Laderreihenfolge vorgeladener Ressourcen.

Priorität gibt die relative Bedeutung von Ressourcen für den Browser an. Eine korrekte Priorisierung gewährleistet eine optimale Auslastung und verbessert so die Web-User-Experience.

Ressourcenpriorität

Wenn ein Browser beginnt, eine Webseite zu parsen und Bilder, JavaScript, CSS und andere Ressourcen herunterzuladen, weist er jeder Ressource ein fetchpriority-Flag zu, das ihre Download-Priorität darstellt.

Die Reihenfolge, in der Ressourcen heruntergeladen werden, hängt von diesem Prioritäts-Flag ab, das von mehreren Faktoren bestimmt wird:

• CSS, Schriften, Skripte, Bilder und Ressourcen von Drittanbietern werden unterschiedliche Prioritäten zugewiesen.
• Der Speicherort oder die Reihenfolge von Ressourcen innerhalb des Dokuments beeinflusst die Priorität.
• Preloading-Ressourcenhinweise helfen Browsern, Ressourcen schneller zu erkennen, sodass sie vor dem Ende des Parsens des Dokuments geladen werden können, wodurch die Priorität beeinflusst wird.
• Die Attribute async oder defer von Skripten wirken sich auf die Prioritätsberechnungen aus.

Browser laden Ressourcen in der Reihenfolge herunter, in der sie entdeckt werden. Sie können die zugewiesenen Prioritäten in DevTools Network überprüfen:

Die standardmäßig zugewiesene Priorität für Ressourcen ist jedoch nicht in jedem Szenario optimal.

Wann Priority Hints verwendet werden sollten

Technische Anwendungsfälle:

• Mehrere Above-the-Fold-Bilder mit unterschiedlichen Prioritätsanforderungen: In einem Bildkarussell sollte nur das erste sichtbare Bild die höchste Priorität haben.
• Bilder innerhalb des Viewports, die anfänglich als niedrig priorisiert markiert sind: Wenn Chrome erkennt, dass sie nach Abschluss des Layouts sichtbar sind, erhöht er automatisch ihre Priorität, was ihr Laden möglicherweise verzögert. Die Verwendung von Priority Hints ermöglicht es, sie früher mit einer höheren Priorität zu laden.
• Skripte, die mit async oder defer gekennzeichnet sind: Diesen Skripten wird eine „niedrige“ Priorität zugewiesen. Bestimmte Skripte, die für die User Experience entscheidend sind, benötigen jedoch möglicherweise eine Prioritätserhöhung, während das asynchrone Laden beibehalten wird.
• CSS und Schriften: Browser weisen CSS und Schriften standardmäßig eine hohe Priorität zu, aber nicht alle sind gleich wichtig. Priority Hints können helfen, die Priorität weniger kritischer Ressourcen zu senken.
• Abrufen von Ressourcen mit fetch(): Browser weisen fetch()-Anfragen standardmäßig eine hohe Priorität zu. In einigen Fällen sollten nicht alle Anfragen eine hohe Priorität haben. Hintergrund-API-Aufrufe können als niedrige Priorität markiert werden, während interaktive API-Aufrufe eine hohe Priorität haben können.
• Umgebungen mit begrenzter Netzwerkbandbreite: Priorisierungsgewinne werden besonders wichtig, wenn Ressourcen um die verfügbare Bandbreite konkurrieren.

Das Attribut fetchpriority

Das Attribut fetchpriority akzeptiert drei Werte:

• high: Die Ressource wird als wichtig erachtet und sollte vom Browser priorisiert werden.
• low: Die Ressource ist weniger wichtig und sollte eine niedrigere Priorität haben.
• auto: Der Browser bestimmt die Priorität basierend auf seiner Standardlogik.

Anwendungsbeispiele:

<!-- Dieses Above-the-Fold-Bild ist nicht wichtig, daher senken wir seine Priorität -->
<img
  src="/images/in_viewport_but_not_important.svg"
  fetchpriority="low"
  alt="Ich bin ein unwichtiges Bild!"
/>

<!-- Wir möchten einen frühen Fetch für eine Ressource initiieren, diese aber niedriger priorisieren -->
<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>

<!-- Die Inhalte von Drittanbietern dieses iFrames können mit niedriger Priorität geladen werden -->
<iframe src="https://example.com" width="600" height="400" fetchpriority="low"></iframe>

Erhöhung der LCP-Bildpriorität

Auf der Webseite von Google Flights ist beispielsweise eine der Hauptursachen für einen schlechten Largest Contentful Paint (LCP)-Score das langsame Laden des Hintergrundbilds. Wir können das Attribut fetchpriority verwenden, um seine Ladepriorität zu erhöhen:

<img src="lcp-image.jpg" fetchpriority="high" />

Wenn die Priorität auf hoch gesetzt ist, verbessert sich der LCP von 2,6 Sekunden auf 1,9 Sekunden.

Senkung der Priorität von Above-the-Fold-Bildern

Wir können das Attribut fetchpriority verwenden, um die Priorität weniger kritischer Above-the-Fold-Bilder zu senken, z. B. nicht sichtbare Bilder in einem Karussell:

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

Senkung der Priorität vorgeladener Ressourcen

Um zu verhindern, dass vorgeladene Ressourcen mit anderen kritischen Ressourcen konkurrieren, können wir ihre Priorität explizit senken:

<!-- Niedrigere Priorität nur für nicht-kritische, vorgeladene Skripte -->
<link rel="preload" as="script" href="critical-script.js" />
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low" />

<!-- CSS vorladen, ohne andere Ressourcen zu blockieren -->
<link
  rel="preload"
  as="style"
  href="theme.css"
  fetchpriority="low"
  onload="this.rel='stylesheet'"
/>

Anpassen der Skriptpriorität

Wenn eine Seite wichtige interaktive Skripte enthält, die andere Ressourcen nicht blockieren sollen, können diese als hohe Priorität markiert werden, während sie weiterhin asynchron geladen werden:

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

Wenn ein Skript von bestimmten DOM-Elementen abhängt, kann es nicht als async markiert werden. Wenn es jedoch für das Above-the-Fold-Rendering nicht erforderlich ist, können wir seine Priorität senken:

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

Anpassen der Fetch-Priorität

Standardmäßig führen Browser fetch()-Anfragen mit hoher Priorität aus. Wir können die Priorität von nicht-kritischen Datenanfragen senken:

// Wichtige Validierungsdaten (standardmäßig hohe Priorität)
let authenticate = await fetch('/user');

// Weniger wichtige Inhaltsdaten (empfohlene niedrige Priorität)
let suggestedContent = await fetch('/content/suggested', { priority: 'low' });

Überlegungen

Priority Hints können die Leistung in bestimmten Anwendungsfällen verbessern, aber es gibt ein paar Dinge zu beachten:

• Das Attribut fetchpriority ist ein Hinweis, keine Direktive. Der Browser wird versuchen, die Einstellungen des Entwicklers zu berücksichtigen, kann diese aber basierend auf seiner internen Priorisierungslogik überschreiben.

• Verwechseln Sie Priority Hints nicht mit Preloading. Sie dienen unterschiedlichen Zwecken:

  • Preloading erzwingt das Abrufen von Ressourcen, während Priority Hints nur Vorschläge sind.
  • Preloading ist einfacher zu beobachten und zu messen.

• Priority Hints ergänzen Preloading, indem sie eine feinere Steuerung der Prioritätsstufen ermöglichen. Wenn ein LCP-Bild oben auf einer Seite vorgeladen wird, bringt ein high-Priority-Hint möglicherweise keine wesentlichen Vorteile. Wenn das Preloading jedoch nach weniger wichtigen Ressourcen erfolgt, kann ein high-Priority-Hint den LCP verbessern. Verwenden Sie für kritische CSS-Hintergrundbilder fetchpriority="high".

• CDNs haben keine einheitliche Implementierung der HTTP/2-Priorisierung.

Selbst wenn ein Browser Priority Hints übermittelt, respektiert ein CDN möglicherweise nicht die angeforderte Prioritätsreihenfolge.

Zusätzliche Hinweise

Das Attribut importance

Der importance-Priority-Hint wurde erstmals 2018 als experimentelle Funktion in Chrome eingeführt und 2021 erneut aufgegriffen. Im Rahmen des Webstandards-Prozesses wurde er inzwischen ersetzt:

• In HTML wurde das Attribut in fetchpriority umbenannt.
• In JavaScript wurde es durch die Option priority ersetzt.

---

Wir sind Leapcell, Ihre erste Wahl für das Hosten von Backend-Projekten.

Leapcell ist die Next-Gen Serverless Platform für Web Hosting, Async Tasks und Redis:

Multi-Language Support

• Entwickeln Sie mit Node.js, Python, Go oder Rust.

Deploy unlimited projects for free

• zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 $ unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Developer-Experience

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeit-Metriken und -Protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

• Automatische Skalierung zur einfachen Bewältigung hoher Parallelität.
• Null Betriebsaufwand – konzentrieren Sie sich einfach auf den Aufbau.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ