Lighthouse 8.4 的新功能

Brendan Kenny

Lighthouse 是一款自动化网站审核工具，可帮助开发者利用机会和诊断信息来改善网站的用户体验。它在 Chrome 开发者工具、npm（作为 Node 模块和 CLI）或浏览器扩展程序（在 Chrome 和 Firefox 中）中提供。Google 为许多 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。