延迟屏幕外图像：如何修复此 Google Lighthouse 机会

衡量您网站的性能通常是一项成功或失败的工作。 这是因为可用的工具无法让我们正确了解与网站性能相关的用户体验。 然而，Google Lighthouse 修复了很多这些缺点，并使您可以将其融入您的开发工作流程。 Lighthouse 中的“机会”之一是延迟 WordPress 中的屏幕外图像。 好消息是这很容易实现。

对于这篇文章，我们将看看 🔎 如何使用代码和插件在 WordPress 中延迟屏幕外图像。 不过，首先，我们必须弄清楚一些关于 Google Lighthouse 的术语，然后讨论Defer offscreen images指标应该放在优先级列表中的什么位置。

审计建议和机会之间的区别

在我们了解如何在 WordPress 中延迟屏幕外图像之前，了解此指令如何插入 Google Lighthouse 非常重要。 这是一个绩效“机会”，而不是审计建议。 这是区别：

• 审计建议。 这将对您在 Google Lighthouse 中的分数产生决定性影响，您应该优先关注这些指标。
• 机会。 虽然这些仍然有一定的重要性，但它们不会影响您的审核分数。 因此，您可以将它们视为次要问题。

Defer offscreen images指标是一个机会。 这意味着它仍然可以产生影响，但是一旦你的分数不能再提高了，你就可以看看它。

延迟屏幕外图像——一个定义

您的网站可能会在页面的所有部分使用图片。 其中一些将显示在“折叠上方”——即，无需滚动即可显示在屏幕上。 因此，屏幕外图像代表其他一切。

Defer offscreen images指标是指满足以下四个标准中的任何一个的视觉元素：

• 图像必须从可见页面区域下方开始，并以该区域高度的三倍结束。
• 超小图像（小于 0.02 MB 的图像）不会计入Defer 离屏图像指标。
• 加载时间超过 50 毫秒的页面将触发机会。
• 如果您的页面定义了加载属性，您将根本看不到Defer 屏幕外图像。 剧透警报：现在就适应loading="lazy"吧！

此外，您可能会发现具有大量屏幕外图像的站点的 Largest Contentful Paint (LCP) 分数很低。 这给 Google Lighthouse 10 带来了一个令人困惑的变化，我们将在接下来介绍。

改善交互时间 (TTI) 是一个贬值的指标

在旧版本的 Google Lighthouse 中，延迟屏幕外图像会影响 TTI。 然而，谷歌现在认为这是一个贬值的指标。 10% 的权重使整体性能审核分数转移到累积布局偏移 (CLS)，现在提供 25% 的权重[1][2] 。

这带来了一个问题，无论您是否将图像延迟到屏幕外，这都不会导致布局偏移。 因此，这就是为什么Defer offscreen images现在只是一个机会，而不是完整的审计建议。

为什么 Google Lighthouse 会要求您推迟屏幕外图像

尽管Defer offscreen images降级了，但它对加载速度和性能仍然有一定的重要性。 您可以在您选择的任何工具中在几秒钟内看到完全加载的屏幕外图像的影响：

虽然此指标不会影响 CLS 或 TTI，但它可能会对 LCP 产生影响——尽管在许多情况下影响很小。 这也是一个很好的提醒，您应该只在需要时加载图像。 接下来，我们将讨论原因。

为什么不应该一次加载所有图像

在谈话中，我们都遵循“合作原则”。 这不是社会科学课，所以我们不会在这里详细介绍。 然而，这个概念的一个重要方面对Defer offscreen images指标很重要。 “Grice 的数量准则”指出，您应该只披露建立上下文所需的信息。

为什么这很重要？ 因为如果你提供太多信息，这可能会导致听众过载（以及其他问题）。

因此，您也不应一次加载您网站的所有图像！ 这是出于几个充分的原因：

• 用户将看不到屏幕外图像，否则它们将占用屏幕上元素所需的资源。
• 加载屏幕外图像可能会导致糟糕的用户体验 (UX)，因为页面加载时视口内不会发生任何值得注意的事情。
• 对于用户来说，这也可能会在经济上造成损失。 例如，假设有人在使用移动数据而不是 Wi-Fi 浏览到一个不延迟任何屏幕外图像的网站。

鉴于 Google Lighthouse 的重点是用户体验以及感知性能如何影响它，理解以上所有内容都至关重要。 好消息是有一种直接的方法可以延迟屏幕外图像。

如何延迟您网站上的屏幕外图像

答案是：延迟加载。 这是减少屏幕外图像对网站感知性能影响的最直接、最有效的方法。 更好的是，大多数浏览器都支持延迟加载：

但是，Firefox 仅支持图像的延迟加载，如果您选择为内联框架实现这一点，这将很重要。 尽管如此，您仍有许多方法可以实现这一点。 主要方法是在<img>或<iframe>元素中使用 HTML loading属性。 您可以选择使用三个不同的值：

• eager 。 这将告诉浏览器首先加载这些图像。 这是默认选项，与完全不包含它一样好，因为无论图像在页面上的什么位置，它都会始终呈现。
• lazy 。 这将延迟加载图像或 iframe，直到它到达与视口的硬编码距离。 确切的距离可能因浏览器而异，而且您也希望始终指定图像尺寸。
• auto 。 浏览器将为作业选择最佳选项。

正如您所期望的，这实现起来很简单：

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

当然，这里在前端看不到任何东西，因为无论如何图像都会在屏幕外并且不可见。

如果您选择使用 Accelerated Mobile Pages (AMP)，则可以使用amp-img元素自动实现延迟加载。 对于其他平台，模块或插件是实现延迟加载的最佳方式。

如果您希望在 WordPress 中延迟屏幕外图像，您需要使用专用插件来执行此操作。 默认情况下，WordPress 为所有图像实现延迟加载，但这种宽泛的画笔可能不适合您的确切需求。

使用 WordPress 插件为您的网站添加延迟加载

每当您想向 WordPress 添加任何额外功能时，插件始终是您的最佳选择。 说到懒加载，也可以这样。

WordPress 有许多插件可以帮助您添加延迟加载，但并非所有插件都是一样的。 例如，有些评分和评论很差，有些没有得到很多更新，有些甚至无法提供适当级别的功能。 然而，Optimole 可以在图像压缩和延迟加载方面发挥作用。

这不会是 Optimole 总体上可以做什么的概述——我们的姊妹网站 Themeisle 可以向您展示这一点。 相反，我们将重点介绍延迟加载图像所需的快速且无痛的选项。 要找到正确的选项，请前往媒体 > Optimole > 设置屏幕，然后寻找缩放图像和延迟加载切换开关。 您需要确保它已打开：

执行此操作后， “高级”>“延迟加载”部分将提供大量选项：

这为您提供了一组有价值的选项。 例如，您可以为图像启用占位符、在浏览器原生加载或经典延迟加载之间切换、启用图像缩放等。

但是，您需要进一步研究两个设置。 第一个让您从加载中排除一定数量的图像。 默认值为三张，但您可以将其设置为您在首屏上有多少张图片。 这意味着您将对站点上的所有图像实施延迟加载：

另一个很酷的功能是能够指定 CSS 选择器来帮助您延迟加载背景图像：

这为您提供了一种方法，可以根据您的需求和 Lighthouse 分数自定义整个延迟加载体验，同时保留一些灵活性。 更重要的是，免费版的 Optimole 可以实现上述所有功能！

结论🧐

如果图像不在屏幕上，则无需加载它们。 如果没有诸如延迟加载之类的解决方案，您将不得不延长网站加载所需的时间。 它还会影响一些与性能相关的最重要指标。 Google Lighthouse 的Defer offscreen images机会让您推动实现某种延迟加载，并且有很多无代码的方法可以做到这一点。

例如，Optimole 是帮助您在 WordPress 中延迟屏幕外图像的最佳插件之一。 您可以设置比 WordPress 所采用的全局“始终在线”方法更具体的选项。 但是，还有其他插件也可以帮助您执行此操作，例如缓存插件。 甚至编码路径也很简单，更好的是，您几乎可以得到所有浏览器的支持。

Optimole 会成为您在 WordPress 中延迟屏幕外图像的方法吗？ 在下面的评论部分与我们分享您的想法！