Découvrez le préchargement prédictif et la façon dont Guess.js l'implémente.
Lors de la session Faster Web Navigation with Predictive Prefetching (Navigation Web plus rapide avec préchargement prédictif) lors de la conférence Google I/O 2019, j'ai commencé par parler de l'optimisation des applications Web avec le fractionnement du code et des implications potentielles sur les performances pour la navigation ultérieure sur les pages. Dans la deuxième partie, j'ai expliqué comment améliorer la vitesse de navigation en utilisant Guess.js pour configurer le préchargement prédictif:
Diviser le 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. La lenteur de chargement d'une application Web peut être frustrante pour vos utilisateurs et diminuer les conversions.
Le chargement différé est une technique efficace qui permet de réduire le nombre d'octets JavaScript que vous transférez sur le réseau. Vous pouvez utiliser plusieurs techniques pour charger les fichiers JavaScript de manière différée, notamment:
- Fractionnement du code au niveau du composant
- Fractionnement du code au niveau de la route
La division du code au niveau du composant vous permet de déplacer des composants individuels dans des blocs JavaScript distincts. Pour des événements particuliers, vous pouvez charger les scripts pertinents et afficher les composants.
Cependant, avec la division du code au niveau du routage, vous déplacez des routes entières en fragments indépendants. Lorsque les utilisateurs passent d'un itinéraire à un 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 de 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 (surchargement) consomme beaucoup de données.
- Certaines ressources dont l'utilisateur a besoin ne peuvent 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 propose une fonctionnalité de préchargement prédictif. Guess.js utilise un rapport provenant de Google Analytics ou d'un autre fournisseur de solutions d'analyse pour créer un modèle prédictif permettant de précharger intelligemment uniquement les éléments 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 à la configuration de votre pack Web 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 à des frameworks
Pour en savoir plus sur l'intégration de Guess.js à votre framework préféré, consultez ces ressources:
Pour un tutoriel rapide 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 schémas de navigation des utilisateurs à partir de votre fournisseur d'analyse préféré.
- Il mappe ensuite les URL du rapport aux fragments JavaScript produits par webpack.
- À partir des données extraites, il crée un modèle prédictif simple indiquant les pages auxquelles un utilisateur est susceptible d'accéder à partir d'une page donnée.
- Il appelle le modèle pour chaque fragment JavaScript, en prédisant les autres fragments susceptibles d'être ensuite nécessaires.
- Il ajoute des instructions de préchargement à chaque fragment.
Lorsque Guess.js est terminé, 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 fragment a.js avec la probabilité 0.2 et le fragment b.js avec la 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 est suffisant, Guess.js insérera deux balises <link rel="prefetch"> dans l'en-tête de la page, une pour chaque bloc. Si l'utilisateur est connecté à un réseau haut débit, Guess.js effectuera le préchargement des deux fragments. Si la connexion réseau de l'utilisateur est de mauvaise qualité, Guess.js ne préchargera que le fragment b.js, car il est très probable qu'il soit nécessaire.
Plus d'infos
Pour en savoir plus sur Guess.js, consultez ces ressources: