Découvrir des opportunités d'amélioration des performances avec Lighthouse

Kayce Basques

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:

1. Vous indiquez à Lighthouse la page à auditer.
2. Lighthouse charge cette page et enregistre le temps qu'elle met à atteindre différents jalons de performances. Ces jalons sont appelés métriques.
3. Lighthouse vous 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 vous assurer qu'ils ne se détériorent pas. Vous ne pouvez toutefois pas travailler directement sur les métriques. Vous suivez plutôt les opportunités que Lighthouse vous propose. Travailler sur ces opportunités a tendance à améliorer vos scores de métriques.

Exécuter Lighthouse depuis votre page de profil

Exécutez Lighthouse à partir de la page de votre profil web.dev:

1. Indiquez une URL, et Lighthouse exécute une série d'audits qui génèrent un rapport sur les performances de la page.

2. Examinez le rapport d'audit pour identifier les points à améliorer sur votre page.

3. Pour chaque audit, vous trouverez des conseils et des mesures immédiates à prendre pour améliorer vos scores.

Exécuter Lighthouse depuis les outils pour les développeurs Chrome

Les outils pour les développeurs Chrome sont un ensemble d'outils pour les développeurs Web intégrés directement dans le navigateur Google Chrome. Vous n'avez rien à télécharger pour obtenir DevTools. Si vous avez Chrome, vous avez également les outils pour les développeurs.

1. Dans Chrome, accédez à la page que vous souhaitez auditer.
2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.

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 qui alimente le panneau Audits (Audits). C'est pourquoi une image de phare s'affiche.

1. Assurez-vous que la case d'option Mobile est sélectionnée. Lorsque Lighthouse audite votre page, il simule la vue d'un appareil mobile et la chaîne de l'agent utilisateur.
2. Assurez-vous que la case Performances est cochée. Vous pouvez activer ou désactiver le reste des 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.
3. Assurez-vous que la case d'option Simulation de connexion 3G rapide, processeur 4 fois plus lent est sélectionnée. Lighthouse ne limite pas réellement votre réseau ni votre processeur pendant le chargement de la page. Au lieu de cela, il examine le temps de chargement de la page dans des conditions normales, puis estime le temps qu'il aurait fallu sur un réseau 3G rapide avec un processeur quatre fois moins puissant que celui de votre machine.
4. Assurez-vous que la case Clear Storage (Effacer l'espace de stockage) est cochée. Cette option force Lighthouse à accéder au réseau pour chaque ressource de page, ce qui est l'expérience que les visiteurs pour la première fois ont de la page.
5. Cliquez sur Exécuter des audits. Au bout de cinq à dix secondes, Lighthouse affiche un rapport.

Remarque : Vous pouvez définir les options de configuration en fonction de vos besoins. Si vous ne les comprenez pas, les valeurs par défaut indiquées ici sont de bonnes options. Si vous pouvez accélérer votre page avec ces options, elle sera rapide pour tous les utilisateurs. L'essentiel est de rester cohérent dans les options d'un audit à l'autre.

Par exemple, si vous exécutez des audits avec la connexion 3G rapide simulée et le baisse de fréquence du processeur 4 fois activée, puis d'autres fois avec le débit limité désactivé, vos scores de métriques seront nettement inférieurs lorsque le débit limité est activé. Vous pouvez passer beaucoup de temps à essayer de comprendre pourquoi votre page est beaucoup plus lente maintenant, alors qu'en réalité, la seule chose qui a changé est votre configuration.

Comprendre votre rapport

En haut à droite du rapport, vous trouverez votre score de performances globales. 100 correspond à un score parfait. Sous le score global figurent les scores des métriques. Le guide de notation Lighthouse v3 explique comment chaque score de métrique contribue au score global.

Pointez sur une métrique pour en savoir plus. Cliquez sur En savoir plus pour consulter la documentation.

Sous les scores de vos métriques, vous trouverez des captures d'écran de l'apparence de la page lors de son chargement.

Sous les captures d'écran, vous trouverez des opportunités d'amélioration des performances de la page.

Cliquez sur une opportunité pour en savoir plus.

Étapes suivantes

Essayez d'utiliser Lighthouse pour effectuer un audit de votre page, soit depuis votre page de profil, soit depuis les outils pour les développeurs Chrome. Implémentez l'une des opportunités, puis effectuez un nouvel audit de votre page pour voir l'impact de la modification sur votre rapport. Dans l'idéal, les scores de vos métriques devraient être un peu meilleurs, et Lighthouse ne devrait plus signaler cette opportunité comme une tâche à accomplir.

Exécuter Lighthouse vous-même est idéal pour détecter les problèmes, mais vous devrez finalement configurer une surveillance continue pour vous assurer que votre site reste opérationnel. Pour suivre votre progression Lighthouse au fil du temps, ajoutez votre site à votre profil.