Lighthouse 6.0 的新功能

新增指标、效果评分更新、新审核等。

Connor Clark
Connor Clark
X GitHub

今天，我们发布了 Lighthouse 6.0！

Lighthouse 是一款自动化网站审核工具，可帮助开发者发现改进网站用户体验的机会和诊断问题。您可以在 Chrome DevTools、npm（作为 Node 模块和 CLI）或浏览器扩展程序（在 Chrome 和 Firefox 中）中使用 Lighthouse。它为许多 Google 服务提供支持，包括 PageSpeed Insights。

Lighthouse 6.0 现已在 npm 和 Chrome Canary 中推出。利用 Lighthouse 的其他 Google 服务将在月底前收到更新。该功能将在 Chrome 84（7 月中旬）的 Chrome 稳定版中推出。

如需试用 Lighthouse Node CLI，请使用以下命令： bash npm install -g lighthouse lighthouse https://www.example.com --view

此版本的 Lighthouse 进行了大量更改，详情请参阅6.0 更新日志。本文将介绍其中的亮点。

新指标

Lighthouse 6.0 指标。

Lighthouse 6.0 在报告中引入了三个新指标。其中两个新指标（Largest Contentful Paint [LCP] 和 Cumulative Layout Shift [CLS]）是核心网页指标的实验室实现。

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 用于衡量感知的加载体验。它标记了网页加载过程中主要内容（或“最大”内容）已加载并可供用户看到的时间点。LCP 是对 First Contentful Paint (FCP) 的重要补充，后者仅捕获加载体验的开头部分。LCP 可向开发者提供有关用户实际能够多快看到网页内容的信号。LCP 得分低于 2.5 秒被视为“良好”。

如需了解详情，请观看 Paul Irish 关于 LCP 的深度解析视频。

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) 用于衡量视觉稳定性。它可以量化网页内容在视觉上发生的偏移量。CLS 得分较低，表明开发者的用户没有遇到过多的内容偏移；CLS 得分低于 0.10 被视为“良好”。

在实验室环境中，CLS 是从网页加载开始到结束衡量的。而在现场，您可以衡量在首次用户互动之前或包括所有用户输入的 CLS。

如需了解详情，请观看 Annie Sullivan 关于 CLS 的深度解析视频。

Total Blocking Time (TBT)

Total Blocking Time (TBT) 用于量化加载响应能力，衡量主线程处于屏蔽状态的时间够长，足以阻止输入响应的总时长。TBT 用于衡量从 First Contentful Paint (FCP) 到可交互时间 (TTI) 之间的总时长。它是 TTI 的配套指标，可让您更精确地量化阻止用户与网页互动的主线程活动。

此外，TBT 与一项 Core Web Vitals 指标“First Input Delay”(FID) 之间存在很强的相关性。

效果得分更新

Lighthouse 中的性能得分是通过对多项指标进行加权混合计算得出的，用于总结网页的速度。下面是 6.0 版效果得分公式。

阶段 指标名称 指标权重
提前 (15%) First Contentful Paint (FCP) 15%
中 (40%) 速度指数 (SI) 15%
Largest Contentful Paint (LCP) 25%
迟到 (15%) 可交互时间 (TTI) 15%
主线程 (25%) Total Blocking Time (TBT) 25%
可预测性 (5%) Cumulative Layout Shift (CLS) 5%

虽然新增了 3 个指标，但也移除了 3 个旧指标：首次有意义的绘制、首次 CPU 空闲和最大潜在 FID。我们修改了其余指标的权重，以突出显示主线程互动性和布局可预测性。

下面是版本 5 的评分，供您参考：

阶段 指标名称 Weight
早期 (23%) First Contentful Paint (FCP) 23%
中 (34%) 速度指数 (SI) 27%
首次有效绘制 (FMP) 7%
已完成（46%） 可交互时间 (TTI) 33%
首次 CPU 空闲时间 (FCI) 13%
主线程 最长的潜在 FID 0%

Lighthouse 评分在版本 5 和 6 之间发生了变化。

Lighthouse 版本 5 和 6 之间的一些评分变更亮点：

  • TTI 权重已从 33% 降低到 15%。这直接回应了用户针对 TTI 可变性以及指标优化导致用户体验改善方面的反馈。TTI 仍然是衡量网页何时完全可互动的有用信号，但在 TBT 的补充下，可减少变异性。通过此次评分机制变更，我们希望更有效地鼓励开发者针对用户互动进行优化。
  • FCP 权重已从 23% 降低到 15%。仅衡量第一个像素绘制时间 (FCP) 并不能让我们全面了解情况。结合衡量用户何时能够看到他们最可能关心的内容 (LCP)，可以更好地反映加载体验。
  • 最长的潜在 FID 已废弃。该维度已不再显示在报告中，但仍可在 JSON 中找到。现在，建议您使用 TBT 来量化互动度，而不是 mpFID。
  • “首次有效绘制时间”已废弃。由于实现因 Chrome 渲染内部而异，因此此指标差异太大，无法实现标准化。虽然有些团队确实发现在其网站上使用 FMP 时间值得，但该指标不会再有进一步改进。
  • 首次 CPU 空闲时间已废弃，因为它与 TTI 没有明显区别。目前，TBT 和 TTI 是衡量互动度的首选指标。
  • CLS 的权重相对较低，但我们预计会在未来的重大版本中提高其权重。

分数的变化

这些更改对真实网站的评分有何影响？我们发布了一份分析，对得分变化进行了分析，其中使用了两个数据集：一组常规网站和一组使用 Eleventy 构建的静态网站。总的来说，约 20% 的网站得分明显提高，约 30% 的网站得分几乎没有变化，约 50% 的网站得分至少下降了 5 分。

得分变化可分为三个主要组成部分：

  • 评分权重变化
  • 修复了底层指标实现存在的 bug
  • 个别得分曲线变化

得分权重值的变化以及引入三个新指标是导致总体得分变化的主要原因。开发者尚未针对的新指标在版本 6 的效果得分中占有重要权重。虽然版本 5 中测试语料库的平均性能得分约为 50，但新版“总屏蔽时间”和“最长内容绘制时间”指标的平均得分约为 30。这两个指标在 Lighthouse 版本 6 的性能得分中占据 50% 的比重，因此，大部分网站的得分自然会下降。

对底层指标计算的 bug 修复可能会导致得分不同。这只会影响相对较少的网站，但在某些情况下可能会产生巨大影响。总体而言，约 8% 的网站因指标植入变更而提高了得分，约 4% 的网站因指标植入变更而降低了得分。约有 88% 的网站不受这些修复的影响。

虽然影响很小，但个别得分曲线的变化也会影响总体得分变化。我们会定期确保得分曲线与 HTTPArchive 数据集中观察到的指标一致。排除受重大实施变更影响的网站，对各个指标的得分曲线进行细微调整后，约 3% 的网站得分有所提高，约 4% 的网站得分有所降低。大约 93% 的网站不受这项变更的影响。

评分计算器

我们发布了评分计算器，以帮助您了解效果评分。该计算器还会比较 Lighthouse 版本 5 和 6 的得分。使用 Lighthouse 6.0 运行审核时，报告中会附带指向已填充结果的计算器的链接。

Lighthouse 得分计算器。
非常感谢 Ana Tudor 升级了仪表板！

新审核

未使用的 JavaScript

我们将在新的审核中利用 DevTools 代码覆盖率：未使用的 JavaScript。

此审核功能并非完全全新：它是在 2017 年年中添加的，但由于存在性能开销，因此默认处于停用状态，以便 Lighthouse 尽可能保持快速运行。现在，收集此覆盖率数据的效率要高得多，因此我们可以放心地默认启用它。

无障碍功能审核

Lighthouse 使用出色的 axe-core 库来为无障碍功能类别提供支持。在 Lighthouse 6.0 中，我们添加了以下审核：

  • aria-hidden-body
  • aria-hidden-focus
  • aria-input-field-name
  • aria-toggle-field-name
  • form-field-multiple-labels
  • heading-order
  • duplicate-id-active
  • duplicate-id-aria

可遮盖式图标

可遮罩的图标是一种新的图标格式，可让您的 PWA 图标在所有类型的设备上看起来都很棒。为帮助您的 PWA 尽可能呈现最佳效果，我们推出了一项新的审核，用于检查您的 manifest.json 是否支持这种新格式。

字符集声明

meta charset 元素用于声明应使用哪种字符编码来解析 HTML 文档。如果缺少此元素，或者在文档中较晚的位置声明此元素，浏览器会采用多种启发法来猜测应使用哪种编码。如果浏览器猜错了，并发现了较晚的 meta charset 元素，解析器通常会舍弃到目前为止所做的所有工作，并从头开始，这会导致用户体验不佳。这项新审核会验证网页是否采用了有效的字符编码，以及是否在早期就已定义。

Lighthouse CI

在 去年 11 月的 CDS 大会上，我们宣布推出 Lighthouse CI，这是一个开源 Node CLI 和服务器，可跟踪持续集成流水线中每个提交的 Lighthouse 结果。自 Alpha 版发布以来，我们已经取得了长足的进步。Lighthouse CI 现在支持多种 CI 提供商，包括 Travis、Circle、GitLab 和 GitHub Actions。可直接部署的 Docker 映像让设置变得轻而易举，经过重新设计的全面信息中心现在会显示 Lighthouse 中每个类别和指标的趋势，以便进行详细分析。

立即按照我们的入门指南，开始在您的项目中使用 Lighthouse CI。

Lighthouse CI。
Lighthouse CI。
Lighthouse CI。

重命名了 Chrome DevTools 面板

我们已将审核面板重命名为 Lighthouse 面板。不用多说了！

该面板可能位于 » 按钮后面，具体取决于您的 DevTools 窗口大小。您可以拖动标签页来更改顺序。

如需使用“命令”菜单快速显示该面板，请执行以下操作：

  1. 按 `Control+Shift+J`（在 Mac 上为 `Command+Option+J`）打开 DevTools。
  2. 按 Control+Shift+P（在 Mac 上，按 Command+Shift+P）打开命令菜单。
  3. 开始输入“Lighthouse”。
  4. 按 Enter 键。

移动设备模拟

Lighthouse 遵循移动优先思维模式。在典型的移动设备条件下，性能问题会更加明显，但开发者通常不会在这些条件下进行测试。因此，Lighthouse 中的默认配置会应用移动设备模拟。该模拟包括：

  • 模拟了慢速网络和 CPU 条件（通过名为 Lantern 的模拟引擎）。
  • 设备屏幕模拟（与 Chrome DevTools 中相同）。

从一开始，Lighthouse 就使用 Nexus 5X 作为参考设备。近年来，大多数性能工程师一直在使用 Moto G4 进行测试。现在，Lighthouse 也将参考设备更改为 Moto G4。在实践中，这项更改并不明显，但网页可以检测到的所有更改如下：

  • 屏幕尺寸从 412x660 像素更改为 360x640 像素。
  • 用户代理字符串略有更改，之前为 Nexus 5 Build/MRA58N 的设备部分现在将变为 Moto G (4)。

从 Chrome 81 开始，Chrome DevTools 设备模拟列表中还新增了 Moto G4。

Chrome DevTools 设备模拟列表，其中包含 Moto G4。

浏览器扩展程序

Lighthouse Chrome 扩展程序一直是本地运行 Lighthouse 的便捷方式。很抱歉，支持起来很复杂。 我们认为，由于 Chrome DevTools Lighthouse 面板的体验更好（报告可与其他面板集成），因此我们可以通过简化 Chrome 扩展程序来降低工程开销。

该扩展程序现在使用 PageSpeed Insights API，而不是在本地运行 Lighthouse。我们知道，这对部分用户来说还不够用。主要区别如下：

  • PageSpeed Insights 无法审核非公开网站，因为它是通过远程服务器（而非您的本地 Chrome 实例）运行的。如果您需要审核非公开网站，请使用 DevTools 的 Lighthouse 面板或 Node CLI。
  • 我们不保证 PageSpeed Insights 会使用最新的 Lighthouse 版本。如果您想使用最新版本，请使用 Node CLI。浏览器扩展程序将在发布后的大约 1-2 周内收到更新。
  • PageSpeed Insights 是一项 Google API，使用它即表示您同意《Google API 服务条款》。如果您不愿意或无法接受服务条款，请使用 DevTools 的 Lighthouse 面板或 Node CLI。

好消息是，简化产品故事后，我们可以专注于其他工程问题。因此，我们发布了 Lighthouse Firefox 扩展程序！

预算

Lighthouse 5.0 引入了性能预算，支持为网页可以提供的每种资源类型的数量（例如脚本、图片或 CSS）添加阈值。

Lighthouse 6.0 增加了对预算指标的支持，因此您现在可以为特定指标（例如 FCP）设置阈值。目前，预算功能仅适用于 Node CLI 和 Lighthouse CI。

指向来源位置的链接

Lighthouse 发现的某些网页问题可以追溯到特定的源代码行，报告中会注明相关的确切文件和行。为了便于在 DevTools 中轻松浏览，点击报告中指定的位置即可在 Sources 面板中打开相关文件。

DevTools 会显示导致问题的确切代码行。

即将推出

Lighthouse 已开始尝试收集源代码映射，以支持新功能，例如：

  • 检测 JavaScript 软件包中的重复模块。
  • 检测发送到现代浏览器的代码中是否存在过多的 polyfill 或转换。
  • 增强了“未使用的 JavaScript”审核功能，以提供模块级粒度。
  • 树状图可视化结果，突出显示需要执行操作的模块。
  • 显示具有“来源位置”的报告项的原始源代码。
未使用的 JavaScript，显示源代码映射中的模块。
“未使用的 JavaScript”审核功能使用源代码映射来显示特定捆绑模块中的未使用代码。

在 Lighthouse 的未来版本中，这些功能将默认启用。目前，您可以使用以下 CLI 标志查看 Lighthouse 的实验性审核：

lighthouse https://web.dev --view --preset experimental

谢谢！

感谢您使用 Lighthouse 并提供反馈。您的反馈有助于我们改进 Lighthouse，我们希望 Lighthouse 6.0 能让您更轻松地提升网站的性能。

接下来您可以做些什么？

  • 打开 Chrome Canary，然后试用 Lighthouse 面板。
  • 使用 Node CLI：npm install -g lighthouse && lighthouse https://yoursite.com --view。
  • 让 Lighthouse CI 与您的项目一起运行。
  • 查看 Lighthouse 审核文档。
  • 祝您在改进网络的过程中收获乐趣！

我们热爱 Web 技术，并乐于与开发者社区合作，打造有助于改进 Web 的工具。Lighthouse 是一个开源项目，我们非常感谢所有贡献者，他们帮助我们解决了从拼写错误修正到文档重构再到全新审核等各种问题。 有意贡献吗？ 欢迎访问 Lighthouse GitHub 代码库。