Le prefetch prédictif : précharger ce qui sera utile
Le prefetch prédictif précharge intelligemment ce que l'utilisateur consultera ensuite. Découvrez son principe et son implémentation avec Guess.js.
Le JavaScript fait partie des ressources les plus coûteuses qu’un site envoie. Pour alléger le chargement initial, on fractionne le code et on le charge de manière différée. Mais cette technique de fractionnement du code a une contrepartie : lorsqu’un visiteur passe d’une page à l’autre, il doit télécharger le code associé à la nouvelle route, ce qui peut provoquer des délais, surtout sur les réseaux lents.
Le prefetch prédictif répond à ce problème. Plutôt que de tout précharger ou de précharger au hasard, il utilise des données sur les habitudes de navigation pour deviner ce que l’utilisateur consultera ensuite et ne précharger que cela. Pour le SEO, c’est un bon compromis : on accélère les parcours réels sans alourdir inutilement le réseau, ce qui se ressent sur l’expérience utilisateur et les métriques de performance.
Précharger au hasard ou tout précharger, ce sont deux façons de gaspiller. C’est là que le prefetch prédictif devient intéressant : on s’appuie sur les habitudes réelles de navigation pour anticiper la bonne route. Une approche guidée par les données comme Guess.js a ma préférence, car elle réserve l’effort réseau à ce que l’utilisateur a de fortes chances de consulter.
Les deux écueils du préchargement classique
La méthode habituelle consiste à utiliser rel= »prefetch » pour précharger les navigations futures, en téléchargeant et en mettant en cache des ressources susceptibles de servir bientôt. Mais cette approche présente deux pièges courants que le prefetch prédictif vient corriger.
| Écueil | Conséquence | Réponse du prefetch prédictif |
|---|---|---|
Préchargement excessif |
Trop de ressources préchargées, beaucoup de données consommées pour rien |
Sélection des seules ressources probables d’après les données |
Ressources oubliées |
Certaines pages réellement utiles ne sont jamais préchargées |
Modèle prédictif qui anticipe les parcours fréquents |
Probabilité non pondérée |
Toutes les ressources traitées de la même façon |
Probabilité associée à chaque segment, modulée selon la connexion |
Le prefetch prédictif avec Guess.js
Guess.js est une bibliothèque JavaScript qui implémente le prefetch prédictif. Elle exploite un rapport Google Analytics, ou celui d’un autre fournisseur, pour construire un modèle prédictif et ne précharger que ce dont l’utilisateur a besoin. Elle est compatible avec des frameworks comme Angular, Next.js, Nuxt.js et Gatsby.
Pour l’activer, on ajoute le plug-in à la configuration de webpack en indiquant l’identifiant de la vue analytique. Si vous n’utilisez pas Google Analytics, vous pouvez spécifier un autre fournisseur de données. La bibliothèque se charge ensuite de relier les URL du rapport aux segments JavaScript produits par webpack.
const { GuessPlugin } = require('guess-webpack');
plugins: [
new GuessPlugin({ GA: 'XXXXXX' })
];Comment Guess.js décide quoi précharger
Le fonctionnement se déroule en plusieurs étapes. Guess.js extrait d’abord les données de navigation depuis votre fournisseur d’analyse, puis associe les URL aux segments JavaScript. À partir de là, il construit un modèle prédictif des pages vers lesquelles un utilisateur est susceptible d’aller depuis une page donnée, et insère dans chaque segment des instructions de préchargement assorties d’une probabilité.
Au moment de l’exécution, Guess.js vérifie la vitesse de connexion. Sur un réseau rapide, il précharge tous les segments probables. Sur une connexion médiocre, il se limite au segment le plus probable. Cette pondération évite de gaspiller la bande passante des visiteurs les moins bien connectés tout en accélérant les parcours les plus fréquents.
La qualité du prefetch prédictif repose entièrement sur vos données d’analyse. Si votre suivi est incomplet ou peu représentatif, le modèle préchargera mal et l’effet sera faible, voire contre-productif. Assurez-vous d’un suivi analytique fiable avant de compter sur Guess.js, et respectez toujours la vitesse de connexion de l’utilisateur.
À faire
- s’appuyer sur des données d’analyse fiables et représentatives
- pondérer le préchargement selon la connexion
- cibler les parcours réellement fréquents
À éviter
- précharger toutes les routes sans distinction
- ignorer la qualité du réseau de l’utilisateur
- déployer un modèle prédictif sur un suivi analytique lacunaire
Points clés à retenir
- Corriger les deux écueils du prefetch : excès et oublis
- Construire un modèle prédictif à partir de données d'analyse
- Utiliser Guess.js avec Angular, Next.js, Nuxt.js ou Gatsby
- Pondérer chaque segment par une probabilité
- Couper ou réduire le préchargement sur les connexions lentes
Le prefetch prédictif précharge seulement ce que l’utilisateur consultera probablement.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
En quoi le prefetch prédictif diffère-t-il du prefetch classique ?
- Le prefetch prédictif s'appuie sur des données de navigation pour deviner automatiquement ce qui sera utile
- Le prefetch prédictif précharge manuellement les ressources que vous désignez
- Le prefetch prédictif précharge toutes les routes sans distinction
Le prefetch classique précharge des ressources que vous désignez à la main. Le prefetch prédictif exploite des données de navigation pour deviner automatiquement les pages qui seront utiles.
-
Sur quoi repose entièrement la qualité du prefetch prédictif ?
- Sur des données d'analyse fiables et représentatives
- Sur la vitesse du serveur
- Sur le nombre total de routes du site
La qualité du prefetch prédictif dépend entièrement des données d’analyse. Un suivi incomplet ou peu représentatif conduit le modèle à précharger mal.
-
Que fait Guess.js sur une connexion lente ?
- Il désactive complètement tout préchargement
- Il vérifie la vitesse et ne précharge que le segment le plus probable
- Il précharge toutes les routes pour compenser la lenteur
Guess.js vérifie la vitesse de connexion avant de précharger. Sur un réseau médiocre, il se limite au segment le plus probable.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous voulez exploiter vos données de navigation pour précharger intelligemment les bonnes pages ?