Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

rel="prefetch"

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

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).

Note : En raison de ces limitations, il est conseillé d'utiliser l'API Speculation Rules pour le préchargement de documents lorsque cela est possible.

<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.

Exemples

Préchargement basique

js
<link rel="prefetch" href="main.js" />

Préchargement de navigation et de sous-ressources

Le préchargement peut servir à récupérer à la fois des fichiers HTML et des sous-ressources pour une navigation future. Un cas courant est d'avoir une page d'accueil qui précharge des ressources plus « lourdes » utilisées par le reste du site.

html
<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />

Effets du partitionnement du cache

De nombreux navigateurs mettent désormais en œuvre une forme de partitionnement du cache, ce qui rend <link rel="prefetch"> inutile pour les ressources destinées à être utilisées par différents sites principaux. Cela inclut le document principal lors d'une navigation inter-sites. Par exemple, le préchargement suivant :

html
<link rel="prefetch" href="https://actu.exemple/article" />

Ne sera pas accessible depuis https://agregateur.exemple/.

Spécifications

Specification
HTML
# link-type-prefetch

Compatibilité des navigateurs

Voir aussi

  • Chargement spéculatif pour une comparaison entre <link rel="prefetch"> et d'autres fonctionnalités d'amélioration des performances.