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 的所有元素:

Lighthouse 针对“所有可聚焦元素必须具有唯一的‘id’”的审查,显示了两个具有相同 `id` 的元素

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

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

正在运行 Lighthouse

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

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

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

与 Lighthouse 团队联系

如需讨论新功能、9.0 版本中的更改或与 Lighthouse 相关的所有其他事项,请执行以下操作: