有很多方法可以提高您的 WordPress 网站的性能。 图像和其他媒体资产是加载时间缓慢的一些最常见原因。 这意味着添加任何图像优化方法，包括延迟加载，都会对网站性能产生相当大的影响。
尽管我们已经介绍了如何实现图像延迟加载，但这篇文章将从不同的角度进一步解释该主题。 然后，我们将介绍一些在 WordPress 中为各种类型的项目添加延迟加载的最流行的方法。 最后，我们将讨论此选项可能带来的一些最典型的技术问题。
让我们开始吧！
什么是延迟加载？
当您浏览网站时，其所有元素都会尝试同时加载。 页面上的所有内容都将在您的浏览器中完整显示。 如果页面包含大量媒体资产，例如图像，它们会显着减慢加载时间。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始
有许多方法可以减少照片对网站加载时间的影响。 图像优化、浏览器缓存、使用内容交付网络 (CDN) 以及使用较低文件类型都是选项。 理想情况下，您应该加倍努力并尽可能多地应用这些优化，因为不存在过快的网站。
延迟加载对图像文件大小或每个用户加载所需的时间没有影响。 另一方面，此设置可能会延迟加载每个图像，直到您的浏览器视点到达包含该文件的页面区域。
WordPress中延迟加载的好处
可以通过延迟加载来减少初始加载时间。 这一点至关重要，因为如果加载时间超过 3 秒，40% 的人会退出网站。 因此，此选项可以鼓励人们留在您的网站上并浏览您的资料。
此外，延迟加载可以减轻内存和存储的压力。 因此，使用它可以让您选择更便宜的网站托管包。
值得注意的是，从 WordPress 5.5 开始，CMS 具有延迟加载图片的默认选项。 然而，关于默认策略是否会损害 Core Web Vitals 分数存在重大争议。
在纸面上，延迟加载默认会缩短加载时间。 但是，它可能会对最大内容绘制 (LCP) 分数产生负面影响。
加载任何页面上最大的图像或文本块所需的时间长度由 LCP 测量：
对于您网站上的照片，WordPress 使用 HTML loading=lazy 属性。 一般来说，这是实现延迟加载的最简单的技术。 但是，并非所有浏览器都支持该属性。
如果您希望禁用单个图像的延迟加载，您必须使用 HTML 手动更改属性。 另一种选择是使用 WordPress 插件，它以不同的方式完成延迟加载。
延迟加载其他元素
从技术上讲，几乎网站上的任何组件都可能会延迟加载。 延迟加载非常适合照片，也是视频文件的绝佳功能。
除了媒体文件，您还可以通过 JavaScript 和 CSS 等代码推迟加载。 事实上，我们建议推迟可能会阻止您的网站呈现的脚本，以提高您的首次内容绘制 (FCP) 分数。
之后，您可以选择延迟加载文本资源。 但是，从可用性的角度来看，这并不是一个好的方法。 此外，即使在页面上显示整本书的价值也不应该对加载时间产生重大影响。
延迟加载非常适合对加载时间有很大影响的大量媒体资产。 另一方面，WordPress 核心仅支持图片的慢速加载。 如果您希望将该方法应用于其他元素，则需要找到一种不同的方法来实现。 这就是插件发挥作用的地方。
在 WordPress 中添加延迟加载
您可以使用a3 插件将特定图像和页面从缓慢加载中排除。 此外，它还为您网站上的视频提供延迟流式传输。
此插件还支持延迟加载外部照片和视频。 这不是 WordPress 核心机制所做的。
从您的 WordPress 管理区域，安装并激活插件。 您现在可以更改工具的属性。
调整插件设置
然后，转到设置
导航到延迟加载图像选项卡。 您可以选择在您的网站上延迟哪些图像，并为不支持 JavaScript 的浏览器设置回退。 您还可以为以后不想加载的照片指定 CSS 类。
默认情况下启用每个选项，我们建议不要这样做。 创建一个 CSS 类，允许您跳过特定图像的延迟加载。
然后单击延迟加载视频和 iframe 选项卡。与图片一样，它还允许您为某些剪辑设置延迟加载。
该插件在内容和小部件中启用视频，它包括一个针对阻止 JavaScript 的浏览器的解决方法：
您可以在视频设置中定义一个 CSS 类，从延迟加载中删除特定视频。 您可以使用您在图片部分中选择的相同类进行更简单的设置。
最后，在“按 URL 和页面类别排除”选项卡中，您可以停止延迟加载特定类型的页面。 您可以在此处指定哪些站点或内容类别不应使用延迟加载。
将您的调整保存到插件的设置中，您就完成了。 要停用特定元素的延迟加载，请进入编辑器并选择要调整的图像或视频块。
要发现 Additional CSS 框，请打开块设置菜单并转到高级选项卡。
该字段可用于添加您在配置插件时创建的延迟加载排除类。 如果您这样做，当用户访问您的网站时，图像将立即加载。
延迟加载故障排除
尽管延迟加载是 WordPress 的一项有用且必不可少的功能，但它也可能导致您的网站出现各种问题。 本节将讨论这些问题是什么以及如何解决它们。
图像上方的问题
一般来说，我们建议不要在首屏延迟加载图形。 当我们说“首屏”时，我们指的是您的用户在访问您的网站时看到的初始视口。
延迟折叠照片可能会影响您的 FCP 分数。 它也可能对用户对您网站的第一想法产生影响。
直接的答案是停止延迟加载页面标题和其他顶级组件中的图像。 如果我们以这个页面为例，我们会建议停用徽标和标题背景的延迟加载。
要禁用 WordPress 的慢速加载默认实现，您必须向您的网站添加代码。 禁用单个媒体资产延迟加载的最简单方法是使用像a3 Lazy Load这样的插件，我们在上一节中讨论过。
延迟加载的布局转换
当您加载页面时，组件会在它们变得可见时四处移动，从而导致布局移动。 Cumulative Layout Shift (CLS) 是一个标准 Web Vital，用于量化布局偏移。 在某些情况下，延迟加载执行不当会影响您网站的 CLS 评级。
页面上的项目不会同时加载。 相反，它们一个接一个地通过，即使该过程在浏览器上看起来几乎是即时的。 当图像文件在其他元素之后加载时，它们能够移动这些资产。
为避免此问题，请避免在 WordPress 中使用全尺寸照片。 当您将图像上传到 WordPress 时，CMS 会为您将它们调整为标准化分辨率。
即使使用延迟加载，使用标准分辨率也会降低严重布局修改的可能性。 您还可以手动定义每个文件的图像尺寸。 然而，这是一项耗时的操作。 简而言之，我们只推荐它用于需要以特定尺寸显示的照片。
延迟加载和缓存插件问题
缓存插件经常与延迟加载工具重叠。 一些缓存插件，例如WP Rocket ，内置了延迟加载功能。 将该功能与延迟加载插件（例如a3 Lazy Load ）一起使用通常会导致问题。
为避免由于竞争工具而导致图片无法显示的问题，我们建议使用一个插件系列。 如果您同时激活了延迟加载和缓存插件并且遇到困难，我们建议您先删除前者。
删除延迟加载插件后，尝试查看您的图像是否正确加载。 如果是这种情况，您的缓存解决方案很可能包括延迟加载功能。 这意味着您无需安装任何其他软件即可利用该功能。
结束的想法
尽管延迟加载是 WordPress 的一个关键特性，但仍有一些方法可以优化其应用程序。 要对您网站上的延迟加载进行额外控制，您可以使用诸如a3 Lazy Load之类的插件。 您还可以使用正确的插件配置和禁用外部元素的延迟加载。
根据您处理延迟加载的方式，它应该会显着减少页面加载时间。 您的网站使用的媒体越多，您收到的结果就越高——同时保持积极的用户体验。
