新指标、性能得分更新、新审核等等。
今天，我们发布了 Lighthouse 6.0！
Lighthouse 是一种自动化网站审核工具，可帮助开发者发现机会和诊断信息，以改善其网站的用户体验。您可以通过 Chrome 开发者工具、npm（作为 Node 模块和 CLI）或浏览器扩展程序（在 Chrome 和 Firefox 中）使用该工具。它为许多 Google 服务（包括 web.dev/measure 和 PageSpeed Insights）提供支持。
Lighthouse 6.0 从 npm 和 Chrome Canary 中立即可用。其他利用 Lighthouse 的 Google 服务将于月底前收到更新。此版本将于 7 月中旬在 Chrome 84 中登陆 Chrome 稳定版。
如需试用 Lighthouse Node CLI，请使用以下命令：
bash
npm install -g lighthouse
lighthouse https://www.example.com --view
此版本的 Lighthouse 包含大量的变更，6.0 变更日志中列出了这些变更。我们将在本文中介绍主要要点。
新指标
Lighthouse 6.0 在报告中引入了三个新指标。其中两个新指标是 Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS)，它们都是 Core Web Vitals 的实验室实现方案。
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) 用于衡量用户感知的加载体验。它用于标记网页加载期间主要或“最大”内容已加载且对用户可见的时间点。LCP 是对 First Contentful Paint (FCP) 的重要补充，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)
总阻塞时间 (TBT) 量化了加载响应能力，用于衡量主线程处于阻塞状态的时间（足以避免输入响应能力）的总时长。TBT 测量的是首次内容绘制 (FCP) 和可交互时间 (TTI) 之间的总时间。它是 TTI 的一个配套指标，能够为阻止用户与网页互动的主线程活动提供更细致的量化。
此外，TBT 与字段指标 First Input Delay (FID) 非常相关，FID 是 Core Web Vitals 指标。
性能得分更新
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 之间在评分方面有一些变化的一些重要变化：
- TTI 的权重已从 33% 降低至 15%。这是直接响应有关 TTI 变异性的用户反馈，以及指标优化的不一致问题，从而改善了用户体验。TTI 在网页完全可交互时仍然是有用的信号，但以 TBT 作为补充，可降低可变性。通过此次评分变更，我们希望能够更有效地鼓励开发者优化用户互动。
- FCP 的权重已从 23% 降低至 15%。仅在第一个像素绘制完成 (FCP) 时进行测量并不能为我们提供全面的信息。将该指标与衡量用户何时能够看到他们最有可能关注的内容 (LCP) 结合起来使用，可以更好地反映加载体验。
- Max Potential FID 已被弃用。报告中不再显示，但仍显示在 JSON 中。现在，建议根据 TBT 而不是 mpFID 来量化互动性。
- “首次有效渲染时间”功能已废弃。该指标过于多变，没有可行的标准化路径，因为其实现特定于 Chrome 渲染内部机制。虽然有些团队确实认为在其网站上采用 FMP 时间是值得的，但该指标不会获得额外的改进。
- 首次 CPU 闲置时间已废弃，因为它与 TTI 的区别不够大。TBT 和 TTI 现在是互动的首选指标。
- CLS 的权重相对较低，但我们预计在未来的主要版本中会提高该权重。
分数变化
这些变化对真实网站的得分有何影响？我们使用两个数据集发布了得分变化的分析：一组常规网站和一组使用 Eleventy 构建的静态网站。总而言之，大约 20% 的网站的得分明显更高，大约 30% 的网站几乎没有任何变化，大约 50% 的网站至少降低了 5 个点。
得分变化可分为三个主要组成部分：
- 分数体重变化
- 修复了底层指标实现的 bug
- 各项分数曲线的变化
大多数总体得分变化都是由得分权重变化和三个新指标的引入导致的。开发者尚未进行优化的新指标在版本 6 性能得分中具有显著的权重。虽然版本 5 中测试语料库的平均性能得分约为 50，但新的 Total Blocking Time 和 Largest Contentful Paint 指标的平均得分约为 30。这两个指标加起来占 Lighthouse 版本 6 性能得分中权重的 50%，因此，很大一部分网站的效果自然是下降的。
对底层指标计算的 bug 修复可能会导致不同的得分。这会影响相对较少的网站，但在某些情况下可能会产生相当大的影响。总体而言，约 8% 的网站因指标实现变化而获得了提升，约 4% 的网站因指标实现变化而得分下降。大约 88% 的网站未受到这些修复的影响。
个别得分曲线的变化也影响了总体得分的变化，只是略微发生变化。我们会定期确保得分曲线与 HTTPArchive 数据集中观察到的指标一致。在排除受重大实施变化影响的网站后，对各个指标的得分曲线进行了小幅调整后，网站得分提高了约 3%，降低了约 4% 的网站。大约 93% 的网站未受到此次变更的影响。
得分计算器
我们发布了评分计算器来帮助您探索性能评分。该计算器还可以比较 Lighthouse 版本 5 和 6 的得分。当您使用 Lighthouse 6.0 运行审核时，报告会提供一个指向计算器的链接，其中会填充您的结果。
新审核
未使用的 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
- 重复 ID：
“可遮盖式”图标
可遮盖式图标是一种新的图标格式，可让 PWA 的图标在所有类型的设备上呈现出色效果。为了使您的 PWA 尽可能好看，我们推出了一项新的审核，用于检查您的 manifest.json 是否支持这种新格式。
字符集声明
meta charset 元素声明在解释 HTML 文档时应使用哪种字符编码。如果此元素缺失，或者在文档后期声明了该元素，浏览器会采用多种启发法来猜测应使用哪种编码。如果浏览器猜测不正确，并发现了延迟的元字符集元素，解析器通常会舍弃到目前为止完成的所有工作并重新开始，从而导致用户体验不佳。这项新的审核可验证页面是否包含有效的字符编码，以及是否提前定义并预先定义。
Lighthouse CI
在 去年 11 月的 CDS 大会上，我们宣布推出 Lighthouse CI，这是一个开源 Node CLI 和服务器，可跟踪持续集成流水线中每次提交的 Lighthouse 结果。自 Alpha 版发布以来，我们取得了长足的进步。Lighthouse CI 现在支持众多 CI 提供商，包括 Travis、Circle、GitLab 和 GitHub Actions。利用可部署的 Docker 映像，您可以轻而易举地进行设置；现在，全面重新设计的信息中心可显示 Lighthouse 中每个类别和指标的趋势，以进行详细分析。
按照我们的入门指南，立即开始在您的项目中使用 Lighthouse CI。
已重命名 Chrome DevTools 面板
我们已将 Audits 面板重命名为 Lighthouse 面板。就这样吧！
此面板可能位于 » 按钮后面，具体取决于您的开发者工具窗口大小。您可以拖动该标签页以更改顺序。
如需使用命令菜单快速显示该面板，请执行以下操作：
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 按
Control+Shift+P（在 Mac 上，按Command+Shift+P）打开 Command 菜单。 - 开始输入“Lighthouse”。
- 按
Enter键。
移动设备模拟
Lighthouse 秉承移动优先的思维模式。在典型的移动条件下，性能问题更明显，但开发者通常不会在此类条件下进行测试。因此，Lighthouse 中的默认配置会应用移动模拟。模拟包括：
- 模拟慢网络和 CPU 条件（通过名为 Lantern 的模拟引擎）。
- 设备屏幕模拟（与 Chrome 开发者工具中的相同）。
Lighthouse 从一开始就将 Nexus 5X 作为其参照设备。近年来，大多数性能工程师都使用 Moto G4 进行测试。现在，Lighthouse 也紧随其后，已将其参照设备更改为 Moto G4。实际上，这种变化并不明显，但网页可检测到的所有变化如下：
- 屏幕尺寸从 412x660 像素更改为 360x640 像素。
- 用户代理字符串略有不同，以前
Nexus 5 Build/MRA58N的设备部分现在变为Moto G (4)。
从 Chrome 81 开始，Moto G4 也会显示在 Chrome DevTools 设备模拟列表中。
浏览器扩展程序
适用于 Lighthouse 的 Chrome 扩展程序是一种在本地运行 Lighthouse 的便捷方式。遗憾的是，提供支持很复杂。 我们认为，由于使用 Chrome 开发者工具 Lighthouse 面板可以提供更好的体验（报告可与其他面板集成），因此我们可以通过简化 Chrome 扩展程序来减少工程开销。
该扩展程序现在使用的是 PageSpeed Insights API，而非在本地运行 Lighthouse。我们认识到，这不足以取代部分用户。主要区别如下：
- PageSpeed Insights 无法审核非公开网站，因为它是通过远程服务器而非本地 Chrome 实例运行的。如果您需要审核非公开网站，请使用开发者工具 Lighthouse 面板或 Node CLI。
- PageSpeed Insights 不一定会使用最新的 Lighthouse 版本。如果要使用最新版本，请使用 Node CLI。该浏览器扩展程序将在发布大约 1 到 2 周后进行更新。
- PageSpeed Insights 是一款 Google API，使用它即表示接受 Google API 服务条款。如果您不想或无法接受服务条款，请使用开发者工具 Lighthouse 面板或 Node CLI。
好消息是，通过简化产品故事，我们得以专注于其他工程问题。因此，我们发布了 Lighthouse Firefox 扩展程序！
预算
Lighthouse 5.0 引入了性能预算，它支持为网页可以传送每种资源类型（例如脚本、图片或 css）的数量添加阈值。
Lighthouse 6.0 增加了对预算指标的支持，因此您现在可以为特定指标（如 FCP）设置阈值。目前，预算仅适用于 Node CLI 和 Lighthouse CI。
来源位置链接
Lighthouse 发现的网页问题可以追溯到特定的源代码行，并且报告会说明确切的相关文件和行。为便于在开发者工具中探索这一点，点击报告中指定的位置将在 Sources 面板中打开相关文件。
地平线
Lighthouse 已开始尝试收集源映射，以便为新功能提供支持，例如：
- 检测 JavaScript 软件包中的重复模块。
- 在发送到现代浏览器的代码中检测过多的 polyfill 或转换。
- 增强“未使用的 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 审核文档。
- 尽情享受让网络变得更美好的乐趣吧！
我们热衷于网络，乐于与开发者社区合作打造工具，帮助改进网络。Lighthouse 是一个开源项目，我们非常感谢所有贡献者，感谢他们帮助解决各种问题，包括拼写错误、重构文档以及进行全新审核。有兴趣贡献内容吗？ 浏览 Lighthouse GitHub 代码库。