Découvrez le préchargement prédictif et comment Guess.js le met en œuvre.
Lors de la session Accelerated 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 à la division du code, ainsi que des 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:
Fractionnement 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 expédiez. Le fait d'attendre le chargement d'une application Web lente peut frustrer vos utilisateurs et entraîner une baisse des 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:
- Fractionnement du code au niveau du composant
- Division du code au niveau du routage
Avec la division du code au niveau des composants, vous pouvez déplacer des composants individuels dans des blocs JavaScript distincts. Lors d'événements particuliers, vous pouvez charger les scripts pertinents et afficher les composants.
Toutefois, avec la répartition du code au niveau des routes, vous déplacez des routes entières dans des 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 deux écueils courants se présentent :
- 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édictif. Guess.js utilise un rapport Google Analytics ou d'un autre fournisseur d'analyse pour créer un modèle prédictif permettant de précharger intelligemment uniquement ce dont l'utilisateur a besoin.
Guess.js est compatible avec Angular, Next.js, Nuxt.js et Gatsby. Pour l'utiliser dans votre application, ajoutez ces lignes à 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 savoir comment intégrer Guess.js à votre framework préféré, consultez les ressources suivantes :
Pour une présentation rapide de l'intégration avec Angular, regardez cette vidéo :
Comment fonctionne Guess.js ?
Voici comment Guess.js implémente le préchargement prédictif :
- Il commence par extraire les données sur les habitudes de navigation des utilisateurs à partir de votre fournisseur d'analyse préféré.
- Il mappe ensuite les URL du rapport aux blocs JavaScript produits par webpack.
- Sur la base des données extraites, il crée un modèle prédictif simple des pages vers lesquelles un utilisateur est susceptible d'accéder à partir d'une page donnée.
- Il appelle le modèle pour chaque bloc JavaScript, en prédisant les autres blocs susceptibles d'être nécessaires ensuite.
- Il ajoute des instructions de préchargement à chaque fragment.
Lorsque Guess.js est terminé, chaque bloc 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 segment a.js avec une probabilité de 0.2 et le segment b.js avec une probabilité de 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 précharge les deux blocs. Si la connexion réseau de l'utilisateur est mauvaise, Guess.js ne précharge que le segment b.js, car il a de fortes chances d'être nécessaire.
En savoir plus
Pour en savoir plus sur Guess.js, consultez les ressources suivantes :