Priorität für Vorabladen optimieren

Webfunktionen: Fetch priority <link rel="preload">

Durch das Vorabladen von Ressourcen mit <link rel="preload"> wird dem Browser signalisiert, dass eine Ressource bald benötigt wird. Preloads übernehmen jedoch die Standardpriorität für den Ressourcentyp. Bei Bildern ist diese Priorität niedrig. Mit fetchpriority können Sie diese relative Priorität verfeinern. Insbesondere können Sie dafür sorgen, dass Bilder mit einer hohen Priorität vorab geladen werden, damit sie früher starten und mehr Bandbreitenressourcen nutzen können.

Implementierung

  1. Kandidaten für das Vorabladen identifizieren: Suchen Sie nach Ressourcen, die vom Browser nicht frühzeitig erkannt werden (z.B. Posterbilder für Videos oder Hintergrundbilder in CSS), aber für das Erscheinungsbild der Seite wichtig sind.
  2. Wichtige Bilder vorab laden: Verwenden Sie für das LCP-Bild oder andere wichtige Bilder, die nicht standardmäßig priorisiert werden, <link rel="preload" fetchpriority="high">, damit sie vor anderen Vorabladevorgängen priorisiert werden. Schriftarten haben standardmäßig bereits eine hohe Priorität.
  3. Nicht kritische Vorladevorgänge depriorisieren: Verwenden Sie für Ressourcen, die für das erste Rendering nicht kritisch sind (z.B. ein Hintergrundvideo oder sekundäre Schriftarten), <link rel="preload" fetchpriority="low">.
  4. Mit Ressourcentypen abstimmen: Beachten Sie, dass verschiedene as-Typen unterschiedliche Standardprioritäten haben. Verwenden Sie fetchpriority, um diese Standardwerte bei Bedarf zu überschreiben.

Beispielcode

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Best Practices

  • OBLIGATORISCH: Verwenden Sie fetchpriority="high" nur für maximal ein bis zwei kritische Bildvorladevorgänge, um Netzwerkkonflikte und eine Verwässerung der Prioritätssteigerung zu vermeiden.
  • OBLIGATORISCH: Verwenden Sie fetchpriority="high" für Largest Contentful Paint (LCP)-Bilder.
  • EMPFOHLEN: Begrenzen Sie die Gesamtzahl der Vorabladungen auf einer Seite auf maximal 2 Bilder und 2–3 wichtige Schriftarten, um Bandbreitenkonflikte zu vermeiden.
  • DO use fetchpriority="low" for preloads that you want the browser to start early but not at the expense of critical resources (especially non-critical fonts).
  • Geben Sie das Attribut as korrekt an, damit das Vorabladen verwendet wird.
  • EMPFOHLEN: Kritische Ressourcen wie LCP-Bilder sollten statisch im HTML-Code über <img>-Tags auffindbar sein, anstatt sich auf das Vorabladen von Hintergrundbildern zu verlassen.
  • DO ensure that font preloads always have the crossorigin attribute (even if same-origin).
  • Verwenden Sie NICHT das verworfene Attribut importance. Es wurde durch fetchpriority ersetzt.

Fallback-Strategie

Das Attribut fetchpriority für <link rel="preload"> ist eine progressive Verbesserung. Browser, die das Attribut nicht unterstützen, laden die Ressource trotzdem vorab, verwenden aber die Standardpriorität für diesen Ressourcentyp. Geben Sie immer die richtigen Attribute für as und type an, um die Kompatibilität zu gewährleisten.