Lighthouse 6.0 的新功能

新指标、性能得分更新、新审核,等等。

Connor Clark
Connor Clark

今天,我们发布了 Lighthouse 6.0!

Lighthouse 是一款自动化网站审核工具, 可帮助开发者利用机会和诊断信息来改善其网站的用户体验。 它可在 Chrome 开发者工具、npm(作为节点模块和 CLI)或浏览器扩展程序(在 ChromeFirefox)。为许多 Google 服务,包括 web.dev/measurePageSpeed 数据分析

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 为报告引入了三个新指标。其中两个新指标 Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS) - 是 Core Web 的实验室实现 Android Vitals

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) 衡量的是感知加载的大小 体验它标记了页面加载期间主要内容(即“最大”内容)已加载完毕的时间点, 对相应用户可见LCP 是对 First Contentful Paint (FCP) 的重要补充,FCP 仅 捕获加载过程的起始点。LCP 可向开发者表明 用户很快就能看到网页内容了LCP 得分低于 2.5 秒 视为“良好”

如需了解详情,请观看这个对 LCP 的深入探究(作者:Paul Ireland)。

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) 用于衡量视觉稳定性。它 量化了网页内容的视觉偏移量。CLS 得分较低表示 开发者确认其用户没有遇到内容不当转移;CLS 得分低于 0.10 表示 视为“良好”

实验室环境中的 CLS 是从网页加载结束开始衡量的。而在此字段中 衡量 CLS(直到首次用户互动或包括所有用户输入内容)。

如需了解详情,请观看 Annie Sullivan 对 CLS 的深入探究

Total Blocking Time (TBT)

总阻塞时间 (TBT) 可量化负载响应能力, 主线程处于阻塞时间长到足以阻止输入响应的总时间。 TBT 用于衡量从 First Contentful Paint (FCP) 到可交互时间之间的总时长 (TTI)。它是 TTI 的配套指标,可为量化主线程活动带来更多细微差别 阻止用户与您的网页互动

此外,TBT 与字段指标 First Input Delay 密切相关 (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%

虽然添加了三个新指标,但移除了三个旧指标:首次有效绘制指标、 首次 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) 能更好地反映加载体验。
  • Max Potential FID 已被弃用。它不会再显示在报告中,但会 。现在,建议你查看 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 进行审核时,报告中会附带一个指向计算器的链接 填充了结果

<ph type="x-smartling-placeholder">
</ph> Lighthouse 得分计算器。
非常感谢Ana Tudor 的水位升级!

新审核

未使用的 JavaScript

我们正在利用 DevTools 代码 覆盖率未使用 JavaScript

此项审核并不是完全新的,而是添加到 2017 年年中,但 由于性能开销,它默认处于停用状态,以使 Lighthouse 保持尽可能快的速度 现在,收集这些覆盖率数据的效率提高了许多,因此,启用 默认情况。

无障碍功能审核

Lighthouse 使用出色的 axe-core 库为 无障碍功能类别。在 Lighthouse 6.0 中,我们添加了以下审核:

“可遮罩”图标

可遮盖图标是一种新的图标格式,可为您的 PWA 制作图标 都能在各类设备上完美呈现为了让 PWA 呈现尽可能好的视觉效果,我们推出了 一项新的审核,以检查您的 manifest.json 是否支持此新格式。

字符集声明

元字符集元素用于声明应该使用哪种字符编码 来解释 HTML 文档。如果此元素缺失,或是在 文档,浏览器会采用多种启发法来推测应该使用哪个编码。如果 浏览器猜测错误,且发现了延迟的元字符集元素,则解析器通常会抛出 用户完成的所有工作又一再重来,从而导致糟糕的用户体验。这种新的 审核结果旨在确认网页是否使用有效的字符编码,且字符编码已预先设定。

Lighthouse CI

去年 11 月的 CDS 上 我们宣布了开源 Node.js Lighthouse CI 用于跟踪持续集成中每次提交中的 Lighthouse 结果的 CLI 和服务器 自 alpha 版发布以来,我们已经取得了长足的进展。Lighthouse CI 现已支持 适用于众多 CI 提供商,包括 Travis、Circle、GitLab 和 GitHub Actions。可部署 docker images 将设置 现在,您可以通过重新设计的综合信息中心了解各个类别和指标的趋势 进行详细分析。

请遵循我们的 入门指南

Lighthouse CI。
Lighthouse CI。
Lighthouse CI。

已重命名 Chrome 开发者工具面板

我们已将 Audits 面板重命名为 Lighthouse 面板。别再说了!

根据开发者工具窗口大小,该面板可能位于 » 按钮之后。您可以拖动 按 Tab 键即可更改顺序。

要使用 Command 菜单

  1. 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。
  2. Control+Shift+P(在 Mac 上,按 Command+Shift+P)即可 打开命令菜单。
  3. 开始输入“Lighthouse”。
  4. Enter 键。

移动设备模拟

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 开发者工具设备模拟列表中提供。

Chrome 开发者工具设备模拟列表(包含 Moto G4)。

浏览器扩展程序

通过 Lighthouse 的 Chrome 扩展程序 已经成为在本地运行 Lighthouse 的便捷方式。遗憾的是,要实现这一点并非易事。 我们之所以觉得 Chrome 开发者工具 Lighthouse 面板的使用体验更出色( 与其他面板集成),那么我们就可以通过简化 Chrome 浏览器来减少工程开销, 。

该扩展程序现在使用 PageSpeed Insights,而不是在本地运行 Lighthouse API。我们知道 不足以替代某些用户。主要区别如下:

  • PageSpeed Insights 无法审核非公开网站,因为它是通过远程 而不是本地 Chrome 实例。如果您需要审核非公开网站,请使用 在开发者工具的 Lighthouse 面板或节点 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)设置阈值目前,预算选项仅适用于 。

来源位置链接

Lighthouse 发现的关于某个网页的一些问题可以追溯到 并且报告会说明确切的相关文件和行。为了让 点击报告中指定的位置即可打开相关文件 在来源面板中查看相关信息。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
DevTools 会显示导致问题的确切代码行。

即将揭晓

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

  • 检测 JavaScript 软件包中的重复模块。
  • 检测发送到现代浏览器的代码中过多的 polyfill 或转换。
  • 增强了“未使用的 JavaScript”审核,以提供模块级别的粒度。
  • 树状图可视化图表,突出显示了需要执行操作的模块。
  • 显示包含“source location”的报告项的原始源代码。
。 <ph type="x-smartling-placeholder">
</ph> 显示源代码映射中的模块的未使用 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 审核文档
  • 尽情享受打造更好的网络体验吧!

我们热爱网络,喜欢与开发者社区合作打造各种工具, 帮助改进网络Lighthouse 是一个开源项目,非常感谢 帮助完成从拼写错误、文档重构到全新的 审核。 有兴趣贡献内容? 即刻浏览 Lighthouse GitHub 代码库