rel=prefetch

Das prefetch-Schlüsselwort für das rel-Attribut des <link>-Elements bietet Browsern einen Hinweis, dass der Nutzer die Zielressource für zukünftige Navigationen wahrscheinlich benötigen wird. Der Browser kann daher die Benutzererfahrung verbessern, indem er die Ressource proaktiv abruft und zwischenspeichert. <link rel="prefetch"> wird für Navigationsressourcen derselben Website oder für Unterressourcen verwendet, die von Seiten derselben Website genutzt werden.

Das Ergebnis wird auf der Festplatte im HTTP-Cache gespeichert. Deshalb ist es nützlich, Unterressourcen vorzuholen, auch wenn sie nicht von der aktuellen Seite verwendet werden. Sie könnten es auch nutzen, um das nächste Dokument vorzufolgen, das der Nutzer auf der Website wahrscheinlich besuchen wird. Allerdings müssen Sie daher vorsichtig mit Headern sein – bestimmte Cache-Control-Header könnten das Vorladen blockieren (zum Beispiel no-cache oder no-store).

<link rel="prefetch"> ist funktionell äquivalent zu einem fetch()-Aufruf mit der Option priority: "low", außer dass ersteres im Allgemeinen eine noch niedrigere Priorität hat und ein Sec-Purpose: prefetch-Header auf die Anfrage gesetzt wird. Beachten Sie, dass Browser im Allgemeinen Vorlade-Ressourcen eine höhere Priorität als Vorabruf-Ressourcen geben (z.B. angefordert via <link rel="preload">) – die aktuelle Seite ist wichtiger als die nächste.

Die Fetch-Anfrage 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-Zeitüberschreitungen für die Ressourcen zu ändern oder eine andere spezielle Verarbeitung vorzunehmen. 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 nach der Navigation zu finden.