rel="prefetch"

Das prefetch Schlüsselwort für das rel-Attribut des <link>-Elements bietet einen Hinweis für Browser, dass der Benutzer die Zielressource wahrscheinlich für zukünftige Navigationen benötigt. Daher kann der Browser die Benutzererfahrung wahrscheinlich verbessern, indem er die Ressource vorab abruft und zwischenspeichert. <link rel="prefetch"> wird für Navigationen innerhalb derselben Seite oder für Unterressourcen, die von Seiten derselben Site verwendet werden, verwendet.

Das Ergebnis wird im HTTP-Cache auf der Festplatte gespeichert. Daher ist es nützlich, Unterressourcen vorab abzurufen, auch wenn sie auf der aktuellen Seite nicht verwendet werden. Sie könnten es auch verwenden, um das nächste Dokument vorab abzurufen, das der Benutzer wahrscheinlich auf der Site besuchen wird. Allerdings müssen Sie vorsichtig mit Headern sein — bestimmte Cache-Control-Header könnten das Vorabrufen blockieren (z. B. no-cache oder no-store).

<link rel="prefetch"> ist funktional äquivalent zu einem fetch()-Aufruf mit einer priority: "low"-Option, wobei ersteres generell eine noch niedrigere Priorität hat und einen Sec-Purpose: prefetch-Header bei der Anfrage hat. Beachten Sie, dass Browser im Allgemeinen Vorabruf-Ressourcen eine niedrigere Priorität geben als Vorlade-Ressourcen (z. B. angefordert über <link rel="preload">) — die aktuelle Seite ist wichtiger als die nächste.

Der Abruf 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 andere spezielle Handhabungen durchzuführen. Die Anfrage enthält auch den Sec-Fetch-Dest-Header mit dem Wert empty.

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 bei der folgenden Navigation zu finden.