Dans cet atelier de programmation, la page Web suivante a été améliorée grâce au préchargement et au préchargement de quelques ressources:
Mesurer
Commencez par mesurer 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 de performances Lighthouse (Lighthouse > Options > Performance) sur la version en ligne de votre glitch (consultez également la section Découvrir des opportunités d'amélioration des performances avec Lighthouse).
Lighthouse affiche l'échec d'audit suivant pour une ressource récupérée en retard:
- 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'une fois 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 téléchargement du fichier CSS terminé.
La chaîne de requêtes critique représente l'ordre des ressources qui sont priorisées et extraites par le navigateur. Pour cette page Web, elle se présente actuellement comme suit:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
Comme le fichier CSS se trouve au troisième niveau de la chaîne de requêtes, Lighthouse l'a identifiée comme une ressource récemment découverte.
Précharger les ressources critiques
Le fichier main.css est un élément essentiel qui est nécessaire 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 indiquer au navigateur de télécharger la ressource 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 en cours d'extraction, tandis que as="style" permet de précharger les fichiers de feuilles de style.
Actualisez l'application et consultez le panneau Network (Réseau) dans les outils de développement.
Notez que le navigateur récupère le fichier CSS avant même que le code JavaScript chargé de l'extraire n'ait fini d'analyser le fichier. Avec le préchargement, le navigateur sait qu'il doit effectuer une extraction préemptive de la ressource en partant du principe que celle-ci est essentielle pour la page Web.
S'il n'est pas utilisé correctement, le préchargement peut nuire aux performances en effectuant des requêtes inutiles pour les ressources non utilisées. Dans cette application, details.css est un autre fichier CSS situé à la racine du projet, mais il est utilisé pour un /details route distinct. Pour illustrer 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>
Actualisez l'application et observez le panneau Network (Réseau).
Une requête est effectué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 dans les secondes qui suivent son chargement.
Utilisez cet avertissement comme indicateur pour déterminer si des ressources préchargées ne sont pas utilisées immédiatement par votre page Web. Vous pouvez désormais 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 appropriées à utiliser pour l'attribut as, consultez l'article du MN sur le préchargement.
Précharger les futures ressources
Le préchargement 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 avec une priorité inférieure à celle d'autres éléments importants nécessaires à la page actuelle.
Sur ce site Web, lorsque vous cliquez sur l'image, vous êtes redirigé vers une route details/ distincte.
Un fichier CSS distinct, details.css, contient tous les styles nécessaires à cette page simple. Ajoutez un élément link à 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 Network (Réseau) dans les outils de développement et décochez l'option Désactiver le cache.
Actualisez l'application. Notez qu'une requête de priorité très faible 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 "link" est utilisé dans details.html pour récupérer details.css, une requête est envoyée pour la ressource comme prévu.
Cliquez sur la requête réseau details.css dans les outils de développement pour en afficher les 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, le préchargement envoie une requête anticipée pour une ressource nécessaire pour une autre page. 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échargement avec webpack
L'article Réduire les charges utiles JavaScript avec le fractionnement de code explore l'utilisation des importations dynamiques pour diviser un bundle en plusieurs fragments. Cela se reflète dans une application simple qui importe dynamiquement un module depuis Lodash lorsqu'un formulaire est envoyé.
Vous pouvez accéder au Glitch de 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 groupe 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écharger les fragments importés dynamiquement. En prenant cette application comme exemple, la méthode lodash peut être préchargée au moment d'inactivité du navigateur. Lorsqu'un utilisateur appuie sur le bouton, la récupération de la ressource n'est pas retardée.
Utilisez le paramètre de commentaire webpackPrefetch spécifique dans une importation dynamique pour précharger un fragment particulier.
Voici à quoi cela ressemblerait avec cette application.
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 injecte un tag 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 Network montre également que ce fragment est récupéré avec une faible priorité une fois que toutes les autres ressources ont été demandées.
Bien que le préchargement soit plus logique pour ce cas d'utilisation, webpack permet également de précharger les fragments importés dynamiquement.
import(/* webpackPreload: true */ 'module')
Conclusion
Cet atelier de programmation vous permettra de bien comprendre comment le préchargement ou le préchargement de certains assets peut améliorer l'expérience utilisateur sur votre site. Il est important de noter que ces techniques ne doivent pas être utilisées pour toutes les ressources et qu'une utilisation incorrecte peut nuire aux performances. Pour obtenir les meilleurs résultats, vous devez procéder au préchargement ou au préchargement de façon sélective.
En résumé :
- Utilisez le préchargement pour les ressources découvertes tardivement, mais qui sont essentielles pour la page actuelle.
- Utilisez le préchargement pour les ressources nécessaires pour une future route de navigation ou une action de l'utilisateur.
Actuellement, tous les navigateurs ne sont pas compatibles avec le préchargement et le préchargement. Cela signifie que tous les utilisateurs de votre application ne constateront peut-être pas d'améliorations des performances.
Pour en savoir plus sur l'impact du préchargement et du préchargement sur votre page Web, consultez les articles suivants: