提高 WordPress 网站性能的方法有很多。图像和其他媒体文件是加载时间长的罪魁祸首之一。这意味着实施任何图像优化方法都会显着影响网站性能，延迟加载也不例外。
在本文中，我们将讨论延迟加载的工作原理以及它如何使您的网站受益。然后，我们将向您展示一些在 WordPress 中为多种类型的元素添加延迟加载的最流行的方法。最后，我们将讨论此设置可能导致的一些最常见的技术问题。
让我们开始吧！
什么是延迟加载？
通常，当您访问一个网站时，它的所有组件都会尝试同时加载。您的浏览器将显示页面上的每个媒体资产、文本、链接和其他元素。如果页面有很多媒体资源（例如图像），它们会显着减慢加载时间。
有很多方法可以减少图像对页面加载时间的影响。您可以优化图像、启用浏览器缓存、使用内容分发网络 (CDN) 以及选择较小的文件类型。理想情况下，您会加倍努力并实施尽可能多的这些优化，因为没有网站像这样太快了。
延迟加载不会减小图像文件的大小，也不会改变为每个用户加载所需的时间。相比之下，此设置延迟加载每个图像，直到您的浏览器视口到达包含该文件的页面部分：
事实上，如果您已经有一个响应式网站，延迟加载对用户如何与您的网站互动的影响应该很小。大多数访问者在滚动页面时不会注意到出现的图像。同时，您还可以从更快的初始加载时间中获益，因为用户不必同时请求和加载每个图像。
WordPress延迟加载有什么好处？
延迟加载有助于减少初始加载时间。当您考虑到 40% 的用户在加载时间超过三秒时离开网页时，这一点至关重要。因此，此设置可以吸引访问者留在您的网站上并浏览您的内容。
另外，懒加载可以减少内存和存储的压力。因此，使用它可能会引导您选择一个更实惠的网络托管计划。
重要的是要注意，从 WordPress 5.5 开始，内容管理系统 (CMS) 默认情况下会延迟加载图像。但是，关于默认方法是否会损害 Core Web Vitals 分数。
默认情况下的延迟加载会提高论文的加载时间。但是，它也会损害最大内容绘制 (LCP) 分数。
LCP 测量在任何页面上加载最大图像或文本块所需的时间：
WordPress 对您网站上的图像使用 HTML load=delay 属性。通常，这是实现延迟加载的最简单方法。但是，并非所有浏览器都支持此属性。
如果要为特定图像禁用延迟加载，则需要使用 HTML 手动修改该属性。另一种方法是使用通过不同方法实现延迟加载的 WordPress 插件（这为您提供更多控制）。
其他元素可以懒加载吗？
从技术上讲，您可以延迟网站上几乎所有元素的加载。延迟加载对图像非常有用，它也是视频资产的杀手级功能。
除了媒体资源，您还可以延迟加载 JavaScript 和 CSS 等代码。事实上，我们建议延迟可能会阻止您的网站呈现的脚本，以提高您网站的首次内容绘制 (FCP) 分数。
继续，您还可以选择延迟加载文本资源。但是，从可用性的角度来看，这不是一个好的做法。此外，即使您在页面上显示整本书的文本，也不会对加载时间产生明显影响。
延迟加载最适合对加载时间有显着影响的媒体密集型资产。但是，WordPress 核心只支持延迟加载图片。如果您想将这种做法扩展到其他元素，则需要找到替代实现。这就是插件的用武之地。
如何在 WordPress 中为图像和视频添加延迟加载
正如我们之前提到的，WordPress 默认为所有图像添加延迟加载。但是，您几乎无法控制延迟加载哪些图像。如果您想选择不同的方法，我们建议使用 a3 延迟加载插件。
第 1 步：安装并激活 a3 Lazy Load 插件
a3 插件使您能够从延迟加载中排除特定图像和页面。另外，它支持延迟加载您网站上的视频：
该插件还增加了对外部图像和视频延迟加载的支持。这是 WordPress 核心实现所不具备的。
从您的 WordPress 仪表板安装并激活插件。您现在可以自定义工具的设置。
第二步：调整插件图像设置
接下来，转到“设置”>“a3 延迟加载”。在 Lazy Load Activation 下查看，您会注意到该插件在安装后默认情况下处于打开状态。
打开延迟加载图像选项卡。您可以 (1) 选择在您的网站上延迟显示哪些图像，以及 (2) 为阻止 JavaScript 的浏览器启用回退。您还可以 (3) 为不想延迟加载的图像设置 CSS 类：
默认情况下，每个选项都是打开的，我们建议保留它。继续并设置一个 CSS 类，使您能够跳过特定图像的延迟加载。
第 3 步：调整插件视频设置
接下来，转到延迟加载视频和 iframe 选项卡。与图像一样，a3 Lazy Load 允许您为特定剪辑选择延迟加载。
此插件支持 (1) 内容和小部件中的视频，并为阻止 JavaScript 的浏览器提供 (2) 回退：
视频设置 (3) 使您能够指定一个 CSS 类以从延迟加载中排除特定视频。为了更容易配置，您可以使用在图像部分中选择的相同类。
第四步：禁用延迟加载（可选）
最后，如果你想为特定类型的页面禁用延迟加载，你可以在“按URL和页面排除”类型”选项卡来执行此操作。在这里您可以输入不应该使用延迟加载的特定页面或内容类型：
保存对插件设置的更改，您就可以开始了。如果要为特定元素禁用延迟加载，请打开编辑器并选择要配置的图像或视频块。
打开块设置菜单并导航到“高级”选项卡以找到“其他 CSS 类”字段：
配置插件时可以使用该字段添加设置的懒加载排除类。如果您这样做，当用户访问您的网站时，该图像将立即加载。
解决延迟加载问题
虽然延迟加载很方便并且是 WordPress 的核心功能，但它也会导致您的网站出现多种类型的错误。本节讨论这些问题是什么以及如何解决它们。
首屏图像问题
一般来说，我们建议您不要延迟加载首屏图像。当我们说“首屏”时，我们指的是访问者从您的网站加载页面时看到的第一个视口。
在首屏之外发布图像会影响您的 FCP 分数。它还会影响用户访问您的网站时的第一印象。
简单的解决方案是禁用页面标题和其他顶部元素中的图像延迟加载。例如，如果我们以这个页面为例，我们建议禁用延迟加载（1）徽标和（2）标题背景：
WordPress 要求您向站点添加代码以禁用其本机延迟加载实现。为特定属性关闭延迟加载的最简单方法是使用插件，例如 a3 Lazy Load，正如我们在上一节中探讨的那样。
由于延迟加载导致的布局转换
当您加载页面并且元素在它们变得可见时四处移动时，就会发生布局转换。 Cumulative Layout Shift (CLS) 是衡量核心网络布局变化的关键指标。在某些情况下，延迟加载实施不当会影响您网站的 CLS 分数。
页面上的元素不会一下子加载完。相反，它们是一个接一个地完成的，即使这个过程对浏览器来说几乎是即时的。当您有在其他元素之后加载的图像文件时，他们可以移动这些资产。
这个问题的解决方案是避免在 WordPress 中使用全尺寸图像。当您将图片上传到 WordPress 时，CMS 会自动将它们调整为标准分辨率：
即使使用延迟加载，使用标准分辨率也可以减少布局发生剧烈变化的可能性。您还可以为每个文件手动指定图像尺寸。然而，这是一个耗时的过程。简而言之，我们只建议您对要以独特尺寸显示的图像执行此操作。
延迟加载和缓存插件的问题
缓存插件与延迟加载工具发生冲突是很常见的。一些缓存插件，例如 WP Rocket，包含内置的延迟加载功能。将此功能与 a3 Lazy Load 等延迟加载插件一起使用通常会导致冲突。
我们建议坚持使用一个插件系列，以避免由于工具冲突而导致图像不显示的问题。如果您同时启用了延迟加载和缓存插件并开始出现错误，我们建议您先禁用前一个选项：
禁用延迟加载插件后，检查您的图像是否正确加载。如果是这种情况，您的缓存工具可能内置了延迟加载。这意味着您不需要为此功能设置任何额外的软件。
结论
虽然延迟加载是 WordPress 的核心功能，但仍有一些方法可以改进其实现。您可以使用诸如 a3 Lazy Load 之类的插件来更好地控制您网站上的延迟加载。使用合适的插件，您还可以配置和排除外部资产的延迟加载。
根据您实现延迟加载的方式，这应该会大大减少页面加载时间。您网站上的媒体越多，您看到的结果就越好——所有这些都不会对用户体验产生任何负面影响。
您对在 WordPress 中使用延迟加载有任何疑问吗？让我们在下面的评论部分讨论它们！
精选图片来自 vectorplus/shutterstock.com
来源
