lighthouse
v12.2.2
Lighthouse analyse les applications et les pages Web, collectant des mesures de performances modernes et des informations sur les meilleures pratiques des développeurs.
Lighthouse est intégré directement dans Chrome DevTools, sous le panneau "Lighthouse".
Installation : installez Chrome.
Exécutez-le : ouvrez Chrome DevTools, sélectionnez le panneau Lighthouse et cliquez sur "Générer un rapport".
L'extension Chrome était disponible avant que Lighthouse ne soit disponible dans les outils de développement Chrome et offre des fonctionnalités similaires.
Installation : installez l'extension depuis le Chrome Web Store.
Exécutez-le : suivez le guide de démarrage rapide de l'extension.
La CLI Node offre la plus grande flexibilité dans la façon dont les exécutions de Lighthouse peuvent être configurées et signalées. Les utilisateurs qui souhaitent une utilisation plus avancée ou qui souhaitent exécuter Lighthouse de manière automatisée doivent utiliser la CLI Node.
Remarque Lighthouse nécessite Node 18 LTS (18.x) ou version ultérieure.
Mise en place :
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse Exécutez-le : lighthouse https://airhorner.com/
Par défaut, Lighthouse écrit le rapport dans un fichier HTML. Vous pouvez contrôler le format de sortie en passant des indicateurs.
$ lighthouse --help
lighthouse <url> <options>
Logging:
--verbose Displays verbose logging [boolean] [default: false]
--quiet Displays no progress, debug logs, or errors [boolean] [default: false]
Configuration:
--save-assets Save the trace contents & devtools logs to disk [boolean] [default: false]
--list-all-audits Prints a list of all available audits and exits [boolean] [default: false]
--list-trace-categories Prints a list of all required trace categories and exits [boolean] [default: false]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited). [string]
--config-path The path to the config JSON.
An example config file: core/config/lr-desktop-config.js [string]
--preset Use a built-in configuration.
WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental", "desktop"]
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""]
--port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0]
--hostname The hostname to use for the debugging protocol. [string] [default: "localhost"]
--form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"]
--screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
--emulatedUserAgent Sets useragent emulation [string]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability [number]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md [boolean]
--gather-mode, -G Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
--audit-mode, -A Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
--only-audits Only run the specified audits [array]
--only-categories Only run the specified categories. Available categories: accessibility, best-practices, performance, seo [array]
--skip-audits Run everything except these audits [array]
--disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large [boolean]
Output:
--output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [array] [default: ["html"]]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
Example: --output-path=./lighthouse-results.html [string]
--view Open HTML report in your browser [boolean] [default: false]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--cli-flags-path The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.
--locale The locale/language the report should be formatted in
--blocked-url-patterns Block any network requests to the specified URL patterns [array]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]
--throttling-method Controls throttling method [string] [choices: "devtools", "provided", "simulate"]
--throttling
--throttling.rttMs Controls simulated network RTT (TCP layer)
--throttling.throughputKbps Controls simulated network download throughput
--throttling.requestLatencyMs Controls emulated network RTT (HTTP layer)
--throttling.downloadThroughputKbps Controls emulated network download throughput
--throttling.uploadThroughputKbps Controls emulated network upload throughput
--throttling.cpuSlowdownMultiplier Controls simulated + emulated CPU throttling
--extra-headers Set extra HTTP Headers to pass with request
--precomputed-lantern-data-path Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency. [string]
--lantern-data-output-path Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag. [string]
--plugins Run the specified plugins [array]
--channel [string] [default: "cli"]
--chrome-ignore-default-flags [boolean] [default: false]
Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent Disable device emulation and all throttling
lighthouse <url> --chrome-flags="--window-size=412,660" Launch Chrome with a specific window size
lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging
lighthouse <url> --extra-headers "{"Cookie":"monster=blue", "x-men":"wolverine"}" Stringify'd JSON HTTP Header key/value pairs to send in requests
lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests
lighthouse <url> --only-categories=performance,seo Only run the specified categories. Available categories: accessibility, best-practices, performance, seo
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
lighthouse
# saves `./<HOST>_<DATE>.report.html`
lighthouse --output json
# json output sent to stdout
lighthouse --output html --output-path ./report.html
# saves `./report.html`
# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path= ~ /mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
lighthouse --output-path=./report.json --output json
# saves `./report.json` Vous pouvez exécuter un sous-ensemble du cycle de vie de Lighthouse si vous le souhaitez via les indicateurs CLI --gather-mode ( -G ) et --audit-mode ( -A ).
lighthouse http://example.com -G
# launches browser, collects artifacts, saves them to disk (in `./latest-run/`) and quits
lighthouse http://example.com -A
# skips browser interaction, loads artifacts from disk (in `./latest-run/`), runs audits on them, generates report
lighthouse http://example.com -GA
# Normal gather + audit run, but also saves collected artifacts to disk for subsequent -A runs.
# You can optionally provide a custom folder destination to -G/-A/-GA. Without a value, the default will be `$PWD/latest-run`.
lighthouse -GA=./gmailartifacts https://gmail.comLa première fois que vous exécutez la CLI, un message vous demande si Lighthouse peut signaler de manière anonyme les exceptions d'exécution. L'équipe Lighthouse utilise ces informations pour détecter de nouveaux bugs et éviter les régressions. La désinscription n’affectera en aucune manière votre capacité à utiliser Lighthouse. Apprendre encore plus.
Vous pouvez également utiliser Lighthouse par programmation avec le module Node.
Lisez Utilisation de Lighthouse par programmation pour obtenir de l’aide pour démarrer.
Lisez Configuration de Lighthouse pour en savoir plus sur les options de configuration disponibles.
Lighthouse peut produire un rapport au format JSON ou HTML.
Rapport HTML :
L’exécution de Lighthouse avec l’indicateur --output=json génère un dump JSON de l’exécution. Vous pouvez consulter ce rapport en ligne en visitant https://googlechrome.github.io/lighthouse/viewer/ et en faisant glisser le fichier sur l'application. Vous pouvez également utiliser le bouton « Exporter » en haut de n'importe quel rapport HTML Lighthouse et ouvrir le rapport dans Lighthouse Viewer.
Dans la visionneuse, les rapports peuvent être partagés en cliquant sur l'icône de partage dans le coin supérieur droit et en vous connectant à GitHub.
Remarque : les rapports partagés sont stockés en tant que Gist secret dans GitHub, sous votre compte.
Documentation utile, exemples et recettes pour vous aider à démarrer.
Documents
Recettes
Vidéos
La session de Google I/O 2018 couvre le nouveau moteur de performances, la prochaine API Lighthouse REST et l'utilisation du rapport Chrome UX pour évaluer les données des utilisateurs réels.
La session de Google I/O 2017 couvre l'architecture, l'écriture d'audits personnalisés, l'intégration GitHub/Travis/CI, Chrome sans tête, et bien plus encore :
Cliquez sur l'image pour regarder la vidéo sur YouTube.
Poursuivez votre lecture pour découvrir les bases du piratage sur Lighthouse. Voir également Contribuer pour des informations détaillées.
# yarn should be installed first
git clone https://github.com/GoogleChrome/lighthouse
cd lighthouse
yarn
yarn build-allnode cli http://example.com
# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to ChromeConseil de démarrage :
node --inspect-brk cli http://example.compour ouvrir Chrome DevTools et parcourir l'intégralité de l'application. Voir Débogage de Node.js avec Chrome DevTools pour plus d'informations.
# lint and test all files
yarn test
# run all unit tests
yarn unit
# run a given unit test (e.g. core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js)
yarn mocha uses-long-cache-ttl
# watch for file changes and run tests
# Requires http://entrproject.org : brew install entr
yarn watch
# # run linting, unit, and smoke tests separately
yarn lint
yarn unit
yarn smoke
# # run tsc compiler
yarn type-check Certains de nos documents contiennent des tests qui s'exécutent uniquement dans CI par défaut. Pour modifier notre documentation, vous devrez exécuter yarn build-pack && yarn test-docs localement pour vous assurer qu'ils réussissent.
Dépendances supplémentaires
brew install jqCette section détaille les services qui ont intégré les données Lighthouse. Si vous travaillez sur un projet sympa intégrant Lighthouse et que vous souhaitez figurer ici, déposez un problème sur ce dépôt ou tweetez-nous @_____lighthouse !
Test de page Web — Un outil open source pour mesurer et analyser les performances des pages Web sur des appareils réels. Les utilisateurs peuvent choisir de produire un rapport Lighthouse parallèlement à l'analyse des résultats de WebPageTest.
HTTPArchive : HTTPArchive suit la façon dont le Web est construit en explorant 500 000 pages avec Web Page Test, y compris les résultats Lighthouse, et stocke les informations dans BigQuery où elles sont accessibles au public.
Calibre – Calibre est une plateforme complète de surveillance des performances fonctionnant sur Lighthouse. Découvrez l'impact sur les performances de votre travail avant qu'il n'atteigne la production avec GitHub Pull Request Reviews. Suivez l’impact des scripts tiers. Automatisez votre système de performances avec une API Node.js réservée aux développeurs. Essayez Calibre avec un essai gratuit de 15 jours.
DebugBear - DebugBear est un outil de surveillance de sites Web basé sur Lighthouse. Découvrez l'évolution de vos scores et de vos mesures au fil du temps, en vous concentrant sur la compréhension de la cause de chaque changement. DebugBear est un produit payant avec un essai gratuit de 30 jours.
Treo – Treo est un phare en tant que service. Il fournit des tests de régression, des régions géographiques, des réseaux personnalisés et des intégrations avec GitHub et Slack. Treo est un produit payant avec des plans pour les développeurs solo et les équipes.
PageVitals - PageVitals combine Lighthouse, CrUX et des tests sur le terrain pour surveiller les performances des sites Web. Découvrez les performances de votre site Web au fil du temps et soyez alerté s'il devient trop lent. Explorez et trouvez la véritable cause de tout problème de performances. PageVitals est un produit payant avec un essai gratuit de 14 jours.
Screpy - Screpy est un outil d'analyse Web qui peut analyser toutes les pages de vos sites Web dans un seul tableau de bord et les surveiller avec votre équipe. Il est alimenté par Lighthouse et comprend également différents outils d'analyse (SERP, W3C, Uptime, etc.). Screpy propose des forfaits gratuits et payants.
Siteimprove Performance — Siteimprove Performance est une solution de surveillance des performances Web qui permet à un spécialiste du marketing, un responsable ou un décideur de comprendre et d'optimiser les temps de chargement d'un site Web. Obtenez des informations faciles à utiliser en mettant l’accent sur des gains rapides et percutants. Siteimprove Performance est un produit payant avec un essai gratuit de 14 jours.
SpeedCurve — SpeedCurve est un outil permettant de surveiller en continu les performances Web sur différents navigateurs, appareils et régions. Il peut regrouper n'importe quelle mesure, y compris les scores Lighthouse sur plusieurs pages et sites, et vous permet de définir des budgets de performances avec Slack ou des alertes par e-mail. SpeedCurve est un produit payant avec un essai gratuit de 30 jours.
Foo - Lighthouse-as-a-service proposant des forfaits gratuits et premium. Fournit une surveillance et des rapports historiques sur les audits Lighthouse avec CircleCI, GitHub et d'autres intégrations. Les fonctionnalités incluent les notifications Slack, les rapports de commentaires PR et bien plus encore.
Apdex – Apdex est un service de performance de sites Web. Les principales fonctionnalités sont les visualisations historiques des rapports Lighthouse, les options mobiles/de bureau, les alertes, la surveillance de la disponibilité, etc. Il existe des forfaits payants flexibles et un essai gratuit de 30 jours.
Websu - Websu est un projet open source visant à fournir Lighthouse-as-a-Service via une simple API HTTP REST. Les principales fonctionnalités sont la possibilité d'héberger et de déployer dans votre propre environnement et les résumés des rapports historiques de Lighthouse.
DTEKT.IO - DTEKT est un service de surveillance des performances et de la disponibilité d'un site Web. Il utilise Lighthouse pour offrir une visibilité sur les performances des sites Web à partir de plusieurs emplacements sur plusieurs appareils. Il propose trois mois d’essai gratuit et des forfaits payants.
SpeedVitals - SpeedVitals est un outil alimenté par Lighthouse pour mesurer les performances Web sur plusieurs appareils et emplacements. Il possède diverses fonctionnalités telles que la visualisation des changements de disposition, le graphique en cascade, les données de terrain et les graphiques de ressources. SpeedVitals propose des forfaits gratuits et payants.
Lighthouse Metrics - Lighthouse Metrics vous donne des informations sur les performances globales avec un seul test. Vous pouvez également surveiller vos sites Web sur une base quotidienne ou horaire. Lighthouse Metrics propose des tests uniques mondiaux gratuits et une surveillance des performances en tant que fonctionnalité payante avec un essai gratuit de 14 jours.
Auditzy - Auditzy™ est un outil d'audit et de surveillance de sites Web robuste qui vous permet d'analyser le parcours pré-utilisateur de vos pages Web. Analysez les mesures de santé des concurrents, les éléments essentiels du Web et la technologie. Comparez vos pages Web avec celles de vos concurrents pour comprendre où vous êtes en avance ou en retard. Notification en temps réel avec Slack. Bénéficiez d'une collaboration transparente avec plusieurs équipes. Automatisez vos audits horaires, quotidiens, hebdomadaires, etc. Il propose un essai gratuit avec des forfaits payants au fur et à mesure.
Lighthouse Metrics China - Le premier outil de métriques Lighthouse spécialement conçu pour la Chine. Découvrez des capacités de surveillance de sites Web inégalées avec Lighthouse. Obtenez des informations sur les fluctuations de vos scores et mesures au sein du grand pare-feu de Chine, permettant une compréhension complète des facteurs influençant chaque changement. Lighthouse Metrics China propose des forfaits gratuits et payants.
DeploymentHawk - DeploymentHawk est un outil d'audit de site automatisé optimisé par Lighthouse. Détectez sans effort les problèmes de performances, d’accessibilité et de référencement avant qu’ils n’affectent vos utilisateurs. DeploymentHawk est un produit payant avec un essai gratuit de 7 jours.
Guardius - Guardius est une plateforme SaaS DevOps et DevSecOps qui intègre Lighthouse pour fournir une analyse automatisée des performances Web. Il fournit non seulement une évaluation des métriques et une analyse automatique, mais permet également des comparaisons de performances sur différentes périodes et une observation continue au fil du temps. De plus, Guardius propose des alertes prédéfinies et personnalisées adaptées à vos besoins spécifiques. Une version gratuite de Guardius est disponible pour que les utilisateurs puissent explorer ses fonctionnalités.
PageWatch — PageWatch est un outil pour trouver les pages problématiques sur votre site Web. Il fournit des informations sur les fautes d'orthographe, les problèmes de mise en page, les pages lentes (propulsées par Lighthouse) et bien plus encore. PageWatch est proposé via des forfaits gratuits et payants.
Fluxguard - Fluxguard fournit une surveillance des modifications DOM des sites Web orchestrée avec Google Puppeteer et auditée par Lighthouse. Fluxguard est un produit freemium, avec un suivi mensuel allant jusqu'à 75 pages gratuitement.
Microlink — Microlink est un navigateur cloud en tant qu'API. Il propose des rapports Lighthouse à la demande, ce qui facilite la création de n'importe quel service. Une fonctionnalité similaire est disponible via le projet open source sous-jacent nommé sans navigateur.
Wattspeed — Wattspeed est un outil gratuit qui génère des instantanés - des captures historiques de vos pages Web qui incluent les scores Lighthouse, une liste de technologies, les résultats du validateur HTML W3C, la taille du DOM, des informations sur le contenu mixte, et plus encore.
lighthouse-plugin-field-performance - un plugin qui ajoute des mesures de performances d'utilisateur réel pour l'URL à l'aide des données du rapport Chrome UX.
lighthouse-plugin-publisher-ads - un outil pour améliorer la vitesse des annonces et la qualité globale grâce à une série d'audits automatisés. Pour le moment, cela s'adresse principalement aux sites utilisant Google Ad Manager. Cet outil aidera à résoudre les problèmes découverts, en fournissant un outil à utiliser pour évaluer l'efficacité des changements itératifs tout en suggérant des commentaires exploitables.
lighthouse-plugin-crux - un plugin qui rassemble rapidement des données de métriques d'utilisateurs réels à partir de l'API Chrome UX Report.
Autres projets open source géniaux qui utilisent Lighthouse.
Voir Architecture du phare.
Lighthouse rapporte les mesures de performances telles qu'elles seraient obtenues par un utilisateur mobile typique sur une connexion 4G et un téléphone de niveau intermédiaire à environ 200 $. Même s'il se charge rapidement sur votre appareil et votre réseau, les utilisateurs d'autres environnements connaîtront le site de manière très différente.
Pour en savoir plus, consultez notre guide sur la limitation.
Les scores de performances de Lighthouse changeront en raison de la variabilité inhérente aux technologies Web et réseau, même s'il n'y a pas eu de changement de code. Testez dans des environnements cohérents, exécutez Lighthouse plusieurs fois et méfiez-vous de la variabilité avant de tirer des conclusions sur un changement ayant un impact sur les performances.
Apprenez-en davantage dans notre guide pour réduire la variabilité.
Oui! Détails dans la configuration Lighthouse.
Bonne question. La limitation du réseau et du processeur est appliquée par défaut dans une exécution Lighthouse. Le réseau tente d'émuler une connectivité 4G lente et le processeur est ralenti 4 fois par rapport à la vitesse par défaut de votre machine. Si vous préférez exécuter Lighthouse sans limitation, vous devrez utiliser la CLI et la désactiver avec les indicateurs --throttling.* mentionnés ci-dessus.
Pour en savoir plus, consultez notre guide sur la limitation du réseau.
Non. Lighthouse s'exécute localement et audite une page à l'aide d'une version locale du navigateur Chrome installée sur la machine. Les résultats du rapport ne sont jamais traités ni transmis à un serveur distant.
À partir de Lighthouse 8.0, Lighthouse s'appuie entièrement sur la prise en charge native Intl et n'utilise plus de polyfill Intl . Si vous utilisez Node 14 ou une version ultérieure, il ne devrait y avoir aucun problème car Node est désormais construit avec full-icu par défaut.
Cependant, si vous utilisez une version de nœud small-icu , vous pouvez voir des messages du journal Lighthouse indiquant que vos paramètres régionaux ne sont pas disponibles. Pour remédier à cela, vous pouvez installer manuellement les données ICU en utilisant le module full-icu et l'indicateur de nœud --icu-data-dir au lancement.
Astuce : voir Lighthouse Architecture pour plus d'informations sur la terminologie et l'architecture.
Lighthouse peut être étendu pour exécuter des audits personnalisés et des collecteurs que vous créez. C'est idéal si vous suivez déjà les mesures de performances de votre site et que vous souhaitez afficher ces mesures dans un rapport Lighthouse.
Si vous souhaitez exécuter vos propres audits personnalisés, consultez notre exemple d'audit personnalisé dans les recettes.
Nous serions ravis de vous aider à rédiger des audits, à corriger des bugs et à rendre l'outil plus utile ! Voir Contribuer pour commencer.
Phare , ˈlītˌhous (n) : tour ou autre outil de structure contenant une balise lumineuse pour avertir ou guider les navires en mer .
