目录
- 延迟屏幕外图像的含义
- 为什么应该延迟屏幕外图像
- 如何查找要延迟的屏幕外图像
- 如何在 WordPress 上延迟屏幕外图像
- 如何在没有插件的情况下手动延迟（延迟加载）屏幕外图像
- 如何使用插件延迟（延迟加载）屏幕外图像
- 使用WP Rocket延迟屏幕外图像：结果前后
“推迟屏幕外图像”是 PageSpeed Insights 建议之一，包含在效果审核的“机会”部分下。
Google 建议“在所有关键资源完成加载后考虑延迟加载屏幕外和隐藏图像，以缩短交互时间”。
如果您不确定它的含义，更重要的是，如果您想知道如何解决 WordPress 网站上的问题，请继续阅读！
您将了解 PSI 建议的含义以及如何延迟屏幕外图像并提高网站的性能。
延迟屏幕外图像的含义
让我们从解释什么是 fold 开始。折叠是您登陆页面后立即看到的屏幕部分。您无需向下滚动或执行任何其他操作 — 它只是您看到的第一个内容。由于这部分位于页面顶部，因此它被命名为首屏。它是页面中最重要的部分，也是浏览器必须呈现才能开始与内容交互的第一个部分。
另一方面，所有仅在向下滚动后可见的内容都命名为 SIDE 下方。可以想象，在加载页面时，它不太相关。
这就是为什么 Web 性能最佳实践是仅在页面渲染结束时加载非首屏内容。在此之前，浏览器将仅加载首屏内容。因此，加载时间会更快，页面的交互性也会很好。
现在更容易理解这个 PageSpeed Insights 审计是关于什么的。延迟屏幕外图像是指仅在首屏上方的关键资源完全加载后才加载首屏（屏幕外）的图像。
为什么应该延迟屏幕外图像
当浏览器必须下载和呈现非关键资源（如首屏图像）时，页面加载时间会更长，并且用户无法像预期的那样快速与页面交互。
延迟屏幕外图像可以提高 WordPress 网站的性能和关键性能指标，例如与下一次绘制的交互、首次输入延迟和整体加载时间。
与 Next Paint 交互 （INP） 是一项新的 Core Web Vital，用于测量页面响应能力。首次输入延迟 （FID） 是以前的 Core Web Vitals 指标，它衡量第一页的交互。从 2021 年 6 月中旬开始，Core Web Vitals 成为新的排名因素 2021 年 Google 页面体验更新的一部分。
除了改进 Interaction to Next Paint 和 First Input Delay 以提供更好的用户体验外，您还应考虑 FID 对 SEO 的潜在影响。
由于 FID 只能通过 Field 数据（通过真实用户交互）来衡量，因此您应该考虑另一个指标：总阻塞时间(TBT)。TBT 与 FID 密切相关，它根据实验室数据衡量用户输入。这是最相关的 Lighthouse 指标之一，因为它的权重占 Lighthouse 整体性能分数的 30%。因此，推迟屏幕外图像以提高整体 PageSpeed 等级也至关重要。
最后但并非最不重要的一点是，不要忘记加载时间！尽管加载时间与 SEO 性能或特定分数没有密切关系，但在提供出色的用户体验和让您的用户转化方面，加载时间可以产生重大影响。
如何查找要延迟的屏幕外图像
找到要延迟的屏幕外图像非常简单。使用 PageSpeed Insights 运行测试后，转到 Diagnostics 部分并查找 Defer Offscreen Images 审核。
PSI 将标记未延迟的映像 — 当并非所有映像都处于延迟加载状态时，这有利于故障排除（您将在下一节中阅读有关延迟加载的更多信息）。
在测试 URL 的性能时，您可能会遇到两种情况。
如果出现问题，您可能会收到类似于以下示例的内容。您将看到一条红色警告和一份应推迟的图片列表。
另一方面，如果 Lighthouse 未检测到有关屏幕外图像的任何问题，您将在“Passed audits”部分下看到审核：
如何在 WordPress 上延迟屏幕外图像
确定要推迟的图像后，您就可以继续前进并完成工作。
首先要记住的是，最好推迟所有低于首屏的图像。
延迟加载选项
延迟图像的主要方法是延迟加载。由于延迟加载，在用户向下滚动页面之前，不会加载所有首屏图像。
由于浏览器在渲染过程中不会考虑这些图像中的任何一个，因此页面加载速度非常快，并且 First Input Delay 等指标将获得高分。更重要的是，您将解决 PageSpeed Insights 建议。
你应该延迟加载所有图像吗？
虽然您应该延迟加载首屏下的所有图像，但您应该始终从延迟加载中排除首屏图像。
风险在于提高 Largest Contentful Paint 等级，该等级测量最大元素在视区中可见所需的时间。如果 LCP 元素是图像（通常是这种情况），则由于延迟加载，加载时间会更长。结果，LCP 分数会变得更差。
延迟屏幕外图像的其他选项
对于移动设备，您还可以通过 AMP 延迟屏幕外图像。AMP 标记 <amp-img> 将自动延迟加载图像。
如果某些图像是使用 JavaScript 动态添加的，则延迟或延迟 JavaScript 也会延迟图像。同样，如果一些非首屏图像是使用 CSS 样式表添加的，则可以优化 CSS 交付并推迟它们。
但是，延迟加载是最简单的方法。
如何在没有插件的情况下手动延迟（延迟加载）屏幕外图像
你可以使用属性 <img loading=“lazy”> 通过延迟加载来手动延迟屏幕外图像。下面是一个示例：
<img src=“example.png” loading=“lazy” alt=“example”>当 loading 属性被添加时，它将触发浏览器级别的延迟加载。 基于 Chrome 的浏览器和 Firefox 支持 loading 属性。
请记住，触发图像加载的阈值是 1250 像素（如 4g 的快速连接）和 2500 像素（如 3g 等较慢的连接）。
如何使用插件延迟（延迟加载）屏幕外图像
作为 WordPress 用户，您应该知道 WordPress 默认使用原生 LazyLoad。
WordPress 会将 loading=“lazy” 属性添加到所有具有 width 和 height 属性的图片中。但是，此功能并非适用于所有浏览器上的背景图像和 iframe。
浏览器无法延迟加载背景图像，因为它们在分析和呈现页面时如何处理背景图像。
因此，如果您需要延迟加载此类图像，您应该使用 WordPress 最好的延迟加载插件之一。
最简单的选择是利用 WP Rocket，它将帮助您加快网站速度，甚至超越延迟加载！
在 Media 选项卡中，您将找到延迟加载图像并在需要时排除任何图像的选项（请记住我们上面写的有关 LCP 等级的内容）。就这么简单！
使用WP Rocket延迟屏幕外图像：结果前后
使用和不使用 WP Rocket 对 Defer offscreen images 审核有什么影响？
我们通过安装 Astra 主题并使用 Beaver Builder 导入电子商务网站来运行测试。
通过在没有 WP Rocket 的页面上运行测试，我们得到了关于此特定审计的橙色标志：
然后我们激活了 WP Rocket 和延迟加载功能。这一次，Opportunities 部分没有显示任何与延迟屏幕外图像相关的标志：
向下滚动，我们在绿色旗帜下找到了审计。我们只用了一下鼠标就解决了一个性能问题。相当不错，对吧？
发表回复