Lighthouse: optimiser la vitesse du site Web

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.

Poursuivez votre lecture ou regardez la version vidéo de ce tutoriel:

Prérequis

Vous devez disposer d'une expérience de base en développement Web, semblable à ce qui est enseigné dans ce cours Présentation du développement Web.

Vous n'avez pas besoin de connaître les performances de chargement.

Introduction

Voici Tony. Tony est très célèbre dans la société de chats. Il a créé un site Web afin que ses fans puissent découvrir ses plats préférés. Ses fans adorent le site, mais Tony n'arrête pas d'entendre qu'il se charge lentement. Tony vous a demandé de l'aider à accélérer le site.

Étape 1: Auditer le site

Lorsque vous cherchez à améliorer les performances de chargement d'un site, commencez toujours par effectuer un audit. L'audit a 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 concrets sur les modifications qui auront le plus d'impact.

Configuration

Tout d'abord, vous devez configurer un nouvel environnement de travail pour le site Web de Tony, afin de pouvoir le modifier ultérieurement:

1. Remixez 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 modifierez ensuite 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 "demo". Le chargement du site peut prendre un certain temps.

   

3. Ouvrez les Outils de développement en même temps que la démo.

   

Établir une référence

La référence est un enregistrement des performances du site avant que vous ne les ayez améliorées.

1. Ouvrez le panneau Lighthouse. Elle peut être masquée derrière double_arrow Plus de panneaux.

   

2. Faites correspondre les paramètres de configuration de votre rapport Lighthouse avec ceux de la capture d'écran. Voici une explication des différentes options:

   • check_box Vider l'espace de stockage. Si vous cochez cette case, tout l'espace de stockage associé à la page est effacé avant chaque audit. Laissez ce paramètre activé si vous souhaitez analyser l'expérience des nouveaux visiteurs sur votre site. Désactivez ce paramètre si vous souhaitez utiliser plusieurs visites.
   • Limitation simulée (par défaut) arrow_drop_down. Cette option simule les conditions habituelles de navigation sur un appareil mobile. C'est ce que l'on appelle une "simulation", car Lighthouse ne limite pas le processus d'audit. Il extrapole simplement le temps nécessaire à la page pour se charger dans des conditions mobiles. En revanche, le paramètre DevTools throttling (advanced) limite votre processeur et votre réseau, en compromettant un processus d'audit plus long.
   • 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 pour mobile modifie la chaîne user-agent et simule une fenêtre d'affichage mobile. L'option pour ordinateur de bureau désactive pratiquement 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. Si vous souhaitez afficher les types de recommandations qu'elles fournissent, vous pouvez laisser les autres catégories activées. La désactivation des 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 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 ouvrir d'autres onglets. Ainsi, vous exécutez Chrome sans problème. Les extensions Chrome, en particulier, peuvent interférer avec le processus d'audit.

Comprendre votre rapport

Le chiffre indiqué en haut du rapport correspond à la note globale des performances du site. Ce nombre devrait augmenter par la suite à mesure que vous modifierez le code. 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 lire 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 à quel moment le contenu est affiché pour la première fois à l'écran, ce qui est une étape importante dans la perception de l'utilisateur du chargement de la page. Le champ Time To Interactive indique à quel moment la page semble prête à gérer les interactions utilisateur.

Captures d'écran

Ensuite, une collection de captures d'écran vous montre à quoi ressemblait la page lorsqu'elle se charge.

Opportunités

Vient ensuite la section Opportunités, qui fournit des conseils spécifiques sur la façon d'améliorer les performances de chargement de cette page.

Cliquez sur une opportunité pour en savoir plus à son sujet.

Cliquez sur Learn more (En savoir plus) pour consulter la documentation expliquant pourquoi une opportunité est importante et des recommandations spécifiques pour la corriger.

Diagnostic

La section Diagnostic fournit plus d'informations sur les facteurs qui contribuent au temps de chargement de la page.

Audits réussis

La section Audits réussis vous indique les performances du site. Cliquez pour développer la section.

Étape 2: Tester

La section Opportunités de votre rapport Lighthouse vous donne des conseils pour améliorer les performances de la page. Dans cette section, vous allez mettre en œuvre les modifications recommandées dans le codebase, en auditant le site après chaque modification pour mesurer son impact sur sa vitesse.

Activer la compression de texte

Votre rapport indique que l'activation de la compression de texte est l'une des principales opportunités pour améliorer les performances de la page.

La compression de texte consiste à réduire ou compresser la taille d'un fichier texte avant de l'envoyer sur le réseau. Un peu comme pour compresser un dossier avant de l'envoyer par e-mail pour en réduire la taille.

Avant d'activer la compression, voici quelques façons de vérifier manuellement si les ressources de texte sont compressées.

Ouvrez le panneau Réseau et cochez settings Paramètres > check_box Utiliser les lignes de requêtes volumineuses.

Chaque cellule Size (Taille) affiche deux valeurs. La première valeur correspond à la taille de la ressource téléchargée. La valeur inférieure 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 via le réseau. Dans cet exemple, les valeurs supérieure et inférieure de bundle.js sont toutes les 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, 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 plus d'informations sur ces valeurs, consultez les directives.

Ça suffit pour les explications. Il est temps d'apporter quelques modifications ! Ajoutez quelques lignes de code pour activer la compression de texte:

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 à insérer app.use(compression()) avant app.use(express.static('build')).

   

3. Attendez que Glitch déploie la nouvelle version du site. Un emoji heureux 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 Size (Taille) doit 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 Response Headers (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 du texte sur ses performances de chargement:

1. Ouvrez le panneau Lighthouse, puis cliquez sur Effectuer un audit dans la barre d'action en haut de la page.

   

2. Conservez les paramètres tels qu'auparavant et cliquez sur Analyser le chargement de la page.

   

Excellent ! On dirait une progression. Votre score de performances globales devrait avoir augmenté, ce qui signifie que le site s'accélère.

Compression de texte dans le monde réel

La plupart des serveurs ont en fait des correctifs simples comme celui-ci pour permettre la compression ! Il suffit de faire une recherche sur la façon de configurer le serveur que vous utilisez pour compresser le texte.

Redimensionner des images

Selon votre nouveau rapport, dimensionner correctement les images représente une autre opportunité importante.

Le redimensionnement des images permet d'accélérer le temps de chargement en réduisant la taille des fichiers image. Si l'utilisateur consulte vos images sur un écran d'appareil mobile de 500 pixels de large, il est inutile d'envoyer une image de 1 500 pixels de large. Idéalement, vous devriez envoyer une image de 500 pixels de large au maximum.

1. Dans votre rapport, cliquez sur Dimensionner les images de manière appropriée pour voir quelles images doivent être redimensionnées. Il semble que les quatre images soient 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. Contrôlez à nouveau la page pour voir comment ce changement affecte les performances de chargement.

   

Il semble que ce changement n'ait qu'un impact mineur sur le score global des performances. Cependant, le score n'indique pas clairement la quantité de données réseau que vous économisez à vos utilisateurs. La taille totale des anciennes photos était d'environ 6,1 Mo, alors qu'elle ne fait désormais qu'environ 633 Ko. Vous pouvez le vérifier dans la barre d'état en bas du panneau 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 grande application, ce n'est évidemment pas évolutif. Voici quelques stratégies pour gérer les images dans les applications volumineuses:

• Redimensionnez les images au cours du processus de compilation.
• Créez plusieurs tailles de chaque image au cours du processus de compilation, puis utilisez srcset dans votre code. Au moment de l'exécution, le navigateur choisit la taille la plus adaptée à l'appareil sur lequel il s'exécute. Consultez la section Images de taille relative.
• Utilisez un CDN d'images qui vous permet de redimensionner dynamiquement une image lorsque vous la demandez.
• Optimisez au moins chaque image. Cela permet souvent de réaliser d'importantes économies. L'optimisation consiste à exécuter une image via un programme spécial qui réduit la taille du fichier image. Pour obtenir plus de conseils, consultez la section Principes de base de l'optimisation des images.

Éliminer les ressources qui bloquent l'affichage

Votre dernier rapport indique que la suppression des ressources qui bloquent l'affichage représente désormais la meilleure opportunité.

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 le code CSS et JavaScript principal nécessaire pour afficher correctement la page.

La première tâche consiste donc à trouver le code qui n'a pas besoin d'être exécuté lors du chargement de la page.

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

   

2. Selon votre système d'exploitation, appuyez sur les touches suivantes pour ouvrir le menu de commande:

   • Sur Mac, Cmd+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. L'onglet Couverture offre un aperçu de la quantité de code de bundle.js, jquery.js et lodash.js exécutée lors du chargement de la page.

   

   Cette capture d'écran indique qu'environ 74 % et 30 % des fichiers jQuery et 30 % 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 apparaît à côté. Une barre rouge à côté d'une ligne de code signifie que celle-ci n'a pas été exécutée et n'est absolument pas nécessaire au chargement de la page.

   

6. Faites défiler le code jQuery. Certaines des lignes qui sont "exécutées" ne sont en fait que des commentaires. Exécuter ce code via un outil de réduction de taille 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'envoyer que le code nécessaire au chargement de la page.

Les fichiers jquery.js et lodash.js sont-ils nécessaires pour charger la page ? L'onglet Request Blocking (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 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 Add Pattern (Ajouter un modèle), saisissez /libs/* dans la zone de texte, puis appuyez sur Entrée pour confirmer.

   

4. Actualisez la page. Les requêtes jQuery et Lodash sont 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 sont pas nécessaires.

   

5. Cliquez sur Supprimer tous les formats pour supprimer le schéma de blocage /libs/*.

En général, l'onglet Blocage des requêtes est utile pour simuler le comportement de votre page lorsqu'une ressource donnée n'est pas disponible.

À présent, supprimez les références à ces fichiers du code et vérifiez à nouveau la page:

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

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

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

4. Effectuez un nouveau audit de la page à partir du panneau Lighthouse. Votre score global aurait dû de nouveau s'améliorer.

   

Optimiser le chemin d'affichage critique en situation réelle

Le chemin d'affichage critique fait référence au code dont vous avez besoin pour charger une page. En général, pour accélérer le chargement de la page, vous pouvez n'envoyer que le code essentiel pendant le chargement, puis effectuer le chargement différé.

• Il est peu probable que vous trouviez des scripts que vous pouvez supprimer directement. Toutefois, vous constaterez souvent que de nombreux scripts n'ont pas besoin d'être demandés pendant le chargement de la page et peuvent être demandés de manière asynchrone. Consultez la section Utiliser les valeurs asynchrones ou différées.
• Si vous utilisez un framework, vérifiez s'il propose un mode production. Ce mode peut utiliser une fonctionnalité telle que le tremblage des arbres afin d'éliminer le code inutile qui bloque l'affichage critique.

Limiter le fonctionnement du thread principal

Votre dernier rapport présente des économies potentielles mineures dans la section Opportunités. Toutefois, si vous faites défiler la page jusqu'à la section Diagnostic, vous constaterez que le plus gros goulot d'étranglement serait trop d'activité du thread principal.

C'est dans le thread principal que le navigateur effectue la plupart des tâches nécessaires à l'affichage d'une page, comme l'analyse et l'exécution de code HTML, CSS et JavaScript.

L'objectif est d'utiliser le panneau Performance pour analyser les tâches effectuées par le thread principal pendant le chargement de la page, et trouver des moyens de différer ou de supprimer les tâches inutiles.

1. Ouvrez Performance > Capture Settings (Paramètres de capture), puis définissez le paramètre Network (Réseau) sur Slow 3G (3G lent) et le CPU (Ralentissement) sur 6x Ralentissement.

   

   Les appareils mobiles sont généralement soumis à davantage de contraintes matérielles que les ordinateurs portables ou de bureau. Ces paramètres vous permettent donc de constater le chargement des pages comme si vous utilisiez un appareil moins puissant.

2. Cliquez sur Actualiser. Les outils de développement actualisent la page, puis affichent une visualisation de toutes les tâches requises pour la charger. Cette visualisation sera appelée trace.

   

La trace affiche l'activité par ordre chronologique, de gauche à droite. Les graphiques FPS, CPU et NET situés dans la partie supérieure vous donnent un aperçu du nombre d'images par seconde, de l'activité du processeur et de l'activité réseau.

Le mur jaune que vous voyez dans la section Overview (Aperçu) signifie que le processeur était entièrement occupé par une activité de script. Cela indique que vous pouvez peut-être accélérer le chargement des pages en utilisant moins de code JavaScript.

Examinez la trace pour trouver des moyens de réduire le travail JavaScript:

1. Cliquez sur la section Délais pour la développer.

   

   Il existe de nombreuses mesures du temps utilisateur dans React. Il semble que l'application de Tony utilise le mode de développement de React. Passer au mode production de React vous permettra probablement d'améliorer facilement les performances.

2. Cliquez à nouveau sur Chronologie pour réduire cette section.

3. Parcourez la section Main (Générale). Cette section affiche un journal chronologique de l'activité du thread principal, de gauche à droite. L'axe des y (de haut en bas) indique pourquoi 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__, ce qui a entraîné l'exécution de ./src/index.jsx, et ainsi de suite.

4. Faites défiler la page jusqu'en bas de la section Main (Principale). Lorsque vous utilisez un framework, la majeure partie de l'activité supérieure est causée par le framework, qui est généralement hors de votre contrôle. L'activité causée par votre application se trouve généralement en bas de l'écran.

   

   Dans cette application, il semble qu'une fonction appelée App entraîne 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 De bas en haut en bas de l'écran. Cet onglet détaille les activités ayant pris le plus de temps. Si vous ne voyez rien dans la section Ascendant, cliquez sur le libellé de la section Principale.

   

   La section Ascendant n'affiche que les informations de l'activité ou du groupe d'activités que vous avez actuellement sélectionné. Par exemple, si vous avez cliqué sur l'une des activités mineBitcoin, la section Ascendant n'affichera que les informations de cette activité.

   La colonne Temps propre vous indique le temps passé directement dans chaque activité. Dans ce cas, environ 82% du temps du thread principal a été consacré à la fonction mineBitcoin.

Il est temps de déterminer si l'utilisation du mode production et la réduction de l'activité JavaScript accélèrent 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. Auditez à nouveau 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. Auditez à nouveau la page.

Comme toujours, il reste des choses à faire. Par exemple, réduire les métriques Largest Contentful Paint et Cumulative Layout Shift.

Limiter le fonctionnement du thread principal 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 lors de son chargement et de trouver des moyens de supprimer toute activité inutile.

Si vous préférez une approche semblable à console.log(), l'API User Timing vous permet de baliser arbitrairement certaines phases du cycle de vie de votre application, afin de suivre la durée de chacune d'elles.

Résumé

• Lorsque vous cherchez à optimiser les performances de chargement d'un site, commencez toujours par effectuer un audit. L'audit établit une référence et vous donne des conseils pour les améliorer.
• Effectuez une modification à la fois et auditez la page après chaque modification afin de déterminer l'impact de cette modification isolée sur les performances.

Étapes suivantes

Exécutez 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 vos performances de chargement, découvrez toutes les façons d'obtenir de l'aide de la communauté des outils de développement:

• Signalez les bugs signalés dans ce document dans le dépôt developer.chrome.com.
• Signalez les bugs dans les outils de développement dans Chromium Bugs.
• Discutez des fonctionnalités et des modifications dans la liste de diffusion. Veuillez ne pas utiliser la liste de diffusion pour les questions d'assistance. Utilisez plutôt Stack Overflow.
• Obtenez de l'aide pour utiliser les outils de développement sur Stack Overflow. Pour envoyer des demandes de bugs, utilisez toujours Chromium Bugs.
• Tweetez avec nous à l'adresse @ChromeDevTools.