Lighthouse 是一款网站审核工具,可为开发者提供优化建议和诊断信息,帮助他们改善网站的用户体验。
Lighthouse 10 可立即在通过 npm 的命令行和 Chrome Canary 版中推出。此版本将在 Chrome 112 版 Chrome 稳定版中推出,并将在未来几周内推出 PageSpeed Insights。
得分方面的变化
Lighthouse 10 即将移除重要的可交互时间 (TTI) 指标,从而结束 Lighthouse 8 中启动的弃用流程。TTI 为 10% 的得分权重正在转变为累计布局偏移 (CLS),后者现在将占总体性能得分的 25%。
TTI 用于标记一个时间点,但其定义方式使其对离群网络请求和冗长任务过于敏感。与活动网络请求计数相比,Largest Contentful Paint (LCP) 和速度指数通常更适合用于判断网页内容加载情况。与此同时,总阻塞时间 (TBT) 可以更稳健地处理耗时较长的任务和主线程可用性。虽然它不是直接代理,但与实际测得的核心网页指标更相关。
CLS 权重的增加是 TTI 移除的一个附带因素,但更好地反映了其作为 Core Web Vitals 的重要性,并且理想情况下,对于仍进行不必要布局偏移的网站,这一权重将会增加。
我们预计这样做会提高大多数网页的性能得分,因为大多数网页的 CLS 得分往往高于 TTI。在对最近一次运行 HTTP Archive 中的 1300 万个网页进行分析后,其中 90% 的网页的 Lighthouse 性能得分会有所提升,其中 50% 的网页的性能提升超过 5 分。
![Lighthouse 评分量表,按构成总得分的指标(FCP、SI、LCP、TBT 和 CLS)细分](https://developer.chrome.google.cn/static/blog/lighthouse-10-0/image/a-lighthouse-score-gauge-af1b4e727c113.png?authuser=5&hl=fi)
如果出于某种原因,您仍然需要 Lighthouse TTI 值(例如在 CI 断言中),该值在 Lighthouse JSON 输出中仍然可用,只是得分权重为 0,在 HTML 报告中隐藏。对 JSON 值的任何脚本化访问都应继续正常发挥作用,无需进行任何更改。
新审核
Lighthouse 10 引入了全新的性能审核功能,并对另一项功能进行了重大更改。
往返缓存
往返缓存 (bfcache) 是用于为真实用户提升网页性能的最强大工具之一。除了常规的浏览器缓存之外,从 bfcache 加载的网页几乎可以即时恢复网页布局和执行状态,在很大程度上跳过所有网页加载活动,在用户向后和向前浏览其历史记录时立即将您的网页呈现在用户面前。
不过,网页可以通过多种方式阻止浏览器从 bfcache 恢复网页。这项新的 Lighthouse 审核实际上会先离开测试页面,然后再返回以测试它是否 bfcache-able,并在失败时列出原因。
![bfcache 审核的结果示例,其中列出了由于 IndexDB 连接打开而导致失败,并在页面中卸载处理程序](https://developer.chrome.google.cn/static/blog/lighthouse-10-0/image/an-example-result-the-bf-5819bf7710451.png?authuser=5&hl=fi)
如需了解详情,请参阅 bfcache 审核的文档。
阻止粘贴的输入内容
原来的最佳实践审核“允许用户向密码字段中粘贴内容”进行了扩展,现在,可以检查能否将内容粘贴到任何(非只读)输入字段中。对于大多数网站来说,阻止粘贴操作会严重影响用户体验,并妨碍合法的安全和无障碍工作流。
新审核现为“允许用户将内容粘贴到输入字段中”(paste-preventing-inputs
)。
节点用户
如果您使用 Lighthouse 作为 Node 库,您可能需要考虑此版本中的一些重大程序化更改。如需了解完整详情,请参阅 10.0 更新日志。
Lighthouse 10 还附带了完整的 TypeScript 类型声明!现在,应该对从 lighthouse
导入的所有内容进行输入,这在您为 Lighthouse 用户流编写脚本时尤为有用。
![将 Lighthouse 作为函数导入的 Node 脚本,用于演示传入该函数的选项对象现在已由 TypeScript 进行类型检查](https://developer.chrome.google.cn/static/blog/lighthouse-10-0/image/a-node-script-importing-l-94bd6d132bf88.png?authuser=5&hl=fi)
请尝试这些类型,如果您在使用它们时遇到任何问题,请告知我们。
正在运行 Lighthouse
Lighthouse 可在 Chrome 开发者工具、npm(作为 Node 模块和 CLI 工具)以及浏览器扩展程序(Chrome 和 Firefox)中使用。它还支持多项 Google 服务,包括 PageSpeed Insights。
如需试用 Lighthouse Node CLI,请使用以下命令:
npm install -g lighthouse
lighthouse https://www.example.com --view
与 Lighthouse 团队联系
如需讨论新功能、Lighthouse 10 版本中的变更或任何其他与 Lighthouse 相关的讨论,请执行以下操作:
- 在 Lighthouse GitHub 问题跟踪器中报告问题或提交反馈。
- 在 Lighthouse GitHub 论坛中提问。
- 请在 Twitter 上与 Lighthouse 团队联系:@____lighthouse。