Dans cet atelier de programmation, les performances de la page Web suivante sont améliorées en préchargeant et en préchargeant quelques ressources:
Mesurer
Commencez par mesurer les performances du site Web avant d'ajouter des optimisations.
- Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran)
.
Exécutez l'audit de performances Lighthouse (Lighthouse > Options > Performance) sur la version en ligne de votre Glitch (consultez également Découvrir les opportunités de performances avec Lighthouse).
Lighthouse affiche l'audit suivant ayant échoué pour une ressource récupérée tardivement:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Réseau.
Le fichier main.css n'est pas extrait 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é que après que le navigateur a terminé l'analyse et l'exécution du fichier JavaScript. 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 requêtes critiques représente l'ordre des ressources qui sont priorisées et extraites par le navigateur. Pour cette page Web, il se présente actuellement comme suit:
├─┬ / (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êtes, 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 indiquer au navigateur de le télécharger plus tôt en ajoutant un élément Link à l'en-tête du document.
Ajoutez un tag 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 Network (Réseau) dans DevTools.
Notez que le navigateur extrait le fichier CSS avant même que l'analyse JavaScript chargée de l'extraire ne soit terminée. Avec le préchargement, le navigateur sait effectuer une récupération préventive de la ressource en supposant qu'elle est essentielle pour la page Web.
Si elle n'est pas utilisée correctement, la précharge peut nuire aux performances en envoyant 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>
Actualisez l'application et examinez le panneau Network (Réseau).
Une requête est envoyée pour récupérer details.css, même si elle n'est pas utilisée 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 quelques secondes qui suivent son chargement.
Utilisez cet avertissement comme indicateur pour déterminer si des ressources préchargées ne sont pas immédiatement utilisées 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écharge est une autre indication du navigateur qui peut être utilisée pour envoyer une requête pour un composant utilisé pour un autre parcours de navigation, mais avec une priorité inférieure à celle des autres composants importants nécessaires à la page actuelle.
Sur ce site Web, cliquer sur l'image vous redirige vers un autre itinéraire details/.
Un fichier CSS distinct, details.css, contient tous les styles nécessaires à 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 Network (Réseau) dans les outils de développement et décochez l'option Disable cache (Désactiver le cache).
Actualisez l'application. Vous remarquerez qu'une requête de priorité très faible est envoyé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 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 effectue une requête anticipée d'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'asset 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 du code explore l'utilisation d'importations dynamiques pour diviser un groupe en plusieurs segments. 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) });
});
Diviser un bundle améliore les 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 des blocs importés de manière dynamique. En utilisant cette application comme exemple, la méthode lodash peut être pré-extraite lorsque le navigateur est inactif. Lorsqu'un utilisateur appuie sur le bouton, la ressource n'est pas retardée.
Utilisez le paramètre de commentaire webpackPrefetch spécifique dans une importation dynamique pour précharger un bloc spécifique.
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 actualisée, webpack injecte une balise de préchargement pour la ressource dans la section "head" 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 bloc est récupéré avec une priorité faible après que toutes les autres ressources ont été demandées.
Bien que le préchargement soit plus judicieux dans ce cas d'utilisation, webpack permet également de précharger les fragments importés de manière dynamique.
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 le préchargement de certains éléments peut améliorer l'expérience utilisateur sur votre site. Il est important de mentionner que ces techniques ne doivent pas être utilisées pour toutes les ressources. Une utilisation incorrecte peut nuire aux performances. Les meilleurs résultats sont obtenus en ne préchargeant ou en ne préchargeant que de manière sélective.
En résumé :
- Utilisez le préchargement pour les ressources découvertes tardivement, mais essentielles à la page actuelle.
- Utilisez la préchargement pour les ressources nécessaires pour un futur itinéraire de navigation ou une action utilisateur.
Actuellement, tous les navigateurs ne prennent pas en charge à la fois le préchargement et le préchargement. Cela signifie que tous les utilisateurs de votre application ne verront pas forcément une amélioration des performances.
Pour en savoir plus sur les aspects spécifiques de l'impact du préchargement et du préchargement sur votre page Web, consultez ces articles: