Précharger les navigations futures avec rel=prefetch
Apprenez à utiliser rel=prefetch pour télécharger à l'avance les pages et ressources que vos visiteurs consulteront, et accélérer leur navigation.
Des temps de chargement plus courts améliorent l’expérience utilisateur et les taux de conversion. Si vous savez quelles pages vos visiteurs consultent ensuite, vous pouvez télécharger à l’avance les ressources de ces pages pour que la navigation suivante soit quasi instantanée. C’est exactement le rôle de l’indice rel=prefetch, l’un des indices de ressources à connaître.
Pour le SEO, l’intérêt est double. Un prefetch bien ciblé réduit fortement le temps de latence du premier octet (TTFB), car la requête trouve la ressource déjà en cache. Comme ce TTFB baisse, les métriques qui en dépendent suivent souvent, notamment le Largest Contentful Paint (LCP) et le First Contentful Paint (FCP), au cœur des Core Web Vitals.
Le prefetch est l’une des optimisations les plus satisfaisantes quand on connaît bien le parcours de ses visiteurs. Si vous savez quelle page vient après, autant en charger les ressources à l’avance. Mon garde-fou : ne préfétcher que des navigations probables, sur des réseaux qui le permettent, sinon on consomme la bande passante des internautes pour rien.
Comment fonctionne rel=prefetch
Ajouter une balise link avec rel= »prefetch » indique au navigateur de télécharger une ressource dont l’utilisateur pourrait avoir besoin plus tard : une feuille de style, un script ou même un document HTML. Ce téléchargement a lieu avec la priorité la plus basse, lorsque le navigateur est inactif, pour ne pas concurrencer les ressources de la page en cours.
Il faut garder en tête que cet indice consomme des octets supplémentaires pour des ressources pas immédiatement nécessaires. La technique doit donc s’appliquer avec discernement : ne préchargez que ce dont vous êtes sûr que les visiteurs auront besoin, et évitez de le faire sur les connexions lentes, détectables via l’API Network Information. Pour aller plus loin, le prefetch prédictif automatise ce choix.
<head>
<link rel="prefetch" href="/css/styles.css">
</head>Les principaux cas d'usage
Le prefetch peut accélérer une page de plusieurs façons selon la ressource visée. Le tableau ci-dessous résume les usages les plus courants et leur effet sur les performances.
| Cas d'usage | Exemple concret | Bénéfice principal |
|---|---|---|
Page suivante prévisible |
Précharger la fiche produit la plus consultée d’une liste, ou la page de paiement depuis le panier |
TTFB, LCP et FCP plus faibles à la navigation |
Ressource statique partagée |
Précharger un script ou un CSS réutilisé sur plusieurs pages |
Rendu plus rapide de la page suivante |
Police web non encore utilisée |
Précharger une police qui servira sur une page ultérieure |
Suppression des décalages de mise en page |
Segment JavaScript à la demande |
Précharger un module chargé lors d’une interaction future |
Réponses plus rapides, meilleur INP |
Mettre en place le prefetch
La méthode la plus simple consiste à ajouter une balise link dans l’en-tête du document. Vous pouvez aussi déclencher le préchargement via l’en-tête HTTP Link : son avantage est que le navigateur n’a pas besoin d’analyser le document pour trouver l’indice, ce qui peut apporter de légères améliorations.
Du côté des outils, des empaqueteurs comme webpack permettent de précharger des modules JavaScript grâce à des commentaires spéciaux dans les imports dynamiques. Des bibliothèques dédiées vont plus loin : quicklink précharge les liens dès qu’ils entrent dans la fenêtre d’affichage, tandis que Guess.js s’appuie sur des données d’analyse pour ne précharger que ce dont l’utilisateur a besoin. Toutes deux respectent les connexions lentes et le signal Save-Data.
Le navigateur reste libre d’exécuter ou non un prefetch, et de choisir le moment. Les ressources préchargées sont conservées dans le cache HTTP uniquement si elles sont « cachables » ; sinon, elles sont supprimées et le travail est perdu. Notez aussi que prefetch est pris en charge par la plupart des navigateurs modernes, sauf Safari, pour lequel une solution de repli reste nécessaire.
À faire
- précharger les pages dont la consultation est très probable
- préférer l’en-tête HTTP Link quand c’est possible
- respecter les connexions lentes et Save-Data
À éviter
- précharger des ressources « au cas où » sans certitude d’usage
- ignorer le coût en bande passante
- oublier la solution de repli pour Safari
Points clés à retenir
- Cibler les pages et ressources réellement probables
- Utiliser une balise link ou l'en-tête HTTP Link
- Surveiller le coût en bande passante avant de généraliser
- Couper le prefetch sur les connexions lentes et avec Save-Data
- Prévoir une solution de repli pour Safari
Le prefetch télécharge à l’avance, à faible priorité, ce que l’utilisateur consultera ensuite.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Avec quelle priorité le navigateur télécharge-t-il une ressource en rel="prefetch" ?
- Avec la priorité la plus élevée, avant tout le reste
- Avec la priorité la plus basse, lorsque le navigateur est inactif
- Avec une priorité moyenne fixée par le serveur
Le prefetch télécharge la ressource avec la priorité la plus basse, lorsque le navigateur est inactif. Elle ne se dispute donc pas la bande passante avec la page en cours.
-
Quelle différence entre prefetch et preload ?
- preload et prefetch ont la même priorité et le même usage
- prefetch concerne la page en cours, preload les navigations futures
- preload demande une ressource critique de la page en cours en priorité élevée, prefetch télécharge en priorité basse une ressource utile plus tard
Le
preloaddemande une ressource critique de la page en cours avec une priorité élevée. Leprefetchtélécharge à la priorité la plus basse une ressource utile pour plus tard. -
Le prefetch fonctionne-t-il dans tous les navigateurs ?
- Oui, il est pris en charge partout sans exception
- Non, seul Safari le prend en charge
- Il est pris en charge par la plupart des navigateurs modernes, à l'exception de Safari
Le prefetch est pris en charge par la plupart des navigateurs modernes, sauf Safari. Pour ce dernier, on peut mettre en place une technique de repli.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous hésitez sur les pages à précharger en priorité pour accélérer votre parcours visiteur ?