Lighthouse 是一个开源的网站自动化测量工具,用于提高 Web 应用的性能,从而帮助开发者改善网站的用户体验。
Lighthouse 10 可立即通过 npm 命令,以及在最新的 Chrome Canary 中使用。它将在未来几周内登陆 Chrome 112 稳定版和 PageSpeed Insights。
计分变化
在 Lighthouse 10 中,Time To Interactive(TTI)指标将被移除,从而结束了从 Lighthouse 8 开始的弃用过程。TTI 的 10% 分数权重将转移到 Cumulative Layout Shift(CLS),现在后者将占整体性能得分的 25%。
CLS 增加的权重是 TTI 被删除的附带结果,但前者可以更好地反映了它作为 Core Web Vital 的重要性,并且理想情况下会增加对仍然进行不必要的布局变化的网站的关注。
这一变化能改善大多数网页的性能得分,因为大多数网页在 CLS 上的得分往往比 TTI 好。在对最新的 HTTP Archive 运行中的 1300 万个页面加载的分析中,其中 90% 的页面的 Lighthouse 性能得分将得到改善,其中 50% 的页面的性能改善超过 5 分。
如果出于某种原因,你仍然需要 Lighthouse 的 TTI 值,开发者依然可以在 Lighthouse 的 JSON 输出中得到,只是分数权重为 0,并隐藏在 HTML 报告中。
新的审计
Lighthouse 10 带来了一个全新的性能审计,并对另一个审计做出了重大改变。
Back/forward 缓存
Back/forward 缓存(bfcache)是为真实用户提高页面性能的最强大工具之一。除了正常的浏览器缓存之外,从 bfcache 加载的页面几乎可以立即恢复页面布局和执行状态,在很大程度上跳过了所有的页面加载活动,当用户在历史记录中向前和向后浏览时,你的页面可以立即出现在面前。
在没有 bfcache 的情况下,用户在网站内来回导航时需要第二次下载网页,从而导致加载时间变慢。启用 bfcache 会为站点访问者带来即时加载体验。
这个新的 Lighthouse 审计实际上是通过导航离开测试页面,然后再返回来测试它是否可以进行 bfcache,如果失败的话,还会列出原因。
Paste-preventing inputs
旧的审计 Allows users to paste into password fields(允许用户粘贴到密码字段)已被扩展到现在检查粘贴到任何(非只读)输入字段是否有效。
早期版本的 Lighthouse 仅测试是否允许用户将密码粘贴到密码表单字段,而最新版本 Lighthouse 10 通过扩大其范围以测试粘贴到任何输入字段(只读字段除外)是否正常运行来增强此审计。
新的审计现在是 Allows users to paste into input fields(允许用户粘贴到输入字段)(paste-preventing-inputs
)
Node 用户
如果你将 Lighthouse 作为一个 Node 库使用,在这个版本中有一些程序上的突破性变化,可能需要加以说明:
- 不再支持 Node 14,现在最低支持 Node 16。
- 如果你在 lighthouse 节点包内导入路径:
lighthouse-core/
和lighthouse-cli/
文件夹现在简化为core/
和cli/
。 - 从 CommonJS 转换为 ES 模块。你仍然可以通过使用动态导入的方式在 CommonJS 中使用 lighthouse:
await import('lighthouse')
。如果要在 CommonJS 中只访问lighthouse
函数,你也可以使用require('lighthouse/core/index.cjs')
- Lighthouse 的 CSV 输出现在更有用了
LHError
现在变成了LighthouseError
。如果你试图捕捉 Lighthouse 抛出的错误,一定要考虑到这一点。
Lighthouse 10 还提供了完整的 TypeScript 类型声明。从 lighthouse
导入的任何东西现在都应该是类型化的,如果你在编写 Lighthouse user flows 的脚本,这应该是特别有用的。
更多详情可查看:https://github.com/GoogleChrome/lighthouse/releases/tag/v10.0.0
还没有评论,来说两句吧...