rel=prefetch
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das Schlüsselwort prefetch für das rel-Attribut des <link>-Elements bietet Browsern einen Hinweis darauf, dass der Nutzer die Zielressource wahrscheinlich für zukünftige Navigationsvorgänge benötigt, und ermöglicht es dem Browser daher, das Benutzererlebnis durch vorzeitiges Abrufen und Zwischenspeichern der Ressource zu verbessern. <link rel="prefetch"> wird für Navigationsressourcen auf derselben Seite oder für Unterressourcen verwendet, die auf Seiten derselben Seite verwendet werden.
Das Ergebnis wird im HTTP-Cache auf der Festplatte gespeichert. Aus diesem Grund ist es nützlich für das Pre-Fetching von Unterressourcen, auch wenn sie auf der aktuellen Seite nicht verwendet werden. Sie könnten es auch verwenden, um das nächste Dokument vorzuholen, das der Benutzer wahrscheinlich auf der Seite besucht. Allerdings müssen Sie aufgrund dessen mit Headern vorsichtig sein – bestimmte Cache-Control-Header könnten das Pre-Fetching verhindern (zum Beispiel no-cache oder no-store).
Hinweis: Aufgrund solcher Einschränkungen wird empfohlen, stattdessen die Speculation Rules API für Dokument-Prefetches zu verwenden, wo sie unterstützt wird.
<link rel="prefetch"> ist funktional äquivalent zu einem fetch()-Aufruf mit der Option priority: "low", außer dass ersteres im Allgemeinen eine noch niedrigere Priorität hat und einen HTTP-Request-Header Sec-Purpose: prefetch aufweist. Beachten Sie, dass Browser im Allgemeinen Prefetch-Ressourcen eine niedrigere Priorität zuweisen als Preload-Ressourcen (zum Beispiel angefordert über <link rel="preload">) – die aktuelle Seite ist wichtiger als die nächste.
Die Abrufanfrage für eine prefetch-Operation führt zu einer HTTP-Anfrage, die den HTTP-Header Sec-Purpose: prefetch enthält. Ein Server könnte diesen Header verwenden, um die Cache-Timeouts für die Ressourcen zu ändern oder eine andere spezielle Handhabung durchzuführen.
Die Anfrage wird auch den Sec-Fetch-Dest-Header mit dem Wert empty enthalten.
Der Accept-Header in der Anfrage entspricht dem Wert, der für normale Navigationsanfragen verwendet wird. Dies ermöglicht es dem Browser, die passenden zwischengespeicherten Ressourcen nach der Navigation zu finden.
Beispiele
Einfaches Prefetch
<link rel="prefetch" href="main.js" />
Navigation und Unterressourcen-Prefetch
Prefetching kann verwendet werden, um sowohl HTML als auch Unterressourcen für eine mögliche nächste Navigation abzurufen. Ein häufiger Anwendungsfall ist eine Website-Landingpage, die schwerere Ressourcen abruft, die vom Rest der Seite verwendet werden.
<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />
Die Auswirkungen der Cache-Partitionierung
Viele Browser implementieren jetzt eine Form der Cache-Partitionierung, die <link rel="prefetch"> für Ressourcen nutzlos macht, die für die Nutzung durch verschiedene Top-Level-Seiten bestimmt sind. Dies schließt das Hauptdokument beim Navigieren zwischen Websites ein. Zum Beispiel wäre das folgende Prefetch:
<link rel="prefetch" href="https://news.example/article" />
nicht von https://aggregator.example/ aus zugänglich.
Spezifikationen
| Specification |
|---|
| HTML # link-type-prefetch |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Spekulatives Laden für einen Vergleich von
<link rel="prefetch">und anderen ähnlichen Leistungsverbesserungsfunktionen.