Lighthouse 8.4 的新功能

Brendan Kenny

Lighthouse 是一款自动化的网站审核工具，可为开发者提供优化建议和诊断信息，帮助他们改善网站的用户体验。您可以通过 Chrome 开发者工具、npm（作为 Node 模块和 CLI）或浏览器扩展程序（在 Chrome 和 Firefox 中）使用该工具。它支持许多 Google 服务，包括 web.dev/measure 和 PageSpeed Insights。

Lighthouse 8.4 可立即在命令行和 Chrome Canary 中推出。 该版本将在 Chrome 95 中登陆 Chrome 稳定版，并在一周内为 PageSpeed Insights 提供。

如需试用 Lighthouse Node CLI，请使用以下命令：

npm install -g lighthouse
lighthouse https://www.example.com --view

如需查看完整的更改列表，请参阅 8.4 更新日志。

新审核

不要延迟加载 Largest Contentful Paint 图片

通过延迟加载图片，您可以有效地延迟屏幕外图片，以免干扰首屏内容的加载。

不过，如果网页的 LCP 元素是图片，则延迟加载该元素可能会对 LCP 造成显著负面影响。浏览器可能会将图片放入队列中并先提取其他资源，而不是优先下载图片。最近一项关于 WordPress 延迟加载的研究发现，如果不延迟加载初始视口中的图片，某些网站的 LCP 有望提高多达 15%。

Lighthouse 现在将检测 LCP 元素是否为延迟加载的图片，并建议从中移除 loading 属性。

如需了解详情，请参阅初始提案和实现拉取请求。

设置移动设备视口可缩短 First Input Delay

多年来，viewport 审核一直是最佳实践类别的一部分，但 8.4 也欢迎这些建议也纳入“效果”类别。

许多移动浏览器都支持“点按两次即可缩放”，以便用户轻松放大并非专为移动设备屏幕设计的内容，即没有明确移动 <meta name="viewport"> 的内容。在实践中，这意味着在用户点按后，浏览器需要等待长达 300 毫秒的时间来确定是否会发生第二次点按操作，在这段时间内，网页无法响应第一次点按操作。这表示数百毫秒的失败 FID。

最近一项针对 HTTP Archive 数据的研究显示，在 Lighthouse 中获得 90 分或更高得分但至少未能通过一项 Core Web Vitals 指标的网站中，有超过一半的网站没有设置移动设备视口，并且未通过 FID。因此，如果找不到视口，Lighthouse 性能部分现在会建议添加如下视口：

<meta name="viewport" content="width=device-width">

如需了解详情，请参阅提案问题和实现拉取请求。

与 Lighthouse 团队联系

如需讨论新功能、版本 8.4 中的变更或任何其他与 Lighthouse 相关的讨论，请执行以下操作：

• 通过 Lighthouse GitHub 代码库报告问题或提交反馈。
• 请在 Twitter 上与 Lighthouse 团队联系：@____lighthouse。