Automated auditing, performance metrics, and best practices for the web.

This repository is empty

Auto Translate

Lighthouse

Lighthouse 可分析 Web 应用和网页，收集现代性能指标并提供开发者最佳实践的相关见解。

使用 Lighthouse
相关产品与项目
常见问题

在 Chrome DevTools 中使用 Lighthouse

Lighthouse 已直接集成到 Chrome DevTools 中，位于“Lighthouse”面板下。

安装：安装 Chrome。

运行：打开 Chrome DevTools，选择 Lighthouse 面板，然后点击“生成报告”。

Lighthouse integration in Chrome DevTools.

使用 Chrome 扩展程序

在 Lighthouse 集成到 Chrome 开发者工具之前，Chrome 扩展程序就已存在，并且提供类似的功能。

安装：从 Chrome 网上应用店安装扩展程序。

运行：请按照扩展程序快速入门指南操作。

使用 Node CLI

Node CLI 为 Lighthouse 运行的配置和报告方式提供了最大的灵活性。需要更高级用法或希望以自动化方式运行 Lighthouse 的用户应使用 Node CLI。

Note

Lighthouse 需要 Node 22（LTS）或更高版本。

安装：

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

运行方式：lighthouse https://airhorner.com/

默认情况下，Lighthouse 会将报告写入 HTML 文件。您可以通过传递标志来控制输出格式。

命令行界面选项

$ 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, use --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`

生命周期示例

如果需要，您可以通过 --gather-mode（-G）和 --audit-mode（-A）CLI 标志运行 Lighthouse 生命周期的子集。

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

错误报告说明

首次运行 CLI 时，系统会提示您是否允许 Lighthouse 匿名报告运行时异常。Lighthouse 团队利用这些信息来发现新 bug 并避免问题再次出现。选择不参与不会以任何方式影响您使用 Lighthouse 的功能。了解更多。

使用 Node 模块

您还可以通过 Node 模块以编程方式使用 Lighthouse。

阅读以编程方式使用 Lighthouse 以获取入门帮助。
阅读Lighthouse 配置了解可用的配置选项。

查看报告

Lighthouse 可以生成 JSON 或 HTML 格式的报告。

HTML 报告：

Lighthouse example audit

在线查看器

使用 --output=json 标志运行 Lighthouse 会生成运行的 JSON 转储文件。您可以通过访问 https://googlechrome.github.io/lighthouse/viewer/ 并将文件拖到应用程序中来在线查看此报告。您也可以使用任何 Lighthouse HTML 报告顶部的“导出”按钮，然后在 Lighthouse 查看器中打开报告。

在查看器中，点击右上角的分享图标并登录 GitHub 即可分享报告。

Note

共享报告作为秘密 Gist 存储在 GitHub 上您的账户下。

文档和示例

帮助您入门的有用文档、示例和使用指南。

文档

示例

插件 - Lighthouse 插件示例
自定义审计项示例 - 扩展 Lighthouse，运行您自己的审计项

视频

Google I/O 2018 大会的演讲涵盖了新的性能引擎、即将推出的 Lighthouse REST API，以及如何使用 Chrome UX 报告评估真实用户数据。

Google I/O 2017 大会的演讲涵盖了架构、编写自定义审计项、GitHub/Travis/CI 集成、无头 Chrome 等内容：

点击图片在 YouTube 上观看视频。

开发

继续阅读，了解 Lighthouse 开发的基础知识。此外，有关详细信息，请参阅贡献指南。

设置

# yarn should be installed first

git clone https://github.com/GoogleChrome/lighthouse

cd lighthouse
yarn
yarn build-all

运行

node cli http://example.com
# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to Chrome

入门提示：使用 node --inspect-brk cli http://example.com 打开 Chrome DevTools 并单步调试整个应用。更多信息请参见使用 Chrome DevTools 调试 Node.js。

测试

# 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

文档

我们的部分文档包含默认仅在 CI 中运行的测试。若要修改文档，你需要在本地运行 yarn build-pack && yarn test-docs 以确保测试通过。

额外依赖

brew install jq

Web 性能服务中的 Lighthouse 集成

本节详细介绍已集成 Lighthouse 数据的服务。如果你正在开发集成 Lighthouse 的优秀项目，并希望在此处展示，请在本仓库提交 issue 或在 Twitter 上联系我们 @_____lighthouse！

Web Page Test — 一款用于在真实设备上测量和分析网页性能的开源工具。用户可以选择在 WebPageTest 结果分析之外生成 Lighthouse 报告。
HTTPArchive - HTTPArchive 通过使用 Web Page Test 爬取 50 万个页面（包括 Lighthouse 结果）来跟踪网络构建方式，并将信息存储在 BigQuery 中，该数据公开可用。
Calibre - Calibre 是一个基于 Lighthouse 构建的综合性能监控平台。通过 GitHub 拉取请求审查，在代码部署到生产环境前了解工作对性能的影响。跟踪第三方脚本的影响。借助开发者友好的 Node.js API 实现性能系统自动化。Calibre 提供 15 天免费试用。
DebugBear - DebugBear 是一款基于 Lighthouse 的网站监控工具。查看分数和指标随时间的变化，并专注于理解每次变化的原因。DebugBear 是付费产品，提供 30 天免费试用。
Treo - Treo 是 Lighthouse 即服务。它提供回归测试、地理区域选择、自定义网络以及与 GitHub 和 Slack 的集成。Treo 是付费产品，提供面向独立开发者和团队的方案。
PageVitals - PageVitals 结合 Lighthouse、CrUX 和实地测试来监控网站性能。查看网站性能随时间的变化，并在速度过慢时收到警报。深入分析并找出任何性能问题的真正原因。PageVitals 是付费产品，提供 14 天免费试用。
Screpy - Screpy 是一款网络分析工具，可在一个仪表盘中分析网站的所有页面，并与团队共同监控。它由 Lighthouse 提供支持，还包括一些其他分析工具（SERP、W3C、正常运行时间等）。Screpy 提供免费和付费方案。
Siteimprove Performance — Siteimprove Performance 是一款网络性能监控解决方案，使营销人员、经理或决策者能够了解并优化网站加载时间。提供易于使用的见解，专注于快速且有影响力的改进点。Siteimprove Performance 是付费产品，提供 14 天免费试用。
SpeedCurve — SpeedCurve 是一款用于跨不同浏览器、设备和地区持续监控网络性能的工具。它可以聚合包括 Lighthouse 分数在内的任何指标（跨多个页面和网站），并允许你通过 Slack 或电子邮件警报设置性能预算。SpeedCurve 是付费产品，提供 30 天免费试用。
Foo - Lighthouse 即服务，提供免费和高级方案。通过 CircleCI、GitHub 和其他集成，提供 Lighthouse 审计的监控和历史报告。功能包括 Slack 通知、PR 评论报告等。
Apdex - Apdex 是一项网站性能服务。主要功能包括历史 Lighthouse 报告可视化、移动/桌面选项、警报、正常运行时间监控等。提供灵活的付费方案和 30 天免费试用。
Websu - Websu 是一个开源项目，通过简单的 HTTP REST API 提供 Lighthouse 即服务。主要功能是能够在你自己的环境中托管和部署，以及生成历史 Lighthouse 报告摘要。
DTEKT.IO - DTEKT 是一款网站性能和正常运行时间监控服务。它使用 Lighthouse 从多个位置和多个设备提供网站性能的可见性。提供三个月免费试用和付费方案。
SpeedVitals - SpeedVitals 是一款基于 Lighthouse 的工具，用于跨多个设备和位置测量网络性能。它具有各种功能，如布局偏移可视化、瀑布图、实地数据和资源图表。SpeedVitals 提供免费和付费方案。
Lighthouse Metrics - Lighthouse Metrics 通过一次测试为你提供全球性能见解。你还可以按日或按小时监控网站。Lighthouse Metrics 提供免费的全球一次性测试，性能监控作为付费功能提供 14 天免费试用。
Auditzy - Auditzy™ 是一款强大的网站审计和监控工具，可让你在用户访问前分析网页。分析竞争对手健康指标、核心网络生命力和技术。将你的网页与竞争对手进行比较，了解你领先或落后的地方。通过 Slack 发送实时通知。与多个团队无缝协作。按小时、按日、按周等自动执行审计。提供免费试用和按需付费方案。
Lighthouse Metrics China - 首款专为中国设计的 Lighthouse 指标工具。借助 Lighthouse 体验无与伦比的网站监控能力。深入了解在中国防火墙环境下你的分数和指标的波动情况，全面理解影响每次变化的因素。Lighthouse Metrics China 提供免费和付费方案。
DeploymentHawk - DeploymentHawk 是一款由 Lighthouse 驱动的自动化网站审计工具。轻松在性能、可访问性和 SEO 问题影响用户之前发现它们。DeploymentHawk 是付费产品，提供 7 天免费试用。
Guardius - Guardius 是一个 DevOps 和 DevSecOps SaaS 平台，集成了 Lighthouse 以提供自动化的网络性能分析。它不仅提供指标评估和自动扫描，还支持不同时期的性能比较以及随时间的持续观察。此外，Guardius 提供根据你的特定需求定制的预定义和自定义警报。Guardius 提供免费版本供用户探索其功能。
Sonā - Sonā 由 Lighthouse 等提供技术支持，提供对网站健康状况的深入见解。跟踪随时间的变化，分享报告，并接收可操作的建议，以改进性能、可访问性、SEO、最佳实践和安全性。Sonā 在测试版期间免费。
FERU - 从全球多个地区运行 Google Lighthouse 速度测试。提供 Lighthouse 分数、核心网络生命力和移动性能指标，以便轻松测试网站的速度、可访问性和 SEO。FERU 提供永久免费方案以及用于高级分析和监控的 premium 功能。
LightKeeper - Lighthouse 测试服务，提供免费的 HAR 矩阵视图和多区域测试（3 个免费区域，25 个以上付费区域），支持需要身份验证的页面和跨区域性能比较

Lighthouse 在非 Web 性能服务中的集成

PageWatch — PageWatch 是一款用于查找网站问题页面的工具。它提供有关拼写错误、布局问题、加载缓慢页面（由 Lighthouse 提供支持）等方面的洞察。PageWatch 提供免费和付费计划。
Fluxguard - Fluxguard 提供由 Google Puppeteer 编排的网站 DOM 变化监控，并通过 Lighthouse 进行审计。Fluxguard 是一款免费增值产品，每月可免费监控多达 75 个页面。
Microlink — Microlink 是一个作为 API 的云浏览器。它可按需提供 Lighthouse 报告，便于在此基础上构建任何服务。类似功能可通过名为 browserless 的底层开源项目获取。
Wattspeed — Wattspeed 是一款免费工具，可生成快照 — 即网页的历史捕获，其中包括 Lighthouse 分数、技术列表、W3C HTML 验证器结果、DOM 大小、混合内容信息等。

插件

lighthouse-plugin-field-performance - 此插件使用 Chrome UX Report 的数据，为 URL 添加真实用户性能指标。
lighthouse-plugin-publisher-ads - 这是一款通过一系列自动化审计来提高广告速度和整体质量的工具。目前，它主要面向使用 Google Ad Manager 的网站。该工具将帮助解决发现的问题，提供评估迭代变更有效性的手段，同时给出可操作的反馈建议。
lighthouse-plugin-crux - 此插件通过 Chrome UX Report API 快速收集真实用户指标数据。

常见问题解答

Lighthouse 是如何工作的？

请参阅 Lighthouse 架构。

为什么性能得分这么低？我看起来觉得还好。

Lighthouse 报告的性能指标模拟的是典型移动用户在 4G 网络环境下使用约 200 美元中端手机的体验。即使网站在您的设备和网络上加载很快，其他环境中的用户可能会有截然不同的体验。

更多信息请阅读我们的节流指南。

为什么性能得分变化这么大？

即使没有代码变更，由于网络和 Web 技术固有的可变性，Lighthouse 的性能得分也会发生变化。请在一致的环境中进行测试，多次运行 Lighthouse，在对影响性能的变更下结论之前，要注意这种可变性。

更多信息请阅读我们的减少可变性指南。

我可以配置 Lighthouse 的运行吗？

可以！详情请参见 Lighthouse 配置。

Lighthouse 如何使用网络节流？我怎样才能优化它？

这是个好问题。在 Lighthouse 运行时，默认会应用网络和 CPU 节流。网络会尝试模拟慢速 4G 连接，CPU 速度会降至您机器默认速度的四分之一。如果您希望运行 Lighthouse 时不进行节流，则必须使用命令行界面 (CLI) 并通过上述 --throttling.* 标志将其禁用。

更多信息请阅读我们的网络节流指南。

结果会发送到远程服务器吗？

不会。Lighthouse 在本地运行，使用安装在机器上的本地版 Chrome 浏览器对页面进行审计。报告结果绝不会被处理或发送到远程服务器。

如何通过 CLI 获取本地化的 Lighthouse 结果？

从 Lighthouse 8.0 开始，Lighthouse 完全依赖原生 Intl 支持，不再使用 Intl polyfill。如果您使用的是 Node 14 或更高版本，应该不会有问题，因为 Node 现在默认内置了 full-icu。

但是，如果您使用的是 small-icu Node 构建版本，可能会看到 Lighthouse 记录有关您的区域设置不可用的消息。要解决此问题，您可以通过使用 full-icu 模块和启动时的 --icu-data-dir node 标志手动安装 ICU 数据。

如何编写自定义审计以扩展 Lighthouse？

提示：有关术语和架构的更多信息，请参阅 Lighthouse 架构。

Lighthouse 可以扩展运行您编写的自定义审计和收集器。如果您已经在网站中跟踪性能指标，并希望在 Lighthouse 报告中展示这些指标，这将非常有用。

如果您有兴趣运行自己的自定义审计，请查看示例中的自定义审计示例。

如何贡献？

我们非常欢迎您帮助编写审计、修复错误以及使工具更加实用！请参阅贡献指南开始。

Lighthouse logo
Lighthouse，/ˈlaɪtˌhaʊs/（名词）：一种~~塔或其他结构~~工具，包含信标灯，用于警告或引导~~海上船只~~开发人员。

Introduction

网站自动化审计、性能指标及最佳实践。【此简介由AI生成】

Apache-2.0 JavaScript 6.62 KCommitsaudit best-practices chrome-devtools developer-tools performance-analysis performance-metrics web

Customize your domain

README

Code of conduct

61330.77 K9.76 KVisit GitHub

lighthouse:基于 Node.js 的 Web 性能与最佳实践分析工具项目