Lighthouse

Lighthouse 是一款自动化的开源工具，可帮助您提升网页质量。您可以在任何网页（公开网页或需要身份验证的网页）上运行该脚本。该工具可针对性能、无障碍、搜索引擎优化 (SEO) 等方面进行评估。

您可以在 Chrome 开发者工具中、通过命令行或作为 Node 模块运行 Lighthouse。向 Lighthouse 提供要审核的网址，它会对该网页运行一系列审核，然后生成一份报告，说明该网页的表现如何。您可以将未通过审核的网页作为指标，了解如何改进网页。每项审核都有参考信息，说明该审核的重要性以及如何解决问题。

在 Chrome DevTools 中使用 Lighthouse

Lighthouse 直接集成到 Chrome DevTools 的“Lighthouse”面板下。

安装：安装 Chrome。

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

使用 Chrome 扩展程序

Chrome 扩展程序在 Lighthouse 出现在 Chrome 开发者工具中之前就已经可用，并且提供类似的功能。

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

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

使用 Node CLI

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

Lighthouse 需要 Node 22 (LTS) 或更高版本。

安装：

npm install -g lighthouse
# 或使用yarn：
# yarn global add lighthouse

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

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

CLI 选项

$ lighthouse --help

lighthouse <url> <options>

日志记录：
--verbose 显示详细日志记录 [布尔值] [默认值：false]
--quiet 不显示进度、调试日志或错误 [布尔值] [默认值：false]

配置：
--save-assets 将跟踪内容和 devtools 日志保存到磁盘 [布尔值] [默认值：false]
--list-all-audits 打印所有可用审计的列表并退出 [布尔值] [默认值：false]
--list-trace-categories 打印所有必需的跟踪类别的列表并退出 [布尔值] [默认值：false]
--additional-trace-categories 跟踪中要捕获的其他类别（以逗号分隔）。[字符串]
--config-path 配置 JSON 文件的路径。
示例配置文件：core/config/lr-desktop-config.js [字符串]
--preset 使用内置配置。
警告：如果提供了 --config-path 标志，此预设将被忽略。[string] [选项："perf", "experimental", "desktop"]
--chrome-flags 传递给 Chrome 的自定义标志（以空格分隔）。完整标志列表请访问 https://bit.ly/chrome-flags
此外，使用 CHROME_PATH 环境变量指定特定的 Chrome 二进制文件。需要 Chromium 66.0 或更高版本。如果省略，则将使用任何检测到的 Chrome Canary 或 Chrome 稳定版本。[string] [默认值：""]
--port 用于调试协议的端口。使用 0 表示随机端口。[number] [默认值：0]
--hostname 用于调试协议的主机名。[string] [默认值："localhost"]
--form-factor 确定性能指标的评分方式以及是否跳过仅限移动设备的审核。对于桌面设备，请改用 --preset=desktop。 [string] [choices: "mobile", "desktop"]
--screenEmulation 设置屏幕模拟参数。另请参阅 --preset。使用 --screenEmulation.disabled 禁用。否则，请分别设置以下四个参数：--screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
--emulatedUserAgent 设置用户代理模拟 [string]
--max-wait-for-load 页面加载完成并继续运行前的等待超时时间（以毫秒为单位）。警告：过高的值可能会导致大量跟踪信息和不稳定 [number]
--enable-error-reporting 启用错误报告，覆盖任何已保存的首选项。--no-enable-error-reporting 则相反。更多信息：https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md [布尔值]
--gather-mode, -G 从已连接的浏览器收集工件并保存到磁盘。（可以选择提供工件文件夹路径）。如果未启用审核模式，运行将提前退出。
--audit-mode, -A 从磁盘处理已保存的工件。（可以选择提供工件文件夹路径，否则默认为 ./latest-run/）
--only-audits 仅运行指定的审核 [数组]
--only-categories 仅运行指定的类别。可用类别：可访问性、最佳实践、性能、搜索引擎优化 [数组]
--skip-audits 运行除这些审核之外的所有内容 [数组]
--disable-full-page-screenshot 禁用收集整页截图，截图可能非常大 [布尔值]

输出：
--output 结果报告器，支持多个值。选项："json", "html", "csv" [array] [默认值：["html"]]
--output-path 输出结果的文件路径。使用“stdout”写入标准输出。
如果使用 JSON 输出，默认为标准输出。
如果使用 HTML 或 CSV 输出，默认为工作目录中的文件名，其名称基于测试 URL 和日期。
如果使用多个输出，--output-path 会附加每个输出类型的标准扩展名。 "reports/my-run" -> "reports/my-run.report.html"、"reports/my-run.report.json" 等等。
示例：--output-path=./lighthouse-results.html [字符串]
--view 在浏览器中打开 HTML 报告 [布尔值] [默认值：false]

选项：
--version 显示版本号 [布尔值]
--help 显示帮助 [布尔值]
--cli-flags-path 包含所需 CLI 参数的 JSON 文件路径。在命令行中指定的参数仍将覆盖基于文件的参数。
--locale 报告应采用的语言/区域设置
--blocked-url-patterns 阻止对指定 URL 模式的任何网络请求 [数组]
--disable-storage-reset 禁用在运行前清除浏览器缓存和其他存储 API [布尔值]
--throttling-method 控制节流方法 [字符串] [选项："devtools", "provided", "simulate"]
--throttling
--throttling.rttMs 控制模拟网络 RTT（TCP 层）
--throttling.throughputKbps 控制模拟网络下载吞吐量
--throttling.requestLatencyMs 控制模拟网络 RTT（HTTP 层）
--throttling.downloadThroughputKbps 控制模拟网络下载吞吐量
--throttling.uploadThroughputKbps 控制模拟网络上传吞吐量
--throttling.cpuSlowdownMultiplier 控制模拟 + 仿真 CPU 节流
--extra-headers 设置随请求传递的额外 HTTP 标头
--precomputed-lantern-data-path Lantern 模拟数据读取文件的路径，覆盖 Lantern 观测到的 RTT 和服务器延迟估计值。[字符串]
--lantern-data-output-path Lantern 模拟数据写入文件的路径，可在下次运行中与 `precomputed-lantern-data-path` 标志一起使用。 [字符串]
--plugins 运行指定的插件 [数组]
--channel [字符串] [默认值："cli"]
--chrome-ignore-default-flags [布尔值] [默认值：false]

示例：
lighthouse <url> --view 运行完成后在浏览器中打开 HTML 报告
lighthouse <url> --config-path=./myconfig.js 使用您自己的配置运行 Lighthouse：自定义审核、报告生成等。
lighthouse <url> --output=json --output-path=./report.json --save-assets 保存跟踪记录、屏幕截图和命名的 JSON 报告。
lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent 禁用设备模拟和所有限制
lighthouse <url> --chrome-flags="--window-size=412,660" 以特定窗口大小启动 Chrome
lighthouse <url> --quiet --chrome-flags="--headless" 启动 Headless Chrome，关闭日志记录
lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\", \"x-men\":\"wolverine\"}" 字符串化的 JSON HTTP 标头键/值对，用于在请求中发送
lighthouse <url> --extra-headers=./path/to/file.json HTTP 标头键/值对的 JSON 文件路径，用于在请求中发送
lighthouse <url> --only-categories=performance,seo 仅运行指定的类别。可用类别：可访问性、最佳实践、性能、SEO

有关 Lighthouse 的更多信息，请访问 https://developers.google.com/web/tools/lighthouse/。

输出示例

lighthouse
# 保存 `./<HOST>_<DATE>.report.html`

lighthouse --output json
# 将 JSON 输出发送到标准输出

lighthouse --output html --output-path ./report.html
# 保存 `./report.html`

# 注意：指定多种格式的输出路径会忽略*所有*格式的指定扩展名
lighthouse --output json --output html --output-path ./myfile.json
# 保存 `./myfile.report.json` 和 `./myfile.report.html`

lighthouse --output json --output html
# 保存 `./<HOST>_<DATE>.report.json` 和 `./<HOST>_<DATE>.report.html`

lighthouse --output-path=~/mydir/foo.out --save-assets
# 保存`~/mydir/foo.report.html`
# 保存 `~/mydir/foo-0.trace.json` 和 `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# 保存 `./report.json`

生命周期示例

如果需要，您可以通过 --gather-mode (-G) 和 --audit-mode (-A) CLI 参数运行 Lighthouse 生命周期的子集。

lighthouse http://example.com -G
# 启动浏览器，收集工件，将其保存到磁盘（在 `./latest-run/` 中）并退出

lighthouse http://example.com -A
# 跳过浏览器交互，从磁盘加载工件（在 `./latest-run/` 中），对其进行审计，生成报告

lighthouse http://example.com -GA
# 常规收集 + 审计运行，但也将收集到的工件保存到磁盘以供后续的 -A 运行。

# 您可以选择为 -G/-A/-GA 提供自定义文件夹目标。如果没有指定值，则默认为 `$PWD/latest-run`。
lighthouse -GA=./gmailartifacts https://gmail.com

错误报告注意事项

首次运行 CLI 时，系统会提示您 Lighthouse 是否可以匿名报告运行时异常。Lighthouse 团队会使用此信息来检测新的错误并避免回归。选择退出不会以任何方式影响您使用 Lighthouse。了解更多。

使用 Node 模块

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

阅读以编程方式使用 Lighthouse 获取入门帮助。

阅读Lighthouse 配置 了解更多可用的配置选项。

查看报告

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

HTML 报告：

在线查看器

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

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

[!NOTE]
共享报告将以秘密 Gist 的形式存储在 GitHub 帐户下。

文档和技巧

实用的文档、示例和技巧，助您快速入门。

文档

• 处理差异
• 以编程方式使用 Lighthouse
• 使用身份验证测试网站
• 开发插件
• 创建新的审计
• 在移动设备上测试
• Lighthouse 架构

Recipes

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

开发

继续阅读 Lighthouse 上的 hacking 基础知识。另请参阅 Contributing
了解更多信息。

设置

# 应先安装 yarn

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

cd lighthouse
yarn
yarn build-all

运行

node cli http://example.com
# 如果在连接 Chrome 时遇到问题，请附加 --chrome-flags="--no-sandbox --headless --disable-gpu"

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

测试

# lint 并测试所有文件
yarn test

# 运行所有单元测试
yarn unit

# 运行指定的单元测试（例如 core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js）
yarn mocha uses-long-cache-ttl

# 监视文件更改并运行测试
# 需要 http://entrproject.org : brew install entr
yarn watch

## 分别运行 lint、单元和冒烟测试
yarn lint
yarn unit
yarn smoke

## 运行 tsc 编译器
yarn 类型检查

Web Perf 服务中的 Lighthouse 集成

本节详细介绍了已集成 Lighthouse 数据的服务。如果您正在开发一个集成 Lighthouse 的优秀项目，并希望在此展示，请向此代码库提交问题或发送推文给我们 @_____lighthouse！

• Web Page Test — 一个 开源 工具，用于测量和分析网页在真实设备上的性能。用户可以选择在分析 WebPageTest 结果的同时生成 Lighthouse 报告。

• HTTPArchive - HTTPArchive 使用 Web Page Test 抓取 50 万个页面（包括 Lighthouse 的结果）来追踪 Web 的构建方式，并将这些信息存储在 BigQuery 中，供 公开。

• Calibre - Calibre 是一个运行在 Lighthouse 上的综合性能监控平台。通过 GitHub Pull Request 审核，您可以在工作投入生产之前查看其性能影响。跟踪第三方脚本的影响。使用开发者优先的 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、Uptime 等）。Screpy 提供免费和付费版本。

• Siteimprove Performance — Siteimprove Performance 是一款 Web 性能监控解决方案，可帮助营销人员、经理或决策者了解和优化网站加载时间。获得易于使用的洞察，专注于快速获得显著成效。Siteimprove Performance 是一款付费产品，提供 14 天免费试用。

• SpeedCurve — SpeedCurve 是一款用于持续监控不同浏览器、设备和地区的 Web 性能的工具。它可以聚合任何指标，包括多个页面和网站的 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 来提供自动化的 Web 性能分析。它不仅提供指标评估和自动扫描，还能跨不同时间段进行性能比较，并持续进行观察。此外，Guardius 还提供根据您的特定需求定制的预定义和自定义警报。Guardius 提供免费版本，供用户探索其功能。

• Sonā - Sonā 由 Lighthouse 等软件提供支持，能够深入了解您网站的健康状况。跟踪随时间推移的变化，分享报告，并获取切实可行的建议，以提升性能、可访问性、SEO、最佳实践和安全性。Sonā 在测试阶段免费提供。

Lighthouse 与非 Web Perf 服务集成

• 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 用户体验报告 中的数据为 URL 添加真实用户性能指标的插件。

• lighthouse-plugin-publisher-ads - 一款通过一系列自动化审核来提升广告速度和整体质量的工具。目前，此功能主要针对使用 Google Ad Manager 的网站。此工具将有助于解决已发现的问题，提供用于评估迭代改进效果的工具，并提供可行的反馈建议。

• lighthouse-plugin-crux - 一款可从 Chrome UX Report API 快速收集真实用户指标数据的插件。

常见问题解答

Lighthouse 如何工作？

请参阅 Lighthouse 架构。

为什么性能分数这么低？我感觉还不错。

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

请参阅我们的 节流指南 了解更多信息。

为什么性能分数变化如此之大？

即使没有代码更改，Lighthouse 的性能分数也会由于 Web 和网络技术的固有差异而发生变化。请在一致的环境中进行测试，多次运行 Lighthouse，并在得出影响性能的更改结论之前，务必注意这些差异。

请参阅我们的减少差异性指南，了解更多信息。

我可以配置 Lighthouse 运行吗？

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

Lighthouse 如何使用网络限流？我该如何改进它？

好问题。Lighthouse 运行默认会应用网络和 CPU 限流。网络
会尝试模拟较慢的 4G 连接，CPU 速度会比机器默认速度慢 4 倍。如果您
希望在 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 节点标志 手动安装 ICU 数据。

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

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

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

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