Prefetch, prerender et précache : anticiper le chargement
Précharger, prérendre et mettre en pré-cache : trois techniques pour charger les pages futures à l'avance et rendre la navigation quasi instantanée.
Optimiser la performance, c’est souvent éliminer les ressources inutiles. Pourtant, dans certains cas, il est judicieux de charger des ressources avant qu’elles ne soient nécessaires. Différer un chargement allège la page initiale, mais peut introduire un délai au moment d’une interaction ou d’une navigation suivante, si les ressources ne sont pas déjà prêtes.
L’enjeu est de trouver le bon équilibre : ne pas gaspiller de bande passante pour des ressources jamais utilisées, sans pour autant ralentir les actions futures. Trois techniques aident à y parvenir : le préchargement de ressources, le prérendu de pages entières et le précache via un service worker. Bien employées, elles rendent les navigations quasi instantanées, un atout direct pour l’expérience utilisateur et les Core Web Vitals.
La performance n’est pas qu’une affaire de suppression : savoir charger en avance, au bon moment, fait partie du métier. Le risque, c’est de basculer dans l’excès inverse et de précharger des ressources jamais utilisées. Entre prefetch, prerender et précache, le bon réflexe est de choisir selon la probabilité d’usage, pas selon l’envie d’aller vite à tout prix.
Trois techniques pour anticiper le chargement
Ces trois approches ne se valent pas et ne répondent pas aux mêmes besoins. Le tableau ci-dessous les compare pour vous aider à choisir.
| Technique | Ce qu'elle fait | Quand l'utiliser |
|---|---|---|
Prefetch |
Télécharge une ressource ou une page à faible priorité et la met en cache |
Ressource ou page probable dans un avenir proche |
Prerender |
Récupère et affiche une page entière en arrière-plan, JavaScript compris |
Navigation très probable, à utiliser avec parcimonie |
Précache de service worker |
Enregistre des ressources via l’API Cache dès l’installation du service worker |
Ressources clés réutilisées, besoin de compatibilité étendue |
Précharger ressources et pages
L’indice link rel= »prefetch » signale au navigateur qu’une ressource (image, feuille de style, script) sera sans doute utile bientôt. La requête part alors à la priorité la plus basse, sans gêner la page en cours, exactement comme pour précharger les navigations futures. On peut aussi précharger une page entière et ses sous-ressources en ajoutant l’attribut as= »document ».
Sur les navigateurs Chromium, l’API Speculation Rules offre une alternative plus performante : un objet JSON, inséré dans le HTML, décrit les actions prefetch ou prerender et la liste des URL concernées. Différence importante : les ressources préchargées via les règles de spéculation sont stockées en mémoire, donc plus rapides à récupérer, là où rel= »prefetch » les place dans le cache HTTP.
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>Prérendre une page et mettre en pré-cache
Le prérendu va plus loin que le préchargement : il récupère ET affiche la page entière en arrière-plan, en exécutant même son JavaScript. Quand l’utilisateur y accède, la page passe au premier plan presque instantanément, dans la lignée du prefetch prédictif. Comme le JavaScript est coûteux, le prerender doit rester réservé aux cas où vous êtes raisonnablement sûr de l’intention de l’utilisateur.
Le précache de service worker est la troisième voie. Le service worker enregistre des ressources via l’API Cache au moment de son installation, puis les sert directement, sans passer par le réseau, sur toutes les pages qu’il contrôle. La bibliothèque Workbox simplifie ce travail : elle s’appuie sur un manifeste de précache, suit les versions des ressources et supprime automatiquement les entrées périmées lors d’une mise à jour, un atout aussi pour le cache hors-ligne.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);Prefetch, prerender et précache consomment tous de la bande passante, du stockage et du processeur. Ne préchargez que ce qui a de réelles chances d’être utilisé. Évitez de précharger des documents d’origine croisée ou des pages personnalisées (réponses dynamiques pour sessions authentifiées), rarement mises en cache et souvent inutilisées. En cas de doute, mieux vaut pré-cacher trop peu que trop, et coupez tout préchargement si l’utilisateur a activé Save-Data.
À faire
- précharger uniquement les ressources probables, sur connexions rapides
- réserver le prerender aux navigations quasi certaines
- confier le précache à Workbox pour gérer les versions
À éviter
- précharger des documents d’origine croisée ou personnalisés
- abuser du prerender qui exécute tout le JavaScript
- surcharger le manifeste de précache
Points clés à retenir
- Précharger ressources et pages avec rel=prefetch ou les règles de spéculation
- Réserver le prerender aux navigations très probables
- Confier le précache à un service worker via Workbox
- Préférer le cache mémoire des règles de spéculation pour la vitesse
- Respecter Save-Data et les connexions lentes
Trois techniques permettent de charger l’avenir à l’avance, chacune avec son coût.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Quelle différence entre précharger et prérendre une page ?
- Précharger affiche la page entière, prérendre la garde en mémoire
- Précharger récupère la page et ses sous-ressources, prérendre va plus loin et affiche la page entière en arrière-plan
- Les deux font exactement la même chose
Le préchargement récupère la page et ses sous-ressources et les met en cache. Le prérendu va plus loin : il affiche la page entière en arrière-plan en exécutant même son JavaScript.
-
Quel est l'inconvénient commun du prefetch, du prerender et du précache ?
- Ils ne fonctionnent que sur les connexions lentes
- Ils ralentissent systématiquement la page en cours
- Ils consomment de la bande passante, du stockage et du processeur
Ces trois techniques consomment toutes de la bande passante, du stockage et du processeur. Mieux vaut ne précharger que ce qui a de réelles chances d’être utilisé.
-
Pourquoi confier le précache à Workbox plutôt qu'à un service worker écrit à la main ?
- Parce que Workbox suit les versions des ressources et supprime automatiquement les entrées périmées
- Parce que Workbox est plus rapide à exécuter dans le navigateur
- Parce que Workbox interdit le prérendu coûteux
Workbox suit les versions des ressources mises en cache et supprime automatiquement les entrées périmées lors d’une mise à jour, ce qui évite de gérer cette logique soi-même.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous voulez savoir laquelle de ces techniques d'anticipation convient à votre site sans gaspiller de ressources ?