Découvrez le préchargement prédictif et comment Guess.js le met en œuvre.
Lors de la session Fast Web Navigation with Predictive Prefetching (Navigation Web plus rapide avec le préchargement prédictif) de Google I/O 2019, j'ai commencé par parler de l'optimisation des applications Web grâce au fractionnement de code, ainsi qu'aux conséquences potentielles sur les performances pour la navigation ultérieure sur les pages. Dans la deuxième partie, nous avons vu comment améliorer la vitesse de navigation en utilisant Guess.js pour configurer le préchargement prédictif:
Division du code pour des applications Web plus rapides
Les applications Web sont lentes, et JavaScript fait partie des ressources les plus coûteuses que vous proposez. Attendre le chargement lent d'une application Web peut frustrer vos utilisateurs et faire baisser le nombre de conversions.
Le chargement différé est une technique efficace pour réduire le nombre d'octets JavaScript que vous transférez sur le réseau. Vous pouvez utiliser plusieurs techniques pour charger JavaScript en différé. Par exemple:
- Division du code au niveau du composant
- Répartition du code au niveau de la route
Avec la division du code au niveau du composant, vous pouvez déplacer des composants individuels dans des blocs JavaScript distincts. Lors d'événements particuliers, vous pouvez charger les scripts appropriés et afficher les composants.
Toutefois, avec la division du code au niveau de la route, vous déplacez des routes entières en segments indépendants. Lorsque les utilisateurs passent d'une route à une autre, ils doivent télécharger le code JavaScript associé et amorcer la page demandée. Ces opérations peuvent entraîner des retards importants, en particulier sur les réseaux lents.
Préchargement JavaScript
Le préchargement permet au navigateur de télécharger et de mettre en cache les ressources dont l'utilisateur est susceptible d'avoir besoin prochainement. La méthode habituelle consiste à utiliser <link rel="prefetch">, mais il existe deux écueils courants:
- Le préchargement d'un trop grand nombre de ressources (surrécupération) consomme beaucoup de données.
- Certaines ressources dont l'utilisateur a besoin peuvent ne jamais être préchargées.
Le préchargement prédictif résout ces problèmes en utilisant un rapport sur les habitudes de navigation des utilisateurs pour déterminer les éléments à précharger.
Préchargement prédictif avec Guess.js
Guess.js est une bibliothèque JavaScript qui fournit une fonctionnalité de préchargement prédictive. Guess.js utilise un rapport de Google Analytics ou d'un autre fournisseur de solutions d'analyse pour créer un modèle prédictif qui peut être utilisé pour précharger intelligemment uniquement ce dont l'utilisateur est susceptible d'avoir besoin.
Guess.js s'intègre à Angular, Next.js, Nuxt.js et Gatsby. Pour l'utiliser dans votre application, ajoutez les lignes suivantes à votre configuration webpack afin de spécifier un ID de vue Google Analytics:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Si vous n'utilisez pas Google Analytics, vous pouvez spécifier un reportProvider et télécharger les données à partir de votre service préféré.
Intégration aux frameworks
Pour en savoir plus sur l'intégration de Guess.js dans votre framework préféré, consultez ces ressources:
Pour un rapide tutoriel sur l'intégration à Angular, regardez cette vidéo:
Comment fonctionne Guess.js ?
Voici comment Guess.js implémente le préchargement prédictif:
- Il extrait d'abord des données pour les modèles de navigation des utilisateurs à partir de votre fournisseur d'analyse préféré.
- Il mappe ensuite les URL du rapport avec les fragments JavaScript produits par webpack.
- À partir des données extraites, il crée un modèle prédictif simple des pages auxquelles un utilisateur est susceptible d'accéder à partir d'une page donnée.
- Elle appelle le modèle pour chaque fragment JavaScript, en prédisant les autres fragments susceptibles d'être nécessaires par la suite.
- Il ajoute des instructions de préchargement à chaque fragment.
À la fin de Guess.js, chaque fragment contient des instructions de préchargement semblables à celles-ci:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Ce code généré par Guess.js indique au navigateur d'envisager de précharger le bloc a.js avec une probabilité 0.2 et le bloc b.js avec une probabilité 0.8.
Une fois que le navigateur a exécuté le code, Guess.js vérifie la vitesse de connexion de l'utilisateur. Si cela suffit, Guess.js insère deux balises <link rel="prefetch"> dans l'en-tête de la page, une pour chaque fragment. Si l'utilisateur se trouve sur un réseau à haut débit, Guess.js effectuera le préchargement des deux blocs. Si la connexion réseau de l'utilisateur est mauvaise, Guess.js ne précharge que le fragment b.js, car il est très probable qu'il soit nécessaire.
En savoir plus
Pour en savoir plus sur Guess.js, consultez ces ressources: