修复 Lighthouse 中的 Defer offscreen images 警告

什么是 Lighthouse 中的 'defer offscreen images' 警告？

什么是 Lighthouse 中的 defer offscreen images 警告？Lighthouse 会标记具有以下特征的页面：

• 图片底部位于视口高度 3 倍以下的位置。
  当图片未使用延迟加载，且底部位于页面可见区域高度 3 倍以下，同时顶部位于页面可见区域以下时。
• 且大于 0.02MB 或加载时间超过 50ms。
  Lighthouse 会忽略较小或内联的图片。延迟加载脚本通常使用小型占位图片。
• 且未定义 loading 属性。
  Lighthouse 会忽略设置了 loading="lazy" 或 loading="eager" 属性的图片。

'Defer offscreen images' 警告不会直接影响任何 Lighthouse 指标。理论上，包含屏幕外图片的页面仍可以快速加载。但实际情况通常并非如此。过多的屏幕外图片很可能会间接影响重要的 Lighthouse 指标，如 Largest Contentful Paint (LCP)。

快速回顾 - 什么是延迟加载？

延迟加载意味着不在页面可见区域内的图片可以在稍后加载，通常在它们即将滚动到视野中时才加载。

什么导致屏幕外图片被"立即加载"？

图片默认不会延迟加载。未被延迟加载的屏幕外图片出现在页面上，是因为图片的 loading 属性为空，或者图片不符合自定义延迟加载库的要求。屏幕外图片通常由以下原因造成：

• CMS 中编码不佳的插件。
• 禁用原生延迟加载的插件
• 背景图片
• 生成不良 HTML 的页面构建器（例如：Elementor 或 WP Bakery）。
  
• 复制粘贴到所见即所得编辑器（如 TinyMCE）中的文本。
• 不良的模板编码。

"屏幕外图片"如何影响页面速度

屏幕外图片不会直接影响 Lighthouse 指标。但它确实会使网页渲染变得不必要地复杂，几乎不可能获得高 Lighthouse 分数。浏览器需要在网页显示到屏幕之前下载更多资源。屏幕外图片有 3 个问题。

• 浏览器需要在渲染页面之前下载更多图片。
• 页面渲染所需的其他资源可能会因优先级降低而被延迟。
• 浏览器在渲染页面时可能会使用更多内存。

如何修复 'defer offscreen images'

要修复 'defer offscreen images'，你需要对不在可见视口中的图片进行延迟加载。你可以通过添加原生延迟加载或延迟加载库来实现。要添加原生延迟加载，只需在图片元素中添加 'loading="lazy"'。

<img      src="image.webp" 
     alt="a native lazy loaded image" 
     width="300" height="300">

或者，你可以添加一个原生延迟加载库，如 lazysizes，或者实现你自己的延迟加载（这比你想象的要简单）。

从那里你需要做一些搜索。试着找出是什么导致这些图片以非延迟方式放置在页面上。通常有 5 个嫌疑对象：

1. CMS 中编码不佳的插件。
   某些插件可能会直接向页面添加 HTML，而不使用启用延迟加载的正确钩子。
2. 禁用原生延迟加载的插件。
   有些插件默认禁用原生延迟加载。
3. 生成不良 HTML 的页面构建器
   像 Elementor 或 WP Bakery 这样的页面构建器经常生成臃肿且不完美的代码。这个问题没有简单的解决方案。页面构建器通常是工作流程的一部分。解决方案包括清理臃肿的代码并改变你的工作流程。
4. 复制粘贴到所见即所得编辑器中的文本
   大多数所见即所得编辑器（如 TinyMCE）在清理粘贴的代码方面做得很差，尤其是从其他富文本来源（如 Microsoft Word）粘贴时。这些编辑器可能不会为你的图片添加延迟加载。
5. 不良的（模板）编码。
   即使启用了延迟加载，模板中硬编码的图片可能仍然没有被延迟加载。检查你的模板中的屏幕外图片并对其进行延迟加载。

哪个更好 - 原生延迟加载 vs 延迟加载脚本？

哪个更好？应该使用浏览器原生的 loading="lazy" 还是延迟加载脚本？我个人更推荐浏览器原生延迟加载。为什么？因为不需要使用会引入额外开销的外部脚本。原生延迟加载就是更快。然而，Safari 不支持原生延迟加载。如果你的大部分用户使用 iPhone 或 Mac 上网，可以考虑使用延迟加载脚本。大多数情况下，原生延迟加载的优势大于不支持 Safari 的劣势。

'Defer offscreen images' 的替代解决方案

有时无法延迟加载屏幕外图片。你可能无法访问模板，或者你的 CMS 可能不支持延迟加载。以下是一些减轻屏幕外图片影响的替代方案。这些方案远非完美，可能会引入全新的挑战。

• 压缩和优化你的图片。
  压缩和优化现有图片。较小的图片对加载性能的影响比大图片要小。
• 使用更新、更快的图片格式。
  将 png 和 jpeg 文件格式替换为更快的文件格式，如 WebP。
• 将大页面拆分为多个页面。
  将大页面拆分为多个页面可以减少单个页面上显示的图片数量。
• 实现无限滚动。
  无限滚动基本上就是延迟加载，不过不是针对图片，而是针对网页的整个部分。当滚动浏览重复元素（如图片，参见 Pinterest）时，无限滚动可以显著加速你的页面。