PagespeedInsights 即使在延迟加载图像时也会显示延迟屏幕外图像？

Answer 1

如果此代码片段直接来自服务器端渲染的 HTML，则

src

属性值和

data-src

属性是相同的。

这意味着浏览器将立即开始获取

src

资源： https://www.healinghandsclinic.co.in/images/successfull-stories/australian-Patient.jpg

如果该图像在视口内不可见（如 Lighthouse 使用的），它最终仍将与其他（图像和非图像）资源竞争带宽。

因此 PageSpeed Insights (PSI)/Lighthouse 建议推迟屏幕外图像。

但是，考虑到图像元素上使用的 CSS 类 (

class="img-responsive lazyloaded"

)，您共享的代码片段实际上可能是某些延迟加载 JS 库加载图像后的最终结果。

与上面相同的理论仍然适用：初始后备图像（可能只是图像的低质量版本或 1x1 占位符）可能最终被下载，这是 PSI 发现的。

如果没有其他信息，很难说哪张图片最初是由 PSI 发现的。

解决方案

无论您的情况如何，这里都有一个两步最佳实践和解决方案：

• 删除你的 JS 延迟加载库；
• 然后使用本机延迟加载（这仅意味着向您的

  loading="lazy"

  添加

  <img>

  属性）；
• 将 CSS bg 图像（如果有的话）更改为

  <img>

  可能会很方便，因为这会给你更多的加载选项/控制

由于使用本机延迟加载允许您删除 JavaScript，因此它将提高您的 JS 性能以及 TBT（实验室数据/Lighthouse 指标）和 INP（现场数据/Core Web Vitals 的一部分）！

资源

这是一篇关于 JS 库的旧 Google 文章： https://web.dev/articles/lazy-loading-images

但是使用本机延迟加载，我们不再需要 JS（关于此主题的新 Google 文章）： https://web.dev/articles/browser-level-image-lazy-loading#why_browser-level_lazy_loading

所有主要浏览器中的代码示例和支持（对于

<img>

和

<iframe>

）： https://www.linkedin.com/feed/update/urn:li:activity:7129755923555737601/ 何时/什么要延迟加载： https://www.erwinhofman.com/blog/to-lazyload-above-the-fold-images/