Dans cet atelier de programmation, les performances de la page Web suivante sont améliorées en préchargeant et en préextrayant quelques ressources :
Mesurer
Mesurez d'abord les performances du site Web avant d'ajouter des optimisations.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
.
Exécutez l'audit des performances Lighthouse (Lighthouse > Options > Performances) sur la version en ligne de votre projet Glitch (voir aussi Découvrir les opportunités d'amélioration des performances avec Lighthouse).
Lighthouse affiche l'échec de l'audit suivant pour une ressource récupérée tardivement :
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Réseau.
Le fichier main.css n'est pas récupéré par un élément Link (<link>) placé dans le document HTML, mais un fichier JavaScript distinct, fetch-css.js, associe l'élément Link au DOM après l'événement window.onLoad. Cela signifie que le fichier n'est récupéré qu'après que le navigateur a terminé d'analyser et d'exécuter le fichier JS. De même, une police Web (K2D.woff2) spécifiée dans main.css n'est récupérée qu'une fois le fichier CSS téléchargé.
La chaîne de demandes critiques représente l'ordre des ressources que le navigateur priorise et récupère. Pour cette page Web, il ressemble actuellement à ceci :
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
Étant donné que le fichier CSS se trouve au troisième niveau de la chaîne de requête, Lighthouse l'a identifié comme une ressource découverte tardivement.
Précharger les ressources critiques
Le fichier main.css est un élément essentiel qui est nécessaire immédiatement dès que la page est chargée. Pour les fichiers importants comme cette ressource, qui sont récupérés tardivement dans votre application, utilisez une balise de préchargement de lien pour informer le navigateur de les télécharger plus tôt en ajoutant un élément Link à l'en-tête du document.
Ajoutez une balise de préchargement pour cette application :
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
L'attribut as permet d'identifier le type de ressource récupéré, et as="style" permet de précharger les fichiers de feuille de style.
Rechargez l'application et examinez le panneau Réseau dans les outils de développement.
Remarquez comment le navigateur récupère le fichier CSS avant même que l'analyse du fichier JavaScript responsable de la récupération ne soit terminée. Avec le préchargement, le navigateur sait qu'il doit récupérer la ressource de manière préventive en partant du principe qu'elle est essentielle pour la page Web.
Si elle n'est pas utilisée correctement, la préchargement peut nuire aux performances en effectuant des requêtes inutiles pour des ressources qui ne sont pas utilisées. Dans cette application, details.css est un autre fichier CSS situé à la racine du projet, mais utilisé pour un /details route distinct. Pour montrer un exemple d'utilisation incorrecte du préchargement, ajoutez également un indice de préchargement pour cette ressource.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Rechargez l'application et examinez le panneau Réseau.
Une requête est envoyée pour récupérer details.css, même s'il n'est pas utilisé par la page Web.
Chrome affiche un avertissement dans le panneau Console lorsqu'une ressource préchargée n'est pas utilisée par la page quelques secondes après son chargement.
Utilisez cet avertissement pour identifier les ressources préchargées qui ne sont pas utilisées immédiatement par votre page Web. Vous pouvez maintenant supprimer le lien de préchargement inutile pour cette page.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Pour obtenir la liste de tous les types de ressources pouvant être récupérés, ainsi que les valeurs correctes à utiliser pour l'attribut as, consultez l'article MDN sur le préchargement.
Précharger les ressources futures
La prérécupération est une autre indication de navigateur qui peut être utilisée pour demander un élément utilisé pour un autre itinéraire de navigation, mais à une priorité inférieure à celle des autres éléments importants nécessaires pour la page actuelle.
Sur ce site Web, lorsque vous cliquez sur l'image, vous êtes redirigé vers un autre itinéraire details/.
Un fichier CSS distinct, details.css, contient tous les styles nécessaires pour cette page simple. Ajoutez un élément de lien à index.html pour précharger cette ressource.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Pour comprendre comment cela déclenche une requête pour le fichier, ouvrez le panneau Réseau dans les outils pour les développeurs et décochez l'option Désactiver le cache.
Rechargez l'application et notez qu'une requête de très faible priorité est effectuée pour details.css une fois que tous les autres fichiers ont été récupérés.
Une fois les outils de développement ouverts, cliquez sur l'image du site Web pour accéder à la page details.
Étant donné qu'un élément de lien est utilisé dans details.html pour récupérer details.css, une requête est effectuée pour la ressource comme prévu.
Cliquez sur la requête réseau details.css dans les outils de développement pour afficher ses détails. Vous remarquerez que le fichier est récupéré à partir du cache disque du navigateur.
En tirant parti du temps d'inactivité du navigateur, la prélecture permet de demander une ressource nécessaire pour une autre page de manière anticipée. Cela accélère les futures requêtes de navigation en permettant au navigateur de mettre en cache l'élément plus tôt et de le diffuser à partir du cache si nécessaire.
Préchargement et prélecture avec webpack
L'article Réduire les charges utiles JavaScript avec le fractionnement du code explique comment utiliser les importations dynamiques pour fractionner un bundle en plusieurs blocs. Cela est illustré par une application simple qui importe dynamiquement un module à partir de Lodash lorsqu'un formulaire est envoyé.
Vous pouvez accéder à Glitch pour cette application ici.
Le bloc de code suivant, qui se trouve dans src/index.js,, est responsable de l'importation dynamique de la méthode lorsque l'utilisateur clique sur le bouton.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
La division d'un bundle améliore le temps de chargement des pages en réduisant sa taille initiale. La version 4.6.0 de webpack permet de précharger ou de préextraire les blocs importés de manière dynamique. En utilisant cette application comme exemple, la méthode lodash peut être préchargée pendant le temps d'inactivité du navigateur. Lorsqu'un utilisateur appuie sur le bouton, la ressource est récupérée sans délai.
Utilisez le paramètre de commentaire webpackPrefetch spécifique dans une importation dynamique pour précharger un bloc particulier.
Voici à quoi cela ressemblerait avec cette application en particulier.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Une fois l'application rechargée, webpack insère une balise de préchargement pour la ressource dans l'en-tête du document. Vous pouvez le voir dans le panneau Éléments des outils de développement.
L'observation des requêtes dans le panneau Réseau montre également que ce bloc est récupéré avec une faible priorité après que toutes les autres ressources ont été demandées.
Bien que la prélecture soit plus adaptée à ce cas d'utilisation, webpack prend également en charge le préchargement des blocs importés dynamiquement.
import(/* webpackPreload: true */ 'module')
Conclusion
Grâce à cet atelier de programmation, vous devriez avoir une bonne compréhension de la façon dont le préchargement ou la prélecture de certains éléments peuvent améliorer l'expérience utilisateur de votre site. Il est important de noter que ces techniques ne doivent pas être utilisées pour toutes les ressources et que leur utilisation incorrecte peut nuire aux performances. Les meilleurs résultats sont obtenus en préchargeant ou en préextrayant sélectivement.
En résumé :
- Utilisez preload pour les ressources découvertes tardivement, mais essentielles à la page actuelle.
- Utilisez prefetch pour les ressources nécessaires à un futur itinéraire de navigation ou à une action de l'utilisateur.
Tous les navigateurs ne sont pas compatibles avec le préchargement et la prélecture. Cela signifie que tous les utilisateurs de votre application ne remarqueront pas forcément d'amélioration des performances.
- Compatibilité avec les navigateurs : préchargement
- Compatibilité avec les navigateurs : préchargement
Pour en savoir plus sur des aspects spécifiques de l'impact du préchargement et de la prélecture sur votre page Web, consultez les articles suivants :