Lighthouse (翻译)

1,266 阅读9分钟

原文: github.com/GoogleChrom…

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报告中显示这些指标,那么这非常好。
    • 如果您对运行自己的定制审计感兴趣,请查看我们的定制审计示例
  • 我该如何贡献?
    • 我们很乐意帮助编写审计,修复错误,并使工具更有用!请参见贡献入门。