Présentation de Lighthouse

Lighthouse est un outil automatisé Open Source qui vous aide à 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. Indiquez à Lighthouse une URL à auditer. Il exécute une série d'audits sur la page, puis génère un rapport sur ses performances. Utilisez les audits échoués comme indicateurs pour améliorer la page. Chaque audit est associé à une référence qui explique pourquoi il est important et comment le corriger.

Vous pouvez également utiliser Lighthouse CI pour éviter les régressions sur vos sites.

Commencer

Choisissez le workflow Lighthouse qui vous convient le mieux :

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

Lighthouse possè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. Ouvrez Chrome et accédez à l'URL que vous souhaitez auditer. Vous pouvez auditer n'importe quelle URL sur le Web.
  3. Ouvrez les outils pour les développeurs Chrome.

  4. Cliquez sur l'onglet Lighthouse (Phare).

    À gauche se trouve la fenêtre d'affichage de la page Web à auditer. À droite se trouve le panneau Lighthouse des outils pour les développeurs Chrome.

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

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

    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:

  1. Téléchargez Google Chrome pour ordinateur.
  2. Installez la version actuelle de Long-Term Support (assistance à long terme) de Node.
  3. Installez Lighthouse. L'option -g l'installe en tant que module global.
npm install -g lighthouse

Pour effectuer un audit :

lighthouse <url>

Pour voir toutes les options:

lighthouse --help

Exécuter le module Node par programmation

Consultez la section Utiliser de manière automatisée pour obtenir un exemple d'exécution programmatique de Lighthouse en tant que module de nœud.

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

    Site Web 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 depuis le Chrome Web Store.

Pour effectuer un audit :

  1. Dans Chrome, accédez à la page que vous souhaitez auditer.

  2. Cliquez sur Lighthouse à côté de la barre d'adresse de Chrome ou dans le menu des extensions de Chrome. Une fois cliqué, le menu Lighthouse se développe.

    L'extension vous invite à générer un rapport.

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

    Rapport Lighthouse généré à partir de l'extension.

Partager et consulter des rapports en ligne

Utilisez le lecteur Lighthouse pour afficher et partager des rapports en ligne.

Lecteur Lighthouse

Partager des rapports au format JSON

L'outil de visualisation Lighthouse a besoin de la sortie JSON d'un rapport Lighthouse. Générez les sorties JSON comme suit :

  • À partir d'un rapport Lighthouse Cliquez sur  pour ouvrir le menu, puis 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:

  1. Ouvrez la visionneuse Lighthouse.
  2. Faites glisser le fichier JSON sur le visualiseur, ou cliquez n'importe où dans le visualiseur pour ouvrir le 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 :

  1. Cliquez sur le menu , puis sur Ouvrir dans le visionneuse. Le rapport se trouve à l'emplacement https://googlechrome.github.io/lighthouse/viewer/.
  2. Dans le lecteur, cliquez sur le menu , puis sur Enregistrer sous 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, et de lire et d'écrire dans vos gists.

Pour exporter un rapport en tant que gist à partir de la version CLI de Lighthouse, créez manuellement un gist et 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 le Visionneuse, puis 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.

Packs de piles

Les développeurs utilisent de nombreuses technologies différentes (backend, systèmes de gestion de contenu et frameworks JavaScript) pour créer leurs pages Web. Au lieu d'afficher des recommandations générales, Lighthouse fournit des conseils pertinents et pratiques, en fonction des outils utilisés.

Les packs de piles permettent à Lighthouse de détecter la plate-forme sur laquelle votre site repose 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 pack de pile, consultez les Consignes de contribution.

Plugins 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 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 à exécuter par Lighthouse et à ajouter au rapport en tant que nouvelle catégorie.

Pour en savoir plus sur la création de 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 dans les produits ou services que vous proposez, c'est excellent. Nous souhaitons que le plus grand nombre de personnes possible utilise Lighthouse.

Consultez les Consignes et éléments de marque pour l'intégration de Lighthouse pour montrer que Lighthouse est utilisé, 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. Les problèmes sont un bon endroit pour discuter des métriques de performances, des idées de nouveaux audits ou de tout autre élément lié à Lighthouse.