Kodokon kodokon.com

Ladeperformance: defer, async, preload und prefetch

Ordne die Ausführung deiner Skripte mit defer und async, steuere dann das Netzwerk mit preload, preconnect und prefetch.

10 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

Ein klassisches <script src> blockiert das Parsen des HTML: Der Browser stoppt, lädt herunter, führt aus und macht dann weiter. Zwei Attribute ändern das Spiel. defer lädt parallel zum Parsen herunter und führt die Skripte in Dokumentreihenfolge aus, kurz vor DOMContentLoaded: Es ist die Standardwahl für deinen Anwendungscode, der vom DOM und von anderen Skripten abhängen kann. async lädt ebenfalls parallel herunter, führt aber aus, sobald die Datei ankommt, ohne garantierte Reihenfolge: Reserviere es für eigenständige Skripte wie Analytics, die von nichts abhängen.

HTML
<script src="/js/analytics.js" async></script>
<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>
vendor.js läuft immer vor app.js

Manche kritischen Ressourcen entdeckt der Browser erst sehr spät: eine Schriftart, die in einer CSS-Datei referenziert wird, ein Bild, das in JavaScript geladen wird. <link rel="preload"> behebt diese späte Entdeckung, indem es die Ressource direkt im <head> deklariert, mit dem verpflichtenden Attribut as, damit der Browser die richtige Priorität und den richtigen Cache anwendet. Musterfall: Webfonts, die sonst erst angefordert werden, nachdem das CSS heruntergeladen und geparst wurde.

HTML
<link rel="preload" as="font" type="font/woff2"
      href="/fonts/inter-var.woff2" crossorigin>
<link rel="preload" as="image"
      href="/img/hero-1600.jpg" fetchpriority="high">
Frühe Entdeckung einer Schriftart und des LCP-Bildes

Letzte Familie: die Netzwerk-Hinweise mit niedriger Priorität. <link rel="preconnect"> stellt die vollständige Verbindung im Voraus her (DNS, TCP, TLS) zu einem Drittanbieter-Origin, den du mit Sicherheit nutzen wirst: bis zu 300 ms gespart bei der ersten Anfrage. dns-prefetch ist sein leichtgewichtiger Cousin (nur DNS-Auflösung), nützlich als Rückfallebene für weniger sichere Origins. Und prefetch lädt in der Leerlaufzeit eine Ressource herunter, die für die nächste Navigation gedacht ist: zum Beispiel die Checkout-Seite vom Warenkorb aus. Der Kompromiss ist klar: preload bedient die aktuelle Seite, prefetch setzt auf die nächste.

HTML
<link rel="preconnect"
      href="https://api.example.com">
<link rel="dns-prefetch"
      href="https://cdn.example.com">
<link rel="prefetch" href="/checkout.html">
Frühe Verbindungen und eine Wette auf die nächste Navigation

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Welche Garantie bietet defer, die async nicht bietet?
    • Das Herunterladen parallel zum Parsen des HTML
    • Die Ausführung in Dokumentreihenfolge, vor DOMContentLoaded
    • Die Ausführung vor jedem Rendering der Seite
  2. Warum ist crossorigin bei einem preload einer Schriftart mit gleichem Origin erforderlich?
    • Schriftarten werden immer im CORS-Modus angefordert; ohne das wird die Datei zweimal heruntergeladen
    • Es ist eine Sicherheitsanforderung des WOFF2-Formats
    • Ohne das wird der preload von der Standard-CSP blockiert
  3. Was ist die richtige Verwendung von rel="prefetch"?
    • Eine kritische Ressource auf der aktuellen Seite beschleunigen
    • Mit niedriger Priorität eine wahrscheinliche Ressource für die nächste Navigation herunterladen
    • Eine Datei ins dauerhafte Caching zwingen