Vue d'ensemble

Lighthouse est un outil automatisé Open Source permettant d'améliorer la qualité des pages Web. Vous pouvez l'exécuter sur n'importe quelle page Web, qu'elle soit publique ou nécessitant une authentification. Elle inclut des audits des performances, de l'accessibilité, des progressive web apps, du SEO et plus encore.

Logo Lighthouse

Vous pouvez exécuter Lighthouse dans les outils pour les développeurs Chrome, à partir de la ligne de commande ou en tant que module de nœud. Vous attribuez à Lighthouse une URL à auditer, il exécute une série d'audits sur la page, puis il génère un rapport sur les performances de la page. À partir de là, utilisez les audits défaillants comme indicateurs sur la façon d’améliorer la page. Chaque audit est associé à un document de référence qui explique l'importance de l'audit et comment y remédier.

Vous pouvez également utiliser Lighthouse CI pour empêcher les régressions sur vos sites.

Regardez la vidéo Google I/O ci-dessous pour découvrir comment utiliser Lighthouse et y contribuer.

Premiers pas

Choisissez le workflow Lighthouse qui vous convient le mieux:

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 :

  1. Téléchargez Google Chrome pour ordinateur.
  2. Dans Google Chrome, accédez à l'URL que vous souhaitez auditer. Vous pouvez auditer n'importe quelle URL sur le Web.
  3. Accédez aux Outils pour les développeurs Chrome.
  4. Cliquez sur l'onglet Lighthouse.

    Panneau Lighthouse des outils pour les développeurs Chrome
    La fenêtre d'affichage de la page qui sera auditée se trouve à gauche. À droite se trouve le panneau Lighthouse des outils pour les développeurs Chrome, fourni par Lighthouse.

  5. Cliquez sur Analyser le chargement de la page. Les outils de développement affichent la liste des catégories d'audit. Laissez-les tous activés.

  6. Cliquez sur Exécuter l'audit. Au bout de 30 à 60 secondes, Lighthouse affiche un rapport sur la page.

    Rapport Lighthouse dans les outils pour les développeurs Chrome
    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 de nœud:

  1. Téléchargez Google Chrome pour ordinateur.
  2. Installez la version actuelle de support à long terme de Node.
  3. Installez Lighthouse. L'option -g l'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

Pour découvrir un exemple d'exécution programmatique de Lighthouse en tant que module Node, consultez Utiliser la programmation.

Exécuter PageSpeed Insights

Pour exécuter Lighthouse sur PageSpeed Insights:

  1. Accédez à PageSpeed Insights.
  2. Saisissez l'URL d'une page Web.
  3. Cliquez sur Analyze (Analyser).

    Interface utilisateur de PageSpeed Insights
    Interface utilisateur de PageSpeed Insights

Exécuter Lighthouse en tant qu'extension Chrome

Pour installer l'extension:

  1. Téléchargez Google Chrome pour ordinateur.
  2. Installez l'extension Chrome Lighthouse à partir du Chrome Web Store.

Pour exécuter un audit:

  1. Dans Chrome, accédez à la page que vous souhaitez auditer.
  2. Cliquez sur le phare Extension Lighthouse icion. Elle devrait se trouver à côté de la barre d'adresse Chrome. Si ce n'est pas le cas, ouvrez le menu de l'extension Chrome pour y accéder. Lorsque vous cliquez dessus, le menu Lighthouse se développe.

    Extension Lighthouse
    Panneau de l'extension Lighthouse

  3. Cliquez sur Générer un rapport. Lighthouse effectue ses audits sur la page actuellement sélectionnée, puis ouvre un nouvel onglet contenant le rapport des résultats.

    Rapport sur les extensions Lighthouse
    Un rapport Lighthouse de l'extension

Partager et consulter des rapports en ligne

Utilisez Lighthouse Viewer pour afficher et partager des rapports en ligne.

Visionneuse Lighthouse
Lecteur Lighthouse

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 Icône de menu en haut à droite, puis cliquez sur Bouton &quot;Save as JSON&quot; (Enregistrer au format JSON) Save as JSON (Enregistrer au format JSON).
  • Ligne de commande. Exécutez : shell lighthouse --output json --output-path <path/for/output.json>

Pour afficher les données du rapport:

  1. Ouvrez la visionneuse Lighthouse.
  2. Faites glisser le fichier JSON dans la visionneuse ou cliquez n'importe où dans la visionneuse pour ouvrir votre navigateur de fichiers et sélectionner le fichier.

Partager des rapports sous forme de 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 de version sans frais.

Pour exporter un rapport sous forme de vue d'ensemble:

  1. (Si la visionneuse est déjà affichée, ignorez cette étape) Ouvrez le menu Icône de menu en haut à droite, puis cliquez sur Bouton &quot;Ouvrir dans la visionneuse&quot; Ouvrir dans la visionneuse. Le rapport s'ouvre dans la visionneuse, située à l'adresse https://googlechrome.github.io/lighthouse/viewer/.
  2. Dans la visionneuse, ouvrez le menu Icône de menu en haut à droite, puis cliquez sur Bouton &quot;Ouvrir dans la visionneuse&quot; Save as Gist (Enregistrer en tant que Gist). La première fois que vous effectuez cette opération, une fenêtre pop-up vous demande l'autorisation d'accéder à vos données GitHub de base, ainsi que de lire et d'écrire dans vos listes.

Pour exporter un rapport en tant que rapport Gist depuis la version CLI de Lighthouse, créez manuellement un gist, puis copiez-collez la sortie JSON du rapport dans le Gist. Le nom de fichier 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 du gist. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • Ouvrez la Visionneuse et collez-y l'URL d'un gist.

Extensibilité des phares

Lighthouse vise à fournir des conseils pertinents et exploitables à tous les développeurs Web. Deux fonctionnalités sont donc disponibles pour vous permettre d'adapter Lighthouse à vos besoins spécifiques.

Packs de pile

Les développeurs utilisent de nombreuses technologies différentes (frameworks backend/CMS/JavaScript) pour créer leurs pages Web. Au lieu d'afficher uniquement des recommandations générales, Lighthouse est maintenant en mesure de fournir des conseils plus pertinents et plus exploitables, en fonction des outils utilisés.

Ces packs permettent à Lighthouse de détecter la plate-forme sur laquelle repose votre site et d'afficher des recommandations spécifiques basées sur une pile. Ces recommandations sont définies et sélectionnées par des experts de la communauté.

Pour contribuer à un pack de pile, consultez les consignes de contribution.

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 de nouveaux audits. À la base, un plug-in Lighthouse est un module de nœud qui implémente un ensemble de vérifications qui seront exécutées par Lighthouse et ajoutées au rapport en tant que nouvelle catégorie.

Pour en savoir plus sur la création de votre propre plug-in, consultez notre manuel de plug-ins dans le dépôt GitHub Lighthouse.

Intégrer Lighthouse

Si vous êtes une entreprise ou un particulier et que vous souhaitez intégrer Lighthouse dans ses produits / services, abordez le sujet, et nous sommes ravis que vous l'ayez. Nous souhaitons que Lighthouse soit utilisé par un maximum de personnes, et ces consignes et éléments de marque pour l'intégration de Lighthouse vous permettent de montrer facilement que Lighthouse est en dessous tout en protégeant notre marque.

Contribuer à Lighthouse

Lighthouse est un projet Open Source. Vos contributions sont donc les bienvenues ! Consultez l'outil de suivi des problèmes du dépôt pour trouver des bugs à corriger ou des audits que vous pouvez créer ou améliorer. L'outil Issue Tracker est aussi l'endroit idéal pour discuter des métriques de performances, des idées de nouveaux audits ou de tout autre sujet concernant Lighthouse.