English
Optimierung

Preload / Preconnect / Prefetch

Preload, Preconnect und Prefetch sind Resource Hints, also Hinweise im HTML, mit denen Browser Ressourcen oder Verbindungen früher laden. In der Suche nach „preload“ erscheinen oft Spiele und Programme, die vorab geladen werden. Hier geht es um die Webperformance. Die drei Werte des rel-Attributs im <link>-Element haben unterschiedliche Aufgaben.

Preload

Mit rel="preload" wird eine Ressource, die die aktuelle Seite sehr bald braucht, früh abgerufen, ohne sie auszuführen. Das Attribut as nennt den Typ, etwa font, image, script oder style. Für Ressourcen mit CORS, zum Beispiel Schriften, braucht der Tag crossorigin. Laut web.dev werden Schriften ohne dieses Attribut doppelt geladen. Ungenutzte Preloads kosten trotzdem Bandbreite. web.dev empfiehlt Preload vor allem für Ressourcen, die der Browser spät entdeckt, etwa Schriften aus CSS oder Hintergrundbilder.

Preconnect

rel="preconnect" baut vorab eine Verbindung zu einer anderen Domain auf, bei HTTPS mit DNS, TCP und TLS. MDN empfiehlt es nur für die wichtigsten Verbindungen und nur für Cross-Origin-Anfragen. Für weitere Domains kommt dns-prefetch infrage, das nur den DNS-Lookup erledigt.

Prefetch

rel="prefetch" ruft Ressourcen ab, die vermutlich für eine spätere Navigation gebraucht werden, und zwar mit sehr niedriger Priorität, niedriger als Preload. Wegen der Cache-Partitionierung moderner Browser nützt Prefetch bei Cross-Origin-Ressourcen wenig. MDN verweist für Dokumente auf die Speculation Rules API.

Beispiel

HTML
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="prefetch" href="/naechste-seite/">

Die Pfade und Domains im Beispiel sind Platzhalter.

Häufige Fehler

  • Preload ohne crossorigin bei Schriften, sodass die Datei zweimal geladen wird.
  • Zu viele Preloads. Laut web.dev bekommt am Ende keine Ressource Vorrang, wenn alles priorisiert wird.
  • Fehlendes oder falsches as.
  • Preconnect für Same-Origin-Anfragen.

Häufige Fragen

Was ist der Unterschied zwischen Preload und Prefetch? Preload betrifft die aktuelle Seite, Prefetch die nächste Navigation.

Zählt der Preload aus der W3C-Spezifikation noch? Das Dokument von 2022 ist als Discontinued Draft markiert. Die Beschreibung steht im HTML Living Standard.

Quellen

  1. rel=preload – MDN Web Docsdeveloper.mozilla.org
  2. rel=preconnect – MDN Web Docsdeveloper.mozilla.org
  3. rel=prefetch – MDN Web Docsdeveloper.mozilla.org
  4. Preload critical assets – web.devweb.dev
  5. Preload (Discontinued Draft, 31.3.2022) – W3Cw3.org

Stand: