Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解。
使用Lighthouse
在Chrome开发工具中使用Lighthouse
Lighthouse直接集成到Chrome DevTools中,在“Lighthouse”面板下。
安装:安装Chrome。
运行它:打开ChromeDevTools,选择Lighthouse面板,然后点击“GenerateReport”。

使用Chrome扩展
Chrome扩展早于Lighthouse出现在Chrome开发工具中之前,并且提供了类似的功能。
安装:从chrome web store安装扩展。
运行它:遵循扩展快速入门指南。
使用node CLI
在如何配置和报告Lighthouse的运行方面,Node CLI提供了最大的灵活性。想要更高级的使用,或者希望以自动化方式运行Lighthouse的用户应该使用Node CLI。
Lighthouse需要node10 LTS(10.13)或更高版本。
安装:
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
运行它:
lighthouse https://airhorner.com/
默认情况下,Lighthouse会将报告写入HTML文件。您可以通过传递标志来控制输出格式。
CLI 选项:
$ lighthouse --help
lighthouse <url>
日志:
--verbose 显示详细日志记录 [boolean]
--quiet 不显示进度、调试日志或错误 [boolean]
配置:
--save-assets 保存跟踪和开发工具日志到硬盘 [boolean]
--list-all-audits 打印所有可用审核和退出的列表 [boolean]
--list-trace-categories [boolean] 打印所有必需的跟踪类别和退出的列表
--print-config [boolean] 打印给定配置和选项的规范化配置,然后退出。
--additional-trace-categories 要使用跟踪捕获的其他类别(逗号分隔)。
--config-path 配置JSON的路径。一个示例配置文件:lighthouse-core/config/lr-desktop-config.js
--budget-path The path to the budget.json file for LightWallet.
--chrome-flags 传递给Chrome 的自定义标志(空格分隔的)。有关标志的完整列表,请参阅
http://peter.sh/experiments/chromium-command-line-switches/.
环境变量:
CHROME_PATH:目标CHROME二进制文件的显式路径。If set必须指向
Chromium版本66.0或更高版本。默认情况下,任何检测到的Chrome Canary或Chrome(稳定)都将启动。 [default: ""]
--port 用于调试协议的端口。使用0作为随机端口 [default: 0]
--preset 使用内置配置。[choices: "experimental", "perf"]
警告:如果提供了--config-path标志,则将忽略此预置。
--hostname 用于调试协议的主机名。 [default: "localhost"]
--max-wait-for-load 在认为页面加载完成并应继续运行之前等待的超时(毫秒)。
警告:非常高的值可能导致较大的跟踪和不稳定性 [default: 45000]
--emulated-form-factor 如果未禁用,则控制模拟设备因素选项有(mobile vs. desktop) [choices: "mobile", "desktop", "none"] [default: "mobile"]
--enable-error-reporting 启用错误报告,覆盖任何保存的首选项。 --no-enable-error-reporting 会适得其反。更多:
https://git.io/vFFTO
--gather-mode, -G 从连接的浏览器收集工件并保存到磁盘。如果未启用审核模式,则运行将退出很早。 [boolean]
--audit-mode, -A 从磁盘处理保存的工件 [boolean]
输出:
--output 报告结果,支持多个值 [choices: "json", "html", "csv"] [default: "html"]
--output-path 输出结果的文件路径。使用“stdout”写入stdout。
如果使用JSON输出,默认值为stdout。
如果使用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报表 [boolean]
选项:
--help 显示帮助 [boolean]
--version 显示版本号 [boolean]
--cli-flags-path 包含要应用的所需CLI标志的JSON文件的路径。
在命令行指定的标志仍将覆盖基于文件的标志。
--blocked-url-patterns 阻止对指定URL模式的任何网络请求 [array]
--disable-storage-reset 禁止在运行前清除浏览器缓存和其他存储API [boolean]
--throttling-method 控制节流方法 [choices: "devtools", "provided", "simulate"]
--throttling.rttMs 控制模拟网络RTT(TCP层)
--throttling.throughputKbps 控制模拟网络下载吞吐量
--throttling.requestLatencyMs 控制仿真网络RTT(HTTP层)
--throttling.downloadThroughputKbps 控制仿真网络下载吞吐量
--throttling.uploadThroughputKbps 控制仿真网络上传吞吐量
--throttling.cpuSlowdownMultiplier 控制模拟+仿真的CPU调节
--extra-headers 将额外的HTTP头设置为随请求传递 [string]
示例:
lighthouse <url> --view 运行完成后,在浏览器中打开HTML报表
lighthouse <url> --config-path=./myconfig.js 使用您自己的配置运行Lighthouse:custom audits,report生成等。
lighthouse <url> --output=json --output-path=./report.json --save-assets 保存跟踪、devtoolslog和被命名JSON报告。
lighthouse <url> --emulated-form-factor=none --throttling-method=provided 禁用设备仿真和所有限制。
lighthouse <url> --chrome-flags="--window-size=412,660" 启动具有特定窗口大小的Chrome
lighthouse <url> --quiet --chrome-flags="--headless" 启动无头Chrome,关闭日志记录
lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\"}" Stringify JSON HTTP头key/value对以发送请求
lighthouse <url> --extra-headers=./path/to/file.json 要发送请求的HTTP头key/value对的JSON文件的路径
lighthouse <url> --only-categories=performance,pwa 只运行指定的类别。可用类别:可访问性,
最佳实践,性能,pwa,seo。
有关Lighthouse的详细信息,请参见, https://developers.google.com/web/tools/lighthouse/.
输出示例
lighthouse
# 保存 `./<HOST>_<DATE>.report.html`
lighthouse --output json
# 发送到stdout的json输出
lighthouse --output html --output-path ./report.html
# 保存 `./report.html`
# 注意:使用多种格式指定输出路径会忽略指定的*ALL*格式扩展名
lighthouse --output json --output html --output-path ./myfile.json
# 保存 `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# 保存 `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path=~/mydir/foo.out --save-assets
# 保存 `~/mydir/foo.report.html`
# 保存 `~/mydir/foo-0.trace.json` and `~/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模块
您还可以通过编程方式将Lighthouse与node模块一起使用。
阅读使用Lighthouse编程帮助入门。
阅读Lighthouse配置以了解有关可用配置选项的更多信息。
查看报告
Lighthouse可以生成JSON或HTML格式的报告。
HTML报告:

线上查看器
使用--output=json标志运行Lighthouse将生成运行的json转储。您可以在线查看此报告通过访问https://googlechrome.github.io/lighthouse/viewer/,把文件拖到应用程序上。您还可以使用任何Lighthouse HTML报告顶部的“Export”按钮,并在Lighthouse查看器中打开报告。
在查看器中,可以通过单击右上角的共享图标并登录GitHub来共享报表。
注意:共享的报告作为一个秘密要旨藏在GitHub的帐户下。
文件和方法
有用的文档、示例和方法可以帮助您入门。
文档
方法
gulp - 有助于CI集成 Plugin- Lighthouse插件示例 自定义审计示例 - 扩展Lighthouse,进行你自己的审计
视频
略。
需要观看视频的请看原文。
开发
继续阅读Lighthouse黑客攻击的基本知识。另外,请参见贡献以获取详细信息。
开始
# yarn 先安装
git clone https://github.com/GoogleChrome/lighthouse
cd lighthouse
yarn
yarn build-all
运行
node lighthouse-cli http://example.com
# 如果连接到chrome时遇到问题,请附加-chrome-flags="--no-sandbox --headless --disable-gpu"
入门提示:node--inspect brk lighthouse clihttp://example.com至打开Chrome开发工具,逐步浏览整个应用程序。请参阅调试node.js使用Chrome开发工具获取更多信息。
测试
# lint并测试所有文件
yarn test
# 监视文件更改并运行测试
# 要求http://entrproject.org:brew安装入口
yarn watch
## 分别运行 linting, unit和 smoke tests
yarn lint
yarn unit
yarn smoke
## 运行tsc编译器
yarn type-check
文档
我们的一些文档默认情况下只在CI中运行测试。如果您最终需要修改我们的文档,您需要在本地运行yarn测试文档以确保它们通过。
附加依赖项
brew install jq
Web Perf服务中的Lighthouse集成
本节详细介绍了集成了Lighthouse数据的服务。如果你正在做一个整合Lighthouse的很酷的项目,并且想在这里做专题报道,请在我们的“Lighthouse”上发表一篇文章!
-
Web Page Test-一个开源工具,用于测量和分析真实设备上网页的性能。用户可以选择在分析网页测试结果的同时生成Lighthouse报告。
- HTTPArchive-HTTPArchive通过抓取500k个网页测试(包括Lighthouse结果)来跟踪web是如何构建的,并将信息存储在BigQuery中,该信息是公开的。
-
Calibre - Calibre是一个运行在Lighthouse上的综合性能监控平台。通过GitHubPull Request Reviews,在您的工作投入生产之前查看其对性能的影响。跟踪第三方脚本的影响。首先让开发人员自动化您的性能系统node.js API。试试Calibre,免费试用15天。
-
DebugBear - DebugBear是一个基于Lighthouse的网站监控工具。看看你的分数和指标是如何随着时间的推移而变化的,重点是理解每一次变化的原因。DebugBear是一款付费产品,30天免费试用。
-
Treo - Treo是Lighthouse服务。它提供回归测试、地理区域、自定义网络以及与GitHub&Slack的集成。Treo是一款付费产品,为个人开发者和团队提供计划。
-
Lighthouse Keeper - Lighthouse Keeper监视你的页面Lighthouse得分,如果低于你的阈值就会通知你。Lighthouse Keeper是一项免费服务,每天监控多达3个网址。
-
Siteimprove Performance - Siteimprove Performance是一个web性能监视解决方案,它使营销人员、经理或决策者能够了解并优化网站加载时间。通过关注快速而有效的胜利,获得易于使用的见解。Siteimprove Performance是一款付费产品,提供14天免费试用。
-
SpeedCurve - SpeedCurve是一个工具,用于在不同的浏览器、设备和区域之间连续监视web性能。它可以在多个页面和站点上聚合任何指标,包括Lighthouse分数,并允许您使用Slack或email警报来设置性能预算。SpeedCurve是一款付费产品,提供30天免费试用。
-
Speedrank - Speedrank在后台监视网站的性能。它显示Lighthouse报告,并提供改进建议。Speedrank是一款付费产品,有14天试用期。
-
Foo- Lighthouse-as-a-service提供免费和优质计划。使用CircleCI、GitHub和其他集成提供 Lighthouse审计的监视和历史报告。功能包括时差通知,公关评论报告等。
-
PageSpeed Green - 网站加载速度监控服务。跟踪来自多个区域的无限网页的页面速度性能。通过使用CLI集成到CD/CI,检查所有代码更改是否存在页面速度降低。由google lighthouse和puppeter提供支持。PageSpeed Green是一款免费的产品,每月可免费监控多达200次审核。
非Web性能服务中的lighthouse集成
- PageWatch — PageWatch是一个在你的网站上查找问题页面的工具。它提供了对拼写错误、布局问题、慢速页面(由Lighthouse提供支持)等方面的见解。PageWatch通过免费和付费计划提供。
- SEO Guard — SEO卫士是一个网站监控解决方案。它提供了基于Lighthouse得分的指标。这项服务是通过免费和付费的保费计划提供的。
- Fluxguard — Fluxguard提供了与google puppeter协调并由Lighthouse审计的网站DOM变更监控。Fluxguard是一款免费的产品,每月免费监控多达75页。
- Wattspeed — Wattspeed是一个免费的工具,它可以生成网页的快照,包括Lighthouse分数、技术列表、W3C HTML验证器结果、DOM大小、混合内容信息等等。
- AwesomeTechStack — AwesomeTechStack是一个免费使用的网站技术堆栈分析器。AwesomeTechStack提供对任何网站技术堆栈的安全性、现代性和性能的见解,并提供改进性能的指导。Lighthouse insights是网站技术排名的重要组成部分。
Plugins
- lighthouse-plugin-field-performance - 一个插件,使用chromeux报告中的数据为URL添加真实的用户性能指标。
- lighthouse-plugin-publisher-ads - 通过一系列自动化审核来提高广告速度和整体质量的工具。目前,这主要是针对使用谷歌广告管理器的网站。这个工具将有助于解决发现的问题,提供一个工具,用于评估迭代更改的有效性,同时建议可操作的反馈。
相关项目
其他使用开源的项目。
请参阅原文。
常见问题解答
- Lighthouse 是怎么工作的?
- 为什么表现分数这么低?我觉得很好。
- Lighthouse报告的性能指标是典型的移动用户在4G连接和中端200美元的手机上所体验到的。即使它在您的设备和网络上加载很快,其他环境中的用户也会体验到非常不同的站点。
- 请阅读我们的节流指南。
- 为什么绩效分数变化这么大?
-
Lighthouse的性能分数会因为web和网络技术的固有变化而改变,即使代码没有改变。在一致的环境中进行测试,多次运行Lighthouse,并在得出影响性能的更改的结论之前,注意可变性。
-
请阅读我们的减少可变性指南。
-
- 我可以配置lighthouse 运行吗?
- lighthouse如何使用网络节流,以及如何使其更好?
- 好问题。在Lighthouse运行中,默认应用网络和CPU调节。网络试图模拟缓慢的4G连接,CPU的速度比机器的默认速度慢4倍。如果您希望在不进行限制的情况下运行Lighthouse,则必须使用CLI并使用上面提到的--throttling.*标志禁用它。
- 请阅读我们的网络节流指南。
- 结果是否发送到远程服务器?
- 不。Lighthouse在本地运行,使用计算机上安装的Chrome浏览器的本地版本来审核页面。报告结果从不被处理或传送到远程服务器。
- 如何编写自定义审核以扩展Lighthouse?
- 提示:有关术语和体系结构的更多信息,请参见lighthouse体系结构。
- Lighthouse可以扩展为运行您编写的自定义审计和采集器。如果您已经在站点中跟踪性能指标,并希望在 Lighthouse报告中显示这些指标,那么这非常好。
- 如果您对运行自己的定制审计感兴趣,请查看我们的定制审计示例。
- 我该如何贡献?
- 我们很乐意帮助编写审计,修复错误,并使工具更有用!请参见贡献入门。