Lighthouse 是一款网站审核工具,可为开发者提供优化建议和诊断信息,帮助他们改善网站的用户体验。
Lighthouse 9.0 可立即在命令行、Chrome Canary 和 PageSpeed Insights 中使用。此版本将在 Chrome 98 的 Chrome 稳定版中推出。
API 变更
在此版本中,大多数用户不应遇到任何破坏工作流程的更改。如果您运行自定义 Lighthouse 审核或使用依赖于 Lighthouse 报告 JSON 中深层详细信息的工具,您可能需要注意 9.0 中的某些重大更改。
如需查看完整的更改列表,请参阅 9.0 更新日志。
用户流的 Lighthouse
Lighthouse 有一个新的用户流 API,它允许在页面生命周期内的任何时间点进行实验室测试。
Puppeteer 用于为页面加载编写脚本并触发合成用户互动,并且可以通过多种方式调用 Lighthouse,以捕获这些互动期间的关键数据洞见。也就是说,您可以在网页加载期间和与网页互动时衡量效果。
如需了解详情,请参阅 Lighthouse 用户流教程和代码示例。
报告刷新
我们更新了 Lighthouse 报告,以提高可读性,并清楚显示报告的来源和运行方式。
我们在报告顶部嵌入了最终的屏幕截图,以便一目了然地看出被测试的网页是否已正确加载,以及是否采用预期格式。
报告底部的摘要信息也经过了重新设计,以便更好地展示 Lighthouse 的运行方式和报告的收集方式。
如需查看新报告的实际效果,请试用 Lighthouse 9.0 或访问此示例报告。
相关的无障碍元素
一个常见的无障碍功能问题是,网页中本应独一无二的内容并非如此,例如,aria-labelledby
属性中引用的 ID 用于多个元素。
Lighthouse 一直在针对这种情况发出警告,但只会列出具有重复 ID 的元素的第一个实例,这通常会导致混淆,因为一些用户会认为它显示的是导致问题的所有元素。由于 Lighthouse 仅显示了一个元素,因此他们会认为该单个元素被标记为重复是错误。
在 Lighthouse 9.0 中,现在会列出共用该 ID 的所有元素:
此“相关节点”功能由 axe-core
提供,因此也可能出现在其他无障碍功能审核中。
如需了解详情,请参阅收集用户报告时遇到问题和实现拉取请求。
正在运行 Lighthouse
Lighthouse 可在 Chrome 开发者工具、npm(作为 Node 模块和 CLI)以及浏览器扩展程序(Chrome 和 Firefox)中使用。它支持许多 Google 服务,包括 web.dev/measure 和 PageSpeed Insights。
如需试用 Lighthouse Node CLI,请使用以下命令:
npm install -g lighthouse
lighthouse https://www.example.com --view
与 Lighthouse 团队联系
如需讨论新功能、9.0 版本中的更改或与 Lighthouse 相关的所有其他事项,请执行以下操作:
- 在 Lighthouse GitHub 问题跟踪器中报告问题或提交反馈。
- 在 Lighthouse GitHub 论坛中提问。
- 请在 Twitter 上与 Lighthouse 团队联系:@____lighthouse。