Lighthouse est un outil automatisé Open Source qui permet d'améliorer la qualité des pages Web. Vous pouvez l'exécuter sur n'importe quelle page Web, publique ou nécessitant une authentification. Elle inclut des audits des performances, de l'accessibilité, des progressive web apps, du SEO, etc.
Vous pouvez exécuter Lighthouse dans les outils pour les développeurs Chrome, à partir de la ligne de commande ou en tant que module Node. Vous donnez à Lighthouse une URL à auditer. Il exécute une série d'audits sur la page, puis génère un rapport sur les performances de la page. À partir de là, utilisez les audits ayant échoué comme indicateurs sur la façon d'améliorer la page. Chaque audit contient un document de référence expliquant pourquoi l'audit est important, et comment le corriger.
Vous pouvez également utiliser l'intégration continue Lighthouse pour éviter les régressions sur vos sites.
Regardez la vidéo de la conférence Google I/O ci-dessous pour en savoir plus sur l'utilisation et la contribution de Lighthouse.
Premiers pas
Choisissez le workflow Lighthouse qui vous convient le mieux :
- Dans les outils pour les développeurs Chrome Contrôlez facilement les pages nécessitant une authentification et lisez vos rapports dans un format convivial.
- Depuis la ligne de commande Automatisez vos exécutions Lighthouse via des scripts shell.
- En tant que module de nœud. Intégrez Lighthouse dans vos systèmes d'intégration continue.
- À partir d'une UI Web Exécutez Lighthouse et créez des liens vers des rapports sans avoir à installer quoi que ce soit.
Exécuter Lighthouse dans les outils pour les développeurs Chrome
Lighthouse dispose de son propre panneau dans les outils pour les développeurs Chrome. Pour exécuter un rapport :
- Téléchargez Google Chrome pour ordinateur.
- Dans Google Chrome, accédez à l'URL que vous souhaitez auditer. Vous pouvez auditer n'importe quelle URL sur le Web.
- Accédez aux outils pour les développeurs Chrome.
Cliquez sur l'onglet Lighthouse (Phare).
À gauche se trouve le viewport de la page qui sera auditée. À droite se trouve le panneau Lighthouse des outils pour les développeurs Chrome, qui est alimenté par Lighthouse. Cliquez sur Analyser le chargement de la page. Les outils de développement affichent une liste de catégories d'audit. Laissez-les toutes activées.
Cliquez sur Exécuter l'audit. Au bout de 30 à 60 secondes, Lighthouse vous fournit un rapport sur la page.
Un rapport Lighthouse dans les outils pour les développeurs Chrome
Installer et exécuter l'outil de ligne de commande Node
Pour installer le module Node:
- Téléchargez Google Chrome pour ordinateur.
- Installez la version actuelle de Node avec assistance à long terme.
- Installez Lighthouse. L'option
-gl'installe en tant que module global.
npm install -g lighthouse
Pour exécuter un audit:
lighthouse <url>
Pour afficher toutes les options:
lighthouse --help
Exécuter le module Node par programmation
Consultez Utiliser de manière programmatique pour obtenir un exemple d'exécution de Lighthouse de manière programmatique, en tant que module Node.
Exécuter PageSpeed Insights
Pour exécuter Lighthouse sur PageSpeed Insights :
- Accédez à PageSpeed Insights.
- Saisissez l'URL d'une page Web.
Cliquez sur Analyze (Analyser).
Interface utilisateur de PageSpeed Insights
Exécuter Lighthouse en tant qu'extension Chrome
Pour installer l'extension:
- Téléchargez Google Chrome pour ordinateur.
- Installez l'extension Chrome Lighthouse à partir du Chrome Web Store.
Pour exécuter un audit:
- Dans Chrome, accédez à la page que vous souhaitez auditer.
Cliquez sur le Lighthouse
. Elle se trouve à côté de la barre d'adresse de Chrome. Si ce n'est pas le cas, ouvrez le menu des extensions de Chrome et accédez-y à partir de là. Lorsque vous cliquez, le menu Lighthouse se développe.
Panneau des extensions Lighthouse Cliquez sur Générer un rapport. Lighthouse effectue ses audits sur la page sélectionnée, puis ouvre un nouvel onglet contenant un rapport des résultats.
Un rapport Lighthouse de l'extension
Partager et afficher des rapports en ligne
Utilisez la visionneuse Lighthouse pour afficher et partager des rapports en ligne.
Partager des rapports au format JSON
Le lecteur Lighthouse a besoin de la sortie JSON d'un rapport Lighthouse. La liste ci-dessous explique comment obtenir la sortie JSON, en fonction du workflow Lighthouse que vous utilisez :
- Rapport Lighthouse Ouvrez le menu
en haut à droite, puis cliquez sur 
Enregistrer au format JSON. - Ligne de commande Exécuter :
shell lighthouse --output json --output-path <path/for/output.json>
Pour afficher les données du rapport:
- Ouvrez la visionneuse Lighthouse.
- Faites glisser le fichier JSON dans la visionneuse ou cliquez n'importe où dans celle-ci pour ouvrir votre navigateur de fichiers et sélectionner le fichier.
Partager des rapports en tant que gists GitHub
Si vous ne souhaitez pas transmettre manuellement des fichiers JSON, vous pouvez également partager vos rapports en tant que gists GitHub secrets. L'un des avantages des gists est le contrôle sans frais des versions.
Pour exporter un rapport en tant que gist :
- (Si vous êtes déjà dans le lecteur, ignorez cette étape) Ouvrez le menu
en haut à droite, puis cliquez sur 
Ouvrir dans le lecteur. Le rapport s'ouvre dans la visionneuse, à l'adresse https://googlechrome.github.io/lighthouse/viewer/. - Dans le lecteur, ouvrez le menu
en haut à droite, puis cliquez sur 
Enregistrer en tant que gist. La première fois que vous effectuez cette opération, un pop-up vous demande l'autorisation d'accéder à vos données GitHub de base, ainsi que de lire et d'écrire dans vos Gist.
Pour exporter un rapport en tant que gist depuis la version CLI de Lighthouse, créez manuellement un Gist, puis copiez-collez la sortie JSON du rapport dans la version Gist. Le nom de fichier du gist contenant la sortie JSON doit se terminer par .lighthouse.report.json. Consultez Partager des rapports au format JSON pour découvrir comment générer une sortie JSON à partir de l'outil de ligne de commande.
Pour afficher un rapport enregistré en tant que Gist:
- Ajoutez
?gist=<ID>à l'URL du lecteur, où<ID>est l'ID de l'instruction Gist.text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID> - Ouvrez le Visionneuse et collez l'URL d'un gist.
Extensibilité de Lighthouse
Lighthouse vise à fournir des conseils pertinents et exploitables pour tous les développeurs Web. Pour ce faire, deux fonctionnalités sont disponibles pour vous permettre d'adapter Lighthouse à vos besoins spécifiques.
Blocs d'annonces
Les développeurs utilisent de nombreuses technologies (backend/CMS/cadres JavaScript) pour créer leurs pages Web. Au lieu de proposer uniquement des recommandations générales, Lighthouse est désormais en mesure de fournir des conseils plus pertinents et pratiques en fonction des outils utilisés.
Les "packages de pile" permettent à Lighthouse de détecter la plate-forme sur laquelle votre site est basé et d'afficher des recommandations spécifiques basées sur la pile. Ces recommandations sont définies et sélectionnées par des experts de la communauté.
Pour contribuer à un Stack Pack, consultez les Consignes relatives aux contributions.
Plug-ins Lighthouse
Les plug-ins Lighthouse permettent aux experts du domaine d'étendre les fonctionnalités de Lighthouse aux besoins spécifiques de leur communauté. Vous pouvez désormais exploiter les données collectées par Lighthouse pour créer des audits. À la base, un plug-in Lighthouse est un module de nœud qui implémente un ensemble de vérifications qui sont exécutées par Lighthouse et ajoutées au rapport en tant que nouvelle catégorie.
Pour savoir comment créer votre propre plug-in, consultez notre guide du plug-in dans le dépôt GitHub de Lighthouse.
Intégrer Lighthouse
Si vous êtes une entreprise ou un particulier qui intègre Lighthouse des produits / services que vous proposez, avant tout, nous sommes ravis de vous voir ! Nous souhaitons que le plus grand nombre de personnes possible utilise Lighthouse. Ces consignes et assets de marque pour l'intégration de Lighthouse sont destinées à vous permettre de montrer facilement que Lighthouse est sous le capot tout en protégeant notre marque.
Contribuer à Lighthouse
Lighthouse est Open Source et les contributions sont les bienvenues. Consultez l'outil de suivi des problèmes du dépôt pour identifier les bugs que vous pouvez corriger ou les audits que vous pouvez créer ou améliorer. Le suivi des problèmes est également un bon endroit pour discuter des métriques de performances, des idées de nouveaux audits ou de tout autre sujet lié à Lighthouse.