Lighthouse est un outil qui vous aide à mesurer les performances d'une page et à trouver des moyens de les améliorer. Voici le workflow général pour utiliser Lighthouse:
- Vous indiquez à Lighthouse la page à auditer.
- Lighthouse charge cette page et enregistre le temps qu'elle met à atteindre différents jalons de performances. Ces jalons sont appelés metrics.
- Lighthouse fournit un rapport sur les performances de la page. Le rapport fournit un score pour chaque métrique et une liste d'opportunités qui, si vous les implémentez, devraient accélérer le chargement de la page.
Votre mission est d'améliorer les scores de vos métriques au fil du temps ou, du moins, de veiller à ce qu'elles ne s'aggravent pas. Cependant, il n'est pas possible de travailler directement sur les métriques. À la place, vous suivez les opportunités offertes par Lighthouse. En exploitant ces opportunités, vous pouvez améliorer les scores de vos métriques.
Exécuter Lighthouse depuis votre page de profil
Exécutez Lighthouse à partir de votre page de profil web.dev:
Indiquez n'importe quelle URL. Lighthouse effectue une série d'audits afin de générer un rapport sur les performances de la page.
Examinez le rapport d'audit pour identifier les domaines dans lesquels votre page peut être améliorée.
Pour chaque audit, vous trouverez des conseils et des mesures immédiates pour améliorer vos résultats.
Exécuter Lighthouse à partir des outils pour les développeurs Chrome
Les outils pour les développeurs Chrome sont des outils pour les développeurs Web intégrés directement au navigateur Google Chrome. Vous n'avez rien à télécharger pour utiliser ces outils. Si vous utilisez Chrome, vous avez les outils de développement.
- Dans Chrome, accédez à la page que vous souhaitez auditer.
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Audits. Si cet onglet ne s'affiche pas, cliquez sur le symbole », puis sélectionnez Audits dans la liste. Lighthouse est le moteur du panneau Audits. C'est la raison pour laquelle vous voyez l'image d'un phare.
- Assurez-vous que la case d'option Mobile est sélectionnée. Lorsque Lighthouse effectue un audit de votre page, il simule la fenêtre d'affichage et la chaîne du user-agent d'un appareil mobile.
- Assurez-vous que la case Performances est cochée. Vous pouvez activer ou désactiver les autres cases à cocher dans la section Audits. Si vous les activez, vous verrez de nombreuses opportunités d'améliorer ces autres aspects de votre page.
- Assurez-vous que la case d'option Simulé 3G rapide, Ralentissement du processeur x4 est sélectionné. Lighthouse ne limite pas votre réseau ou votre processeur pendant le chargement de la page. Il examine plutôt le temps nécessaire à la page pour se charger dans des conditions normales, puis estime le temps qu'elle aurait pris sur un réseau 3G rapide avec un processeur quatre fois moins puissant que celui de votre machine.
- Assurez-vous que la case Vider l'espace de stockage est cochée. Cette option oblige Lighthouse à accéder au réseau pour chaque ressource de page, c'est-à-dire la façon dont les visiteurs consultent la page pour la première fois.
- Cliquez sur Run Audits (Exécuter des audits). Au bout de 5 à 10 secondes, Lighthouse affiche un rapport.
Par exemple, si vous exécutez certains audits avec une 3G rapide simulée, une limitation de ralentissement du processeur 4x activée, puis que vous exécutez d'autres audits avec la limitation désactivée, vos scores de métriques seront considérablement plus bas si la limitation est activée. Vous risquez de passer beaucoup de temps à essayer de comprendre pourquoi votre page est désormais beaucoup plus lente, alors qu'en réalité, la seule chose qui a changé, c'est votre configuration.
Comprendre votre rapport
Votre score de performances global figure en haut à droite du rapport. 100 est un score parfait. Les scores des métriques sont indiqués sous le score global. Le guide d'évaluation de Lighthouse v3 explique comment chaque score de métrique contribue au score global.
Pointez sur une métrique pour en savoir plus à son sujet. Cliquez sur En savoir plus pour lire la documentation à ce sujet.
Sous les scores des métriques, des captures d'écran s'affichent pour illustrer l'apparence de la page pendant son chargement.
Sous les captures d'écran, vous trouverez des suggestions d'amélioration des performances de la page.
Cliquez sur une opportunité pour en savoir plus à son sujet.
Étapes suivantes
Essayez d'utiliser Lighthouse pour auditer votre page, à partir de votre page de profil ou des outils pour les développeurs Chrome. Implémentez l'une des opportunités, puis auditez à nouveau votre page pour voir l'impact de la modification sur votre rapport. Dans l'idéal, vos scores de métriques devraient s'améliorer un peu, et Lighthouse ne devrait plus signaler cette opportunité comme un élément à prendre en compte.
L'exécution de Lighthouse vous-même est idéale pour détecter les problèmes de détection ponctuelle, mais au bout du compte, vous devez configurer une surveillance continue pour vous assurer que votre site reste opérationnel. Pour suivre votre progression dans Lighthouse dans le temps, ajoutez votre site à votre profil.