rel="prefetch"

Le mot-clé prefetch pour l'attribut rel de l'élément <link> indique au navigateur que l'utilisateur·ice aura probablement besoin de la ressource cible lors de navigations futures. Le navigateur peut donc améliorer l'expérience en récupérant et en mettant en cache la ressource de façon anticipée. <link rel="prefetch"> est utilisé pour les ressources de navigation internes au site ou pour les sous-ressources utilisées par des pages du même site.

Le résultat est conservé dans le cache HTTP sur le disque. Cela le rend utile pour précharger des sous-ressources, même si elles ne sont pas utilisées par la page courante. Vous pouvez aussi l'utiliser pour précharger le prochain document que l'utilisateur·ice est susceptible de visiter sur le site. Cependant, il faut faire attention aux en-têtes — certains en-têtes Cache-Control peuvent empêcher le préchargement (par exemple no-cache ou no-store).

<link rel="prefetch"> est fonctionnellement équivalent à un appel fetch() avec l'option priority: "low", sauf que le préchargement aura généralement une priorité encore plus faible, et la requête inclura l'en-tête Sec-Purpose: prefetch. En général, les navigateurs donnent une priorité plus faible aux ressources préchargées qu'à celles préchargées via <link rel="preload"> — la page courante est plus importante que la suivante.

La requête de récupération pour une opération prefetch inclut l'en-tête HTTP Sec-Purpose: prefetch. Un serveur peut utiliser cet en-tête pour modifier les délais d'expiration du cache ou effectuer un traitement particulier. La requête inclut aussi l'en-tête Sec-Fetch-Dest avec la valeur empty.

L'en-tête Accept de la requête correspond à celui utilisé pour les requêtes de navigation normales. Cela permet au navigateur de retrouver les ressources mises en cache lors de la navigation.