Lighthouse 9.0 的新功能

Brendan Kenny
Brendan Kenny

Lighthouse 是一款网站审核工具,可帮助开发者发掘机会和进行诊断,从而改善网站的用户体验。

Lighthouse 9.0 可立即通过命令行、Chrome CanaryPageSpeed Insights 使用。它将在 Chrome 98 中纳入 Chrome 稳定版。

API 变更

在此版本中,大多数用户应该不会遇到任何破坏工作流程的破坏性更改。如果您运行自定义 Lighthouse 审核或使用依赖于 Lighthouse 报告 JSON 深层详细信息的工具,则可能需要注意 9.0 中的一些破坏性更改。

如需查看完整的更改列表,请参阅 9.0 更新日志

适用于用户流的 Lighthouse

Lighthouse 提供新的用户流 API,可让您在页面生命周期中的任何时间点进行实验室测试。

Puppeteer 用于为网页加载编写脚本并触发合成用户互动,并且可以多种方式调用 Lighthouse,以便在这些互动期间捕获关键的数据分析。也就是说,您可以在网页加载期间和与网页互动期间衡量效果。

Lighthouse 用户流报告,其中包含加载网站并与网站互动的多个步骤,以及每个步骤的 Lighthouse 审核结果

如需了解详情,请参阅 Lighthouse 用户流教程和代码示例

报告刷新

我们更新了 Lighthouse 报告,以提升可读性,使报告的来源及其运行方式更清晰。

我们已在报告顶部嵌入了最终屏幕截图,以一目了然地看出测试网页能否正确加载且采用了预期的格式。

Lighthouse 9.0 报告,以更显眼的方式列出了关键性能指标,并在效果报告中嵌入了页面最终外观的屏幕截图

报告底部的摘要信息也经过重新设计,以便更好地说明 Lighthouse 的运行方式和报告收集方式。

更新了 Lighthouse 报告的设置部分,其中现在包含一些内容的摘要,例如页面捕获时间、使用的网页模拟类型,以及运行测试的 Chrome 版本。

要查看新报告的实际应用,请试用 Lighthouse 9.0 或访问此示例报告

常见的无障碍功能问题是,页面中本应具有唯一性的内容却不一致,例如,aria-labelledby 属性中引用的 ID 用于多个元素

Lighthouse 一直针对这种情况发出警告,但只会列出具有重复 ID 的元素的第一个实例,这往往会造成混淆,因为有些用户会认为它显示了导致出现问题的所有元素。由于 Lighthouse 仅显示一个元素,因此他们会假设这是一个错误,导致单个元素被标记为重复项。

在 Lighthouse 9.0 中,现在会列出共用该 ID 的所有元素:

针对“所有可聚焦元素都必须具有唯一的 `id`”的 Lighthouse 审核,其中会显示两个具有相同 `id` 的元素

这个“相关节点”功能由 axe-core 提供,因此可能也会出现在其他无障碍功能审核中。

如需了解详情,请参阅收集用户报告时遇到的问题实现拉取请求

正在运行的 Lighthouse

Lighthouse 可在 Chrome 开发者工具、npm(作为 Node 模块和 CLI)以及浏览器扩展程序(在 ChromeFirefox 中)中使用。Google 为许多 Google 服务(包括 web.dev/measurePageSpeed Insights)提供支持。

如需试用 Lighthouse Node CLI,请使用以下命令:

npm install -g lighthouse
lighthouse https://www.example.com --view

与 Lighthouse 团队联系

如要讨论新功能、9.0 版本中的更改或与 Lighthouse 相关的任何其他内容,请执行以下操作: