Lighthouse 是一款网站审核工具,可为开发者提供机会和诊断信息,以改善其网站的用户体验。
Lighthouse 10 可立即在通过 npm 的命令行中使用,也可在 Chrome Canary 中使用。未来几周内,Chrome 112 和 PageSpeed Insights 将纳入 Chrome 稳定版和 PageSpeed Insights。
得分变化
我们即将在 Lighthouse 10 中移除备受推崇的可交互时间 (TTI) 指标,从而结束从 Lighthouse 8 开始的弃用流程。TTI 的 10% 得分权重将转移到 Cumulative Layout Shift (CLS),后者现在将占整体性能得分的 25%。
TTI 用于标记时间点,但其定义方式使其对离群网络请求和冗长任务过于敏感。与有效网络请求数量相比,Largest Contentful Paint (LCP) 和 Speed Index 通常更适合用来让人感觉网页内容已加载的启发法。与此同时,总阻塞时间 (TBT) 可以更稳健地处理耗时较长的任务和主线程可用性,而且尽管它不是直接代理,它往往与实测数据中核心网页指标的相关性更高。
CLS 的权重增加对于 TTI 被移除是附带的,但更好地体现了它作为核心 Web 指标的重要性,并且在理想情况下,可以提高对仍然进行不必要布局偏移的网站的关注。
我们希望这项改进能够改善大多数网页的性能得分,因为大多数网页在 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=7&hl=ro)
如果由于某种原因,您仍然需要 Lighthouse TTI 值(例如,在 CI 断言中),则该值在 Lighthouse JSON 输出中仍然可用,但未更改,只是得分权重为 0 并在 HTML 报告中隐藏。对 JSON 值的任何脚本化访问都应继续进行,不会发生任何变化。
新审核
Lighthouse 10 引入了一项全新的性能评估,并对另一项性能评估进行了重大更改。
往返缓存
往返缓存 (bfcache) 是用于为真实用户提高网页性能的最强大工具之一。除了正常的浏览器缓存之外,从 bfcache 加载的网页几乎会立即恢复网页布局和执行状态,这在很大程度上跳过了所有网页加载活动,在用户向后/向前浏览历史记录时立即将您的网页呈现在他们面前。
不过,网页可以通过多种方式阻止浏览器从 bfcache 恢复网页。这项新的 Lighthouse 审核实际上会离开测试页面,然后再次返回以测试它是否可缓存,并在失败时列出原因。
![bfcache 审核的结果示例,列出了由于打开的 IndexDB 连接导致的失败,并卸载了页面中的处理程序](https://developer.chrome.google.cn/static/blog/lighthouse-10-0/image/an-example-result-the-bf-5819bf7710451.png?authuser=7&hl=ro)
如需了解详情,请查看 bfcache 审核的文档。
禁止粘贴输入内容
旧版最佳实践审核“允许用户粘贴到密码字段”现已经过扩展,现在可检查能否将内容粘贴到任何(非只读)输入字段。对于大多数网站来说,阻止粘贴会给用户体验造成负面影响,并妨碍合法的安全和无障碍工作流程。
新的审核现在为“允许用户粘贴至输入字段”(paste-preventing-inputs
)。
节点用户
如果您使用 Lighthouse 作为 Node 库,则可能需要考虑此版本中的一些程序化破坏性更改。如需了解完整详情,请参阅 10.0 更新日志。
Lighthouse 10 还附带了完整的 TypeScript 类型声明!现在,从 lighthouse
导入的任何内容都应具有类型化,如果您正在为 Lighthouse 用户流编写脚本,这将特别有用。
![将 Lighthouse 作为函数导入的 Node 脚本,演示传递到函数的 options 对象现在由 TypeScript 进行类型检查](https://developer.chrome.google.cn/static/blog/lighthouse-10-0/image/a-node-script-importing-l-94bd6d132bf88.png?authuser=7&hl=ro)
请试用这些类型,如果您在使用这些类型时遇到任何问题,请告诉我们。
正在运行的 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。