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'effectuer 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 Glitch (voir également Découvrir des 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. Voici à quoi ressemble actuellement cette page Web:
├─┬ / (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 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 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 identifier si vous avez des 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écharge est un autre indice de navigateur qui peut être utilisé pour effectuer 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 DevTools et décochez l'option Disable cache (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 tous les autres fichiers 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 extraire 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 profitant du temps d'inactivité du navigateur, le préchargement envoie une requête anticipée pour une ressource nécessaire à 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 l'afficher à 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 chargé d'importer dynamiquement 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 prenant 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 de DevTools.
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 adapté à 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 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 le préchargement pour les ressources nécessaires à un futur parcours de navigation ou à une action de l'utilisateur.
Actuellement, tous les navigateurs ne sont pas compatibles avec le préchargement et le préchargement. Par conséquent, tous les utilisateurs de votre application ne verront peut-être pas d'améliorations 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: