Lighthouse: optimiser la vitesse du site Web

Présentation

Utilisez le panneau Lighthouse pour réaliser un audit complet de votre site Web. Le panneau Lighthouse génère un rapport qui vous donne des informations sur les éléments suivants à propos de votre site Web:

• Performances
• Accessibilité
• Bonnes pratiques
• SEO

... et bien d'autres métriques.

Le tutoriel suivant vous explique comment utiliser Lighthouse dans les outils pour les développeurs Chrome.

Pour découvrir les autres façons dont Lighthouse peut améliorer la qualité de votre site Web, consultez notre documentation sur Lighthouse.

Objectif du tutoriel

Ce tutoriel vous explique comment utiliser les outils pour les développeurs Chrome pour trouver des moyens de faire charger vos sites Web plus rapidement.

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 créé un site Web pour que ses fans puissent découvrir ses plats préférés. 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">

É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:

1. 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é de manière aléatoire. Vous disposez maintenant de votre propre copie modifiable du code. Vous allez ensuite modifier ce code.

2. 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.

   

3. 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.

1. Ouvrez le panneau Lighthouse. Il est peut-être masqué derrière double_arrow Autres panneaux.

   

2. 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 examiner l'expérience des visiteurs qui consultent votre site pour la première fois. 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 sous plus_vert Menu "Outils" > Afficher la trace non limitée une fois le rapport Lighthouse généré.
   • Limitation simulée (par défaut) arrow_drop_down. 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 pour les développeurs (avancée) limite réellement votre processeur et votre réseau, ce qui a pour conséquence d'allonger le processus d'audit.
   • Mode > radio_button_checked 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 Les trois modes.
   • Appareil > radio_button_checked 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. Désactiver les catégories non pertinentes accélère légèrement le processus d'audit.

3. 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 de rapport

Si un message d'erreur s'affiche dans votre rapport Lighthouse, essayez d'exécuter l'onglet de démonstration dans une fenêtre de navigation privée sans ouvrir d'autres onglets. 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 la section.

É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 settings Paramètres > check_box Utilisez des lignes de requêtes volumineuses.

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 supérieure et inférieure 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:

1. Cliquez sur bundle.js et ouvrez l'onglet Headers (En-têtes).

   

2. 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 que bundle.js n'a pas été compressé. Lorsqu'une ressource est compressée, cet en-tête est généralement défini sur gzip, deflate ou br. 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:

1. 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'));
   ...
   

2. Veillez à placer app.use(compression()) avant app.use(express.static('build')).

   

3. 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 :

1. Revenez à l'onglet de démonstration et actualisez la page.

   La colonne Taille devrait maintenant afficher deux valeurs différentes pour les ressources textuelles telles que bundle.js. La valeur supérieure de 269 KB pour bundle.js correspond à la taille du fichier envoyé sur le réseau, et la valeur inférieure de 1.4 MB correspond à la taille du fichier non compressé.

   

2. La section En-têtes de réponse pour bundle.js doit désormais inclure un en-tête content-encoding: gzip.

   

Exécutez à nouveau le rapport Lighthouse sur la page pour mesurer l'impact de la compression de texte sur son chargement. performances:

1. Ouvrez le panneau Lighthouse, puis cliquez sur Perform an audit (Effectuer un audit) dans la barre d'action en haut de l'écran.

   

2. Laissez les paramètres inchangés et cliquez sur Analyser le chargement de la page.

   

Excellent ! Vous semblez faire des progrès. 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 solutions simples comme celle-ci pour activer 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 envoyez une image de 500 pixels de largeur au maximum.

1. 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.

   

2. De retour dans l'onglet de l'éditeur, ouvrez src/model.js.

3. Remplacez const dir = 'big' par const dir = 'small'. Ce répertoire contient des copies des mêmes images qui ont été redimensionnées.

4. 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 pour les images 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.

Éliminez les ressources bloquant le rendu

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.

1. Cliquez sur Éliminer les ressources qui bloquent l'affichage pour afficher les ressources qui bloquent: lodash.js et jquery.js.

   

2. 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.

3. Commencez à saisir Coverage, puis sélectionnez Afficher la couverture.

   

   L'onglet Couverture s'ouvre dans le panneau.

   

4. Cliquez sur Actualiser Actualiser. L'onglet Couverture fournit un aperçu de la portion de code exécutée dans bundle.js, jquery.js et lodash.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.

5. Cliquez sur la ligne jquery.js. Les outils de développement ouvrent le fichier dans le panneau Sources. Une ligne de code a été exécutée si une barre verte s'affiche à 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.

   

6. Faites défiler un peu le code jQuery. Certaines des lignes qui sont "exécutées" sont en fait commentaires. Exécuter ce code via un outil de minification 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 Blocage des requêtes peut vous montrer ce qui se passe lorsque les ressources ne sont pas disponibles.

1. Cliquez sur l'onglet Réseau, puis rouvrez le menu de commandes.

2. 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.

   

3. Cliquez sur Ajouter un format, saisissez /libs/* dans la zone de texte, puis appuyez sur Entrée pour confirmer.

   

4. Actualisez la page. Les requêtes jQuery et Lodash apparaissent en rouge, ce qui signifie qu'elles ont été bloquées. La page se charge toujours et est interactive. Il semble donc que ces ressources ne soient pas du tout nécessaires.

   

5. 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:

1. De retour dans l'onglet de l'éditeur, ouvrez template.html.

2. Supprimez les balises <script> correspondantes :

   <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>
   

3. Attendez que le site soit recréé et redéployé.

4. Effectuez un nouvel audit de la page à partir du panneau Lighthouse. Votre score global devrait à nouveau avoir augmenté.

   

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 critique 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 shaking afin d'éliminer le code inutile qui bloque le rendu critique.

Réduisez le travail du 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 Performances pour analyser le travail effectué par le thread principal pendant le chargement de la page, et trouver des moyens de différer ou de supprimer le travail inutile.

1. 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.

2. 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:

1. Cliquez sur la section Durée 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 au mode de production de React vous permettra probablement d'améliorer facilement les performances.

2. Cliquez de nouveau sur Durées pour réduire cette section.

3. 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.

4. 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 fonction mineBitcoin. On dirait que Tony utilise les appareils de ses fans pour miner de la cryptomonnaie...

5. Ouvrez l'onglet Ascendant en bas. Cet onglet détaille les activités qui ont pris le plus de temps. Si rien ne s'affiche dans la section De bas en haut, 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 de 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:

1. Dans l'onglet de l'éditeur, ouvrez webpack.config.js.
2. Remplacez "mode":"development" par "mode":"production".
3. Attendez que la nouvelle compilation soit déployée.

4. Effectuez un nouvel audit de la page.

   

Réduisez l'activité JavaScript en supprimant l'appel à mineBitcoin:

1. Dans l'onglet de l'éditeur, ouvrez src/App.jsx.
2. Mettez en commentaire l'appel à this.mineBitcoin(1500) dans constructor.
3. Attendez que la nouvelle compilation soit déployée.
4. 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 du 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 référence et vous donne des conseils pour vous améliorer.
• Apportez une modification à la fois et vérifiez la page après chaque modification afin de voir 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.