Objectif du tutoriel
Ce tutoriel vous explique comment utiliser les outils pour les développeurs Chrome afin d'accélérer le chargement de vos sites Web.
Lisez la suite ou visionnez la version vidéo de ce tutoriel:
Prérequis
Vous devez avoir une expérience de base en développement Web, semblable à ce qui est enseigné dans ce cours de présentation du développement Web.
Vous n'avez pas besoin de savoir quoi que ce soit sur les performances de chargement.
Introduction
Voici Tony. Tony est très connu dans la société féline. Il a construit un site Web pour permettre à ses fans de découvrir ce qu'il préfère de notre alimentation. Ses fans adorent le site, mais Tony n'arrête pas de se plaindre se charge lentement. Tony vous a demandé de l'aider à accélérer le site.
<ph type="x-smartling-placeholder">![](https://developer.chrome.com/static/docs/devtools/lighthouse/image/tony-cat-e1c9e37033804.jpg?authuser=19&hl=fr)
Étape 1: Effectuez un audit du site
Lorsque vous cherchez à améliorer les performances de chargement d'un site, commencez toujours par audit. L'audit remplit deux fonctions importantes:
- Elle crée une référence à partir de laquelle vous pouvez mesurer les modifications ultérieures.
- Vous y trouverez des conseils pratiques sur les modifications qui auront le plus d'impact.
Configurer
Tout d'abord, vous devez configurer un nouvel environnement de travail pour site Web de Tony, afin que vous puissiez y apporter des modifications plus tard:
Remixer le projet du site Web sur Glitch Votre nouveau projet s'ouvre dans un onglet. Cet onglet sera appelé onglet de l'éditeur.
Le nom du projet passe de tony à un nom généré aléatoirement. Vous disposez désormais de votre propre copie modifiable du code. Par la suite, vous modifierez ce code.
En bas de l'onglet de l'éditeur, cliquez sur Aperçu > Prévisualiser dans une nouvelle fenêtre La démonstration s'ouvre dans un nouvel onglet. Cet onglet sera appelé onglet de démonstration. Le chargement du site peut prendre un certain temps.
Ouvrez les outils de développement en même temps que la démonstration.
Établir une référence
La référence est l'enregistrement des performances du site avant toute amélioration des performances.
Ouvrez le panneau Lighthouse. Il est peut-être masqué derrière
Autres panneaux.Faites correspondre les paramètres de configuration de votre rapport Lighthouse avec ceux de la capture d'écran. Voici une explication différentes options:
- check_box Vider l'espace de stockage. Si vous cochez cette case, l'espace de stockage associé à la page sera effacé avant chaque audit. Laissez ce paramètre activé si vous souhaitez contrôler l'expérience des nouveaux visiteurs sur votre site. Désactivez ce paramètre si vous souhaitez bénéficier d'une expérience de visite répétée.
- check_box Activer l'échantillonnage JS Cette option est désactivée par défaut. Lorsqu'elle est activée, elle ajoute des piles d'appels JavaScript détaillées à la trace des performances, mais peut ralentir la génération de rapports. La trace est disponible dans le menu "Outils" de more_vert > Affichez la trace non limitée après avoir généré le rapport Lighthouse.
- Limitation simulée (par défaut) . Cette option simule les conditions de navigation habituelles sur un appareil mobile. C'est ce qu'on appelle « simulée » car Lighthouse n'est pas limité pendant le processus d'audit. Il extrapole simplement le temps nécessaire pour que la page se charge dans des conditions mobiles. En revanche, le paramètre Limitation des outils de développement (avancé) limite l'utilisation du processeur et du réseau, en contrepartie d'un processus d'audit plus long.
- Mode > Les trois modes. Navigation (par défaut) : Ce mode analyse le chargement d'une seule page, et c'est ce dont nous avons besoin dans ce tutoriel. Pour en savoir plus, consultez la section
- Appareil > Mobile : L'option "Mobile" modifie la chaîne de l'agent utilisateur et simule un fenêtre d'affichage. L'option "Ordinateur" désactive quasiment les modifications pour mobile.
- Catégories > check_box Performances. Une seule catégorie activée permet à Lighthouse de générer un rapport uniquement avec l'ensemble d'audits correspondant. Vous pouvez laisser les autres catégories activées si vous souhaitez voir les types de recommandations qu'elles proposent. La désactivation des catégories non pertinentes accélère légèrement le processus d'audit.
Cliquez sur Analyser le chargement de la page. Au bout de 10 à 30 secondes, le panneau Lighthouse affiche un rapport sur les performances du site.
Gérer les erreurs des rapports
Si vous rencontrez une erreur dans votre rapport Lighthouse, essayez d'exécuter l'onglet de démonstration à partir d'une fenêtre de navigation privée sans aucun autre onglet ouvert ; Cela garantit que vous êtes exécuter Chrome à partir d'un navigateur opérationnel. Les extensions Chrome en particulier peuvent interférer avec le processus d'audit.
Comprendre votre rapport
Le chiffre indiqué en haut de votre rapport correspond au score de performance global du site. Plus tard, lorsque vous modifiez le code, vous devriez voir ce nombre augmenter. Un score élevé signifie de meilleures performances.
Métriques
Faites défiler la page jusqu'à la section Métriques, puis cliquez sur Développer la vue. Pour consulter la documentation sur une métrique, cliquez sur En savoir plus.
Cette section fournit des mesures quantitatives des performances du site. Chaque métrique fournit des insights sur un aspect différent des performances. Par exemple, First Contentful Paint vous indique quand le contenu est affiché pour la première fois à l'écran, ce qui constitue une étape importante dans l'expérience du chargement de la page, alors que le paramètre Délai avant interactivité indique le moment où la page semble être assez prêt pour gérer les interactions des utilisateurs.
Captures d'écran
Vous trouverez ensuite une série de captures d'écran qui vous montrent à quoi ressemblait la page lors de son chargement.
Opportunités
Viennent ensuite la section Opportunités, qui fournit des conseils spécifiques pour améliorer la charge de cette page spécifique. des performances.
Cliquez sur une opportunité pour en savoir plus à son sujet.
Cliquez sur En savoir plus pour consulter des informations détaillées qui vous aideront à comprendre pourquoi une opportunité est importante. des recommandations sur la façon de le résoudre.
Diagnostic
La section Diagnostic fournit plus d'informations sur les facteurs qui contribuent à la le temps de chargement.
Audits réussis
La section Audits réussis indique ce que fait le site correctement. Cliquez pour développer .
Étape 2: Tester
La section Opportunités du rapport Lighthouse contient des conseils pour améliorer les performances de la page des performances. Dans cette section, vous allez implémenter les modifications recommandées dans le codebase, en auditant sur votre site après chaque modification, afin d'évaluer son impact sur sa vitesse.
Activer la compression de texte
D'après votre rapport, l'activation de la compression de texte est l'une des meilleures façons d'améliorer les performances de votre page.
La compression de texte consiste à réduire, ou à compresser, la taille d'un fichier texte avant de l'envoyer réseau. Un peu comme vous pourriez compresser un dossier avant de l'envoyer par e-mail pour réduire sa taille.
Avant d'activer la compression, voici quelques façons de vérifier manuellement si du texte vos ressources sont compressées.
Ouvrez le panneau Réseau et cochez Utilisez des lignes de requêtes volumineuses.
Paramètres >Chaque cellule Size (Taille) affiche deux valeurs. La valeur supérieure correspond à la taille de la ressource téléchargée. La
la valeur "bottom" correspond à la taille de la ressource non compressée. Si les deux valeurs sont identiques,
la ressource n'est pas compressée lors de son envoi sur le réseau. Dans cet exemple,
les valeurs les plus élevées et les plus basses de bundle.js
sont toutes deux 1.4 MB
.
Vous pouvez également vérifier la compression en inspectant les en-têtes HTTP d'une ressource:
Cliquez sur bundle.js et ouvrez l'onglet Headers (En-têtes).
Recherchez un en-tête
content-encoding
dans la section En-têtes de réponse. Vous ne devriez pas en voir un, ce qui signifie quebundle.js
n'a pas été compressé. Lorsqu'une ressource est compressée, cet en-tête est généralement défini surgzip
,deflate
oubr
. Pour en savoir plus, consultez les consignes. valeurs.
Assez avec les explications. Il est temps d'apporter des modifications ! Activez la compression de texte en ajoutant de lignes de code:
Dans l'onglet de l'éditeur, ouvrez
server.js
et ajoutez les deux lignes suivantes (en surbrillance) :... const fs = require('fs'); const compression = require('compression'); app.use(compression()); app.use(express.static('build')); ...
Veillez à ajouter
app.use(compression())
avantapp.use(express.static('build'))
.Attendez que Glitch déploie la nouvelle version du site. Un emoji joyeux en bas à gauche indique que le déploiement a réussi.
Utilisez les workflows que vous avez appris précédemment pour vérifier manuellement que la compression fonctionne:
Revenez à l'onglet de démonstration et actualisez la page.
La colonne Size (Taille) doit maintenant afficher deux valeurs différentes pour les ressources de texte telles que
bundle.js
. La valeur supérieure de269 KB
pourbundle.js
correspond à la taille du fichier envoyé sur le réseau, et la valeur inférieure de1.4 MB
correspond à la taille du fichier non compressé.La section En-têtes de réponse pour
bundle.js
doit désormais inclure un en-têtecontent-encoding: gzip
.
Exécutez à nouveau le rapport Lighthouse sur la page pour mesurer l'impact de la compression de texte sur son chargement. performances:
Ouvrez le panneau Lighthouse, puis cliquez sur
Perform an audit (Effectuer un audit) dans la barre d'action en haut de l'écran.
Laissez les paramètres inchangés et cliquez sur Analyser le chargement de la page.
Excellent ! On dirait une progression. Votre score de performances globales aurait dû augmenter, ce qui signifie que le site s'accélère.
Compression de texte dans le monde réel
La plupart des serveurs disposent de correctifs simples comme celui-ci pour permettre la compression ! Faites simplement une recherche sur pour configurer le serveur que vous utilisez pour compresser du texte.
Redimensionner les images
D'après votre nouveau rapport, le dimensionnement correct des images constitue une autre opportunité majeure.
Le redimensionnement des images permet d'accélérer le temps de chargement en réduisant la taille des fichiers d'image. Si votre utilisateur est voir vos images sur un écran d'appareil mobile de 500 pixels de large, il n'est vraiment pas utile en envoyant une image de 1 500 pixels de large. Idéalement, vous devriez envoyer une image de 500 pixels de largeur au maximum.
Dans votre rapport, cliquez sur Taille appropriée des images pour voir les images à redimensionner. Il semble que les quatre images sont plus grandes que nécessaire.
De retour dans l'onglet de l'éditeur, ouvrez
src/model.js
.Remplacez
const dir = 'big'
parconst dir = 'small'
. Ce répertoire contient des copies des mêmes images qui ont été redimensionnées.Effectuez un nouvel audit de la page pour voir comment cette modification affecte les performances de chargement.
Il semble que cette modification n'affecte que légèrement le score global de performances. Cependant, une chose que le score n'indique pas clairement est la quantité de données réseau que vous économisez pour vos utilisateurs. Total la taille des anciennes photos était d'environ 6,1 Mo, contre seulement 633 Ko maintenant. Vous pouvez le vérifier dans la barre d'état en bas du panneau Network (Réseau).
Redimensionnement d'images dans le monde réel
Pour une petite application, un redimensionnement ponctuel de ce type peut suffire. Mais pour une application volumineuse, n'est évidemment pas évolutive. Voici quelques stratégies pour gérer les images dans les applications volumineuses:
- Redimensionnez les images pendant le processus de compilation.
- Créez plusieurs tailles de chaque image pendant le processus de compilation, puis utilisez
srcset
dans votre code. Au moment de l'exécution, le navigateur se charge de choisir la taille la plus adaptée à l'appareil sur lequel il s'exécute. Consultez la section Images de taille relative. - Utilisez un CDN image qui vous permet de redimensionner dynamiquement une image lorsque vous la demandez.
- Au minimum, optimisez chaque image. Cela permet souvent de réaliser d'importantes économies. L'optimisation consiste vous exécutez une image à l'aide d'un programme spécial qui réduit la taille du fichier image. Consultez les Principes de base Optimisation des images.
Éliminer les ressources bloquant l'affichage
D'après votre dernier rapport, la plus grande opportunité à saisir est désormais d'éliminer les ressources bloquant l'affichage.
Une ressource bloquant l'affichage est un fichier JavaScript ou CSS externe que le navigateur doit télécharger. analyser et exécuter avant de pouvoir afficher la page. L'objectif est d'exécuter uniquement les scripts CSS et JavaScript de base nécessaire pour afficher correctement la page.
La première tâche consiste à trouver le code qui n'a pas besoin d'être exécuté au chargement de la page.
Cliquez sur Éliminer les ressources qui bloquent l'affichage pour afficher les ressources qui bloquent:
lodash.js
etjquery.js
.Selon votre système d'exploitation, appuyez sur la touche suivante pour ouvrir le menu de commandes:
- Sur Mac, Commande+Maj+P
- Sous Windows, Linux ou ChromeOS, appuyez sur Ctrl+Maj+P.
Commencez à saisir
Coverage
, puis sélectionnez Afficher la couverture.L'onglet Couverture s'ouvre dans le panneau.
Cliquez sur Actualiser Actualiser. L'onglet Couverture fournit un aperçu de la portion de code exécutée dans
bundle.js
,jquery.js
etlodash.js
pendant le chargement de la page.Cette capture d'écran indique qu'environ 74% et 30% des fichiers jQuery et Lodash ne sont pas utilisés, respectivement.
Cliquez sur la ligne jquery.js. Les outils de développement ouvrent le fichier dans le panneau Sources. Une ligne de code était exécuté si une barre verte est affichée à côté. Une barre rouge à côté d'une ligne de code signifie qu'elle n'a pas été exécutée, et est n'est absolument pas nécessaire au chargement de la page.
Faites défiler un peu le code jQuery. Certaines des lignes qui sont "exécutées" sont en fait commentaires. L'exécution de ce code via un outil de réduction qui supprime les commentaires est un autre moyen de réduire la taille de ce fichier.
En bref, lorsque vous travaillez avec votre propre code, l'onglet Couverture peut vous aider à analyser votre code, ligne par ligne, et n'expédient que le code nécessaire au chargement de la page.
Les fichiers jquery.js
et lodash.js
sont-ils même nécessaires pour charger la page ? L'onglet Request Blocking (Blocage des requêtes) permet
vous montrer ce qui se passe
lorsque les ressources ne sont pas disponibles.
- Cliquez sur l'onglet Réseau, puis rouvrez le menu de commandes.
Commencez à saisir
blocking
, puis sélectionnez Show Request Blocking (Afficher le blocage des requêtes). L'onglet Request Blocking (Blocage des requêtes) s'ouvre.Cliquez sur
Ajouter un format, saisissez
/libs/*
dans la zone de texte, puis appuyez sur Entrée pour confirmer.Actualisez la page. Les requêtes jQuery et Lodash apparaissent en rouge, ce qui signifie qu'elles ont été bloquées. La la page se charge toujours et est interactive. Ces ressources ne sont donc pas nécessaires.
Cliquez sur
Supprimer tous les formats pour supprimer le format bloquant
/libs/*
.
En général, l'onglet Request Blocking (Blocage des requêtes) permet de simuler le comportement de votre page lorsqu'une ressource non disponible.
À présent, supprimez les références à ces fichiers du code et effectuez un nouvel audit de la page:
- De retour dans l'onglet de l'éditeur, ouvrez
template.html
. Supprimez les tags
<script>
correspondants:<head> ... <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/libs/lodash.js"></script> <script src="/libs/jquery.js"></script> <title>Tony's Favorite Foods</title> </head>
Attendez que le site soit recréé et redéployé.
Effectuez un nouvel audit de la page à partir du panneau Lighthouse. Votre score global aurait dû de nouveau s'améliorer.
Optimiser le chemin d'affichage essentiel dans le monde réel
Le chemin de rendu critique fait référence au code dont vous avez besoin pour charger une page. En général, vous peut accélérer le chargement de la page en n'envoyant que le code essentiel pendant le chargement de la page, puis en effectuant un chargement différé. tout le reste.
- Il est peu probable que vous trouviez des scripts que vous pouvez supprimer complètement, mais vous constaterez souvent que de nombreux scripts n'ont pas besoin d'être demandés lors du chargement de la page. de manière asynchrone. Consultez la section Utiliser des paramètres asynchrones ou différés.
- Si vous utilisez un framework, vérifiez s'il est en mode production. Ce mode peut utiliser une fonctionnalité telle que de type tree secking afin d'éliminer le code inutile qui bloque l'affichage critique.
Moins de tâches sur le thread principal
Votre dernier rapport indique des économies mineures potentielles dans la section Opportunités, mais si vous faites défiler la page jusqu'à la section Diagnostic, il semble que le plus gros goulot d'étranglement soit dû à un thread principal trop important. activité.
Le thread principal est l'endroit où le navigateur effectue la plupart des tâches nécessaires à l'affichage d'une page, comme l'analyse et l'exécution de HTML, CSS et JavaScript.
L'objectif est d'utiliser le panneau Performance pour analyser le travail effectué par le thread principal pendant que et trouver des moyens de reporter ou de supprimer les tâches inutiles.
Ouvrez Performances >
Paramètres de capture : définissez le réseau sur 3G lente et le processeur sur 6 fois le ralentissement.
Les appareils mobiles présentent généralement plus de contraintes matérielles que les ordinateurs portables ou de bureau. Avec ces paramètres, la page se charge comme si vous utilisiez un appareil moins puissant.
Cliquez sur Actualiser Actualiser. Les outils de développement actualisent la page, puis génèrent une visualisation de tout ce qu'il y avait à faire pour charger la page. Cette visualisation sera appelée trace.
La trace affiche l'activité de manière chronologique, de gauche à droite. Les graphiques FPS, CPU et NET au niveau haut vous donnent un aperçu des frames par seconde, de l'activité du processeur et de l'activité réseau.
Le mur jaune qui apparaît dans la section Overview (Présentation) signifie que le processeur était complètement occupé à rédiger des scripts. Cela indique que vous pouvez accélérer le chargement des pages en utilisant moins de JavaScript.
Examinez la trace pour trouver des moyens d'effectuer moins de tâches JavaScript:
Cliquez sur la section Délais pour la développer.
Il existe de nombreuses mesures de temps utilisateur dans React. Il semble que l'application de Tony utilise le mode de développement de React. Passer en mode production dans React permet probablement d'améliorer facilement les performances.
Cliquez de nouveau sur Durées pour réduire cette section.
Parcourez la section Main (Principal). Cette section présente un journal chronologique de l'activité du thread principal. de gauche à droite. L'axe des y (de haut en bas) indique la raison pour laquelle des événements se sont produits.
Dans cet exemple, l'événement
Evaluate Script
a entraîné l'exécution de la fonction(anonymous)
, ce qui a entraîné l'exécution de__webpack__require__
, l'exécution de./src/index.jsx
, etc.Faites défiler la page jusqu'en bas de la section Main (Principal). Lorsque vous utilisez un framework, la majeure partie de l'activité supérieure est causée par le framework, qui est généralement votre contrôle. L'activité générée par votre application s'affiche généralement en bas de l'écran.
Dans cette application, il semble qu'une fonction appelée
App
génère de nombreux appels à une fonctionmineBitcoin
. On dirait que Tony utilise les appareils de ses fans pour miner de la cryptomonnaie...Ouvrez l'onglet Ascendant en bas. Cet onglet détaille les activités qui ont pris le plus de temps. Si vous ne voyez rien dans la section Ascendant, cliquez sur le libellé de la section Principale.
La section De bas en haut affiche uniquement les informations sur l'activité ou le groupe d'activités dont vous disposez. actuellement sélectionné. Par exemple, si vous avez cliqué sur l'une des activités
mineBitcoin
, La section De bas en haut n'affichera que les informations concernant cette activité.La colonne Temps propre indique combien de temps a été passé directement dans chaque activité. Dans ce cas, environ 82% du temps du thread principal a été consacré à la fonction
mineBitcoin
.
Voyons si vous utilisez le mode production et diminuez l'activité JavaScript accélère le chargement de la page. Commencez par le mode production:
- Dans l'onglet de l'éditeur, ouvrez
webpack.config.js
. - Remplacez
"mode":"development"
par"mode":"production"
. - Attendez que la nouvelle compilation soit déployée.
Effectuez un nouvel audit de la page.
Réduisez l'activité JavaScript en supprimant l'appel à mineBitcoin
:
- Dans l'onglet de l'éditeur, ouvrez
src/App.jsx
. - Mettez en commentaire l'appel à
this.mineBitcoin(1500)
dansconstructor
. - Attendez que la nouvelle compilation soit déployée.
- Effectuez un nouvel audit de la page.
Comme toujours, il reste des choses à faire, par exemple en réduisant les métriques Largest Contentful Paint et Cumulative Layout Shift.
Moins de travail des threads principaux dans le monde réel
En général, le panneau Performances est le moyen le plus courant d'analyser l'activité de votre site. pendant son chargement et trouver des moyens de supprimer toute activité inutile.
Si vous préférez une approche plus proche de console.log()
, l'API User Timing vous permet
baliser arbitrairement certaines phases du cycle de vie de votre application, afin de savoir combien de temps chacune de ces
les différentes phases.
Résumé
- Lorsque vous cherchez à optimiser les performances de chargement d'un site, commencez toujours par un audit. L'audit établit une base de référence et vous donne des conseils sur la façon de s'améliorer.
- Apportez une modification à la fois et vérifiez la page après chaque modification afin de comment cette modification isolée affecte les performances.
Étapes suivantes
Effectuez des audits sur votre propre site ! Si vous avez besoin d'aide pour interpréter votre rapport ou pour trouver des moyens d'améliorer les performances de chargement, consultez l'ensemble des ressources disponibles pour obtenir de l'aide auprès de la communauté des outils de développement:
- Signalez des bugs sur ce document dans le dépôt developer.chrome.com.
- Signalez les bugs dans les outils de développement sur Chromium Bugs.
- Discutez des fonctionnalités et des modifications apportées à la liste de diffusion. Merci de ne pas utiliser la liste de diffusion pour pour obtenir de l'aide. Utilisez plutôt Stack Overflow.
- Obtenez une aide générale sur l'utilisation des outils de développement sur Stack Overflow. Pour envoyer des demandes de bugs, utilisez toujours l'outil Bugs Chromium.
- Envoyez-nous un tweet à @ChromeDevTools.