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 TTI 值(例如,在 CI 断言中),则该值在 Lighthouse JSON 输出中仍然可用,但未更改,只是得分权重为 0 并在 HTML 报告中隐藏。对 JSON 值的任何脚本化访问都应继续进行,不会发生任何变化。
新审核
Lighthouse 10 引入了一项全新的性能评估,并对另一项性能评估进行了重大更改。
往返缓存
往返缓存 (bfcache) 是用于为真实用户提高网页性能的最强大工具之一。除了正常的浏览器缓存之外,从 bfcache 加载的网页几乎会立即恢复网页布局和执行状态,这在很大程度上跳过了所有网页加载活动,在用户向后/向前浏览历史记录时立即将您的网页呈现在他们面前。
不过,网页可以通过多种方式阻止浏览器从 bfcache 恢复网页。这项新的 Lighthouse 审核实际上会离开测试页面,然后再次返回以测试它是否可缓存,并在失败时列出原因。
如需了解详情,请查看 bfcache 审核的文档。
禁止粘贴输入内容
旧版最佳实践审核“允许用户粘贴到密码字段”现已经过扩展,现在可检查能否将内容粘贴到任何(非只读)输入字段。对于大多数网站来说,阻止粘贴会给用户体验造成负面影响,并妨碍合法的安全和无障碍工作流程。
新的审核现在为“允许用户粘贴至输入字段”(paste-preventing-inputs
)。
节点用户
如果您使用 Lighthouse 作为 Node 库,则可能需要考虑此版本中的一些程序化破坏性更改。如需了解完整详情,请参阅 10.0 更新日志。
Lighthouse 10 还附带了完整的 TypeScript 类型声明!现在,从 lighthouse
导入的任何内容都应具有类型化,如果您正在为 Lighthouse 用户流编写脚本,这将特别有用。
请试用这些类型,如果您在使用这些类型时遇到任何问题,请告诉我们。
正在运行的 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。