Skriptpriorität optimieren

Webfunktionen: Fetch priority

Browser weisen Skripts Standardprioritäten zu, je nachdem, wo sie im Dokument erscheinen und ob sie Attribute wie async oder defer haben. Mit fetchpriority haben Entwickler die Möglichkeit, explizit festzulegen, dass wichtige Skripts zuerst geladen werden, während unwichtige Skripts im Hintergrund bleiben.

Implementierung

  1. Wichtige Skripts identifizieren: Bestimmen Sie, welche Skripts für die Hauptfunktion der Seite oder die erste Nutzerinteraktion wichtig sind.
  2. Wichtige asynchrone Skripts priorisieren: Fügen Sie für wichtige Skripts, die mit async oder defer geladen werden, das Attribut fetchpriority="high" hinzu, damit sie während der Erkennungsphase priorisiert werden.
  3. Nicht unbedingt erforderliche Skripts depriorisieren: Fügen Sie für Skripts, die nicht sofort benötigt werden (z.B. Analysen, Anzeigen oder Widgets unterhalb des sichtbaren Bereichs), fetchpriority="low" hinzu und achten Sie darauf, dass sie ein async-, defer- oder module-Attribut haben, um Blockierungen zu vermeiden.
  4. Parser-blockierende Skripts sequenzieren: Verwenden Sie fetchpriority="low" für Parser-blockierende Skripts am Ende des Textes, um zu verhindern, dass sie mit wichtigeren Ressourcen um Bandbreite konkurrieren.

Beispielcode

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Best Practices

  • OBLIGATORISCH: Verwenden Sie fetchpriority="high" nur für maximal 1–2 kritische Skripts, um Netzwerküberlastung und eine Verwässerung der Prioritätssteigerung zu vermeiden.
  • Verwenden Sie fetchpriority="high" NUR für async-Skripts, die für Interaction to Next Paint (INP) wichtig sind.
  • DO deprioritize scripts that are not required for the initial user experience using fetchpriority="low".
  • Verwenden Sie fetchpriority NICHT für jedes Script-Tag. Es sollte nur verwendet werden, um die Standardheuristik des Browsers zu ändern, wenn diese bekanntermaßen nicht optimal ist.
  • Verwenden Sie NICHT das verworfene Attribut importance. Es wurde durch fetchpriority ersetzt.

Fallback-Strategie

Das Attribut fetchpriority ist eine progressive Verbesserung. Browser, die das Attribut nicht unterstützen, ignorieren es und verwenden ihre interne Planungslogik ohne Fehler. Für die grundlegende Verwendung ist keine explizite Featureerkennung oder Fallback-Logik erforderlich.