如何在 WordPress 上延迟加载图像（ 什么是原生延迟加载）

目录

• 什么是延迟加载及其工作原理
• 什么是原生图像延迟加载？
• WordPress 5.5 中的原生图像延迟加载
• 如何在 WordPress 中启用图像和视频的延迟加载
• 如何在 WordPress 中禁用延迟加载 

---

右键点我复制链接地址，分享页面有积分。

---

没有人喜欢缓慢的 WordPress 网站。然而，图像是网络上最流行的媒体格式。它们是大多数网站加载的最重的资源之一，并且比任何其他资源占用更多的带宽，导致页面加载速度缓慢。

这就是为什么优化 WordPress 上的图像至关重要。但是，您可以优化它们的程度是有限的。如果您的网页上有太多图像，那么您的访问者很有可能在页面加载之前就走人了。

这就是为什么延迟加载图像是使 WordPress 网站加载速度更快的重要步骤。通过延迟加载，用户向下滚动到特定图像时才加载该图像。这是一种简单的解决方案，可以在不损害用户体验的情况下减少关键渲染路径。

在这篇文章中，您将了解如何在 WordPress 网站上启用和禁用图像和视频的延迟加载。您还将了解什么是原生 WordPress 延迟加载及其工作原理。

---

什么是延迟加载及其工作原理

延迟加载图像意味着在 WordPress 网站上异步加载图像。换句话说，在不同时间加载网页上的图像和其他内容。

简而言之，延迟加载的工作原理如下：当有人访问您的网站时，图像将在首屏加载，但页面上的其余图像只有在用户屏幕上可见时才会下载。换句话说，延迟加载意味着推迟屏幕外图像。

许多图像较多的网站都使用这种技术。当您向下滚动页面时，您会看到占位符图像很快就会被真实图像填满。

一个很好的例子是Medium，流行的博客网站。

<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />
<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>

您可以查看上面显示的完整演示，并了解加载属性如何处理包含 100 张图片的页面。

加载HTML 属性支持以下三个值：

• lazy：推迟加载图像或 iframe 元素，直到满足某些条件。这些条件可能会因多种因素而异，例如图像格式、浏览器和网络连接的强度。
• eager：立即加载资源，无论它们位于网页上的什么位置。  
• auto：如果您未指定任何值，则加载属性的默认值为auto，这由浏览器决定默认的延迟加载行为。 

注意： loading属性目前仅支持<img>和<iframe>标签。例如，您不能使用它来延迟加载 CSS 背景图像。 

💡 WordPress 5.5 引入了原生延迟加载，默认通过原生 HTML 加载属性启动延迟加载图片。

原生图片延迟加载的4大优势

1. 对延迟加载图像的原生支持使您可以非常轻松地提高网站的性能。
2. 您无需安装 jQuery 等外部 JS 库即可在网站上启用延迟加载功能。您的网站加载的第三方资源越少，其性能就越好。
3. 让延迟加载功能成为 HTML 标准的一部分将确保它在所有主要浏览器上完美运行。 
4. 为用户和网站所有者节省了数据流量并降低了带宽成本。

原生延迟加载浏览器支持和兼容性

根据Can I use 的数据，全球超过72%的互联网受众所使用的浏览器都支持延迟加载属性。特别是，Google Chrome 和 Opera 支持原生延迟加载。在 Chrome 77 中，Google 实现了使用新的加载属性来延迟加载资源。

目前最主要的两个浏览器是 Safari 和 iOS Safari 浏览器，这两种浏览器都有超过 15% 的在线用户使用。

不支持loading属性的浏览器不会享受延迟加载的任何好处，但在代码中包含loading=lazy属性不会对网站的性能产生负面影响。

注意：您可以在 Safari 和 iOS Safari 浏览器的“高级”>“实验功能”菜单下手动启用加载属性。

---

WordPress 5.5 中的原生图像延迟加载

多年来，向 WordPress Core引入原生延迟加载 API一直是 WordPress 贡献者之间持续争论的话题。然而，由于当时没有适当的标准，这并不是一个简单的过程。 

原生 HTML加载属性的引入以及主要浏览器的最终支持改变了这一点。几个月后，WordPress 核心开发团队宣布在 WordPress 5.5 中引入原生延迟加载图像。 

WordPress 上如何实现延迟加载

WordPress 5.5 将向每个已指定宽度和高度属性的图像添加loading=”lazy”属性值对。包含此条件是为了避免累积布局偏移 (CLS)。当网页布局突然改变时，就会产生不和谐的用户体验。

Google 根据网站的CLS 分数对网站进行评分。那些排名不佳的网站会在搜索结果排名中受到谷歌的惩罚。由于在图像上包含宽度和高度尺寸属性可以帮助消除布局变化，因此这是一个很好的条件。

从技术上讲，WordPress 的原生延迟加载图像功能的工作方式类似于它通过附加srcset和size属性来处理响应式图像的方式。 

除了上述内容之外，WordPress 还会用宽度和高度属性回填所有img标签（如果它们尚不存在）。这样做是为了确保您网站上的所有图像都受益于延迟加载。核心团队还在推动一项新功能，强制所有图像具有宽度和高度属性。 

默认情况下，WordPress 会在以下函数或挂钩的输出中的所有图像标签中添加loading=”lazy”属性：

• the_content()：帖子内容中的图像。
• the_excerpt()：帖子摘录中的图像。
• widget_text_content：文本小部件中的图像。
• get_avatar()：头像图像。
• wp_get_attachment_image()：作为附件添加到 WordPress 上的图像。它们也称为模板图像。

这些函数的每一个输出都会导致 WordPress 中的特定“上下文”。您将在下一节中了解这五个上下文的重要性。

WordPress 还添加了一组新的核心功能，使服务器资源上的转换更加容易。下面是它们的列表，并简要描述了它们的作用：

• wp_filter_content_tags()：修改帖子内容中的 HTML 标签以包含新属性。例如，如果需要，它会通过调用接下来的三个函数来修改img标签。以后也可以添加类似的功能来优化其他 HTML 元素。  
• wp_img_tag_add_width_and_height_attr()：向没有宽度和高度属性的img标签添加宽度和高度属性。
• wp_img_tag_add_srcset_and_sizes_attr()：将srcset和sized属性添加到现有的img标签中。
• wp_img_tag_add_loading_attr()：向img标签添加加载属性。

在 WordPress 上自定义原生图像延迟加载

您可以通过各种过滤器自定义 WordPress 上原生图像延迟加载的默认行为：

• 其中最重要的是wp_lazy_loading_enabled过滤器，它接受三个自定义参数：$default、$tag_name和$context。您可以连接到此过滤器并关闭所有模板图像的延迟加载。
• 另一个名为wp_img_tag_add_loading_attr的新过滤器可以被连接来修改内容相关上下文中的图像，例如the_content、the_excerpt和widget_text_content。
• 对于输出纯图像的上下文（例如wp_get_attachment_image() ），您可以直接使用 PHP 更改其$attr 。

💡 WordPress 核心团队发布了一些延迟加载自定义示例，以帮助您熟悉其所有功能。如果您是 WordPress 主题或插件开发人员，我们强烈建议您查看它们。

截至目前，WordPress 仅支持图像的原生延迟加载功能。但他们将来可能会将其扩展到其他 HTML 元素（例如iframe ）。

为什么 WordPress 5.5 延迟加载不起作用？

如果 WordPress 延迟加载不起作用，可能是因为您想要延迟加载的图像是背景图像。背景图像没有 <img> 或 <iframe> 标签 – WordPress 延迟加载的唯一标签。

您还应该记住，原生延迟加载有一个阈值。高于该阈值的图像将会被加载，但不会被延迟加载，即使技术上延迟加载是有效的。

如果您的图像没有延迟加载，这可能是因为：

• 图像是添加到样式表中的。
• 图像是通过脚本动态添加的。
• 图像包含排除的属性之一，例如 data-src 和 data-no-lazy等等。

---

如何在 WordPress 中启用图像和视频的延迟加载

有许多选项可用于向您的网站添加延迟加载。您可以查看 WordPress 最佳延迟加载插件列表。

但到目前为止，向网站添加延迟加载的最简单方法是使用 WP Rocket。启用只需不到一分钟。 

您可以通过转到WordPress 管理仪表板中的设置 > WP Rocket > 媒体面板轻松启用 LazyLoad。在页面顶部的 LazyLoad 部分中，单击“启用图像”，然后单击“保存更改”。这就是您需要做的全部。现在，您的网站将为访问者延迟加载图像。

与对网站的任何更新或更改一样，了解任何冲突非常重要。因此，如果您发现启用延迟加载破坏了您网站上的任何内容，请查看此延迟加载常见问题列表。

延迟加载功能将被排除在由 Revolution Slider 和 Envira Gallery 等插件添加的图像之外，这可能会导致冲突。这是兼容插件的完整列表。

与 WordPress 的原生实现不同，LazyLoad 支持其他 HTML 元素（例如 iframe 和视频）的延迟加载。如果背景图像内联应用于特定的 HTML 元素，它还会延迟加载背景图像。

如果您想使用 WordPress 的原生图像延迟加载，您可以禁用 WP Rocket 中的 LazyLoad 选项。但是，某些浏览器尚不支持新的加载属性。另外，WordPress 仅将其实施重点放在图像上。如果您的网站包含许多图像、视频和嵌入内容，那么 WP Rocket 的 LazyLoad 仍然是更好的整体选择。  

如何使用 WP Rocket 启用本机延迟加载

即使 WP Rocket 不包括使用本机延迟加载自动兼容 Chrome 浏览器，您也可以选择支持 Chrome 的本机延迟加载：您可以通过辅助插件启用它。

使用此帮助插件，您可以确保：

• 您的所有图像都将具有必要的 HTML 标记，以利用本机延迟加载；
• 兼容的Chrome浏览器将自动使用本机延迟加载；
• 所有其他人将自动使用 WP Rocket 的 LazyLoad。

您可以继续享受我们强大的 LazyLoad 系统，也可以决定使用 Chrome 的本机延迟加载。

在您的网站上测试这两种解决方案，然后决定最合适您网站的解决方案。

如何在 WordPress 上延迟加载背景图像

如上所述，背景图像可能是延迟加载不起作用的原因。 

延迟加载背景图像的最简单方法是使用 WP Rocket 等插件。 

只要背景样式内联包含在以下元素的 HTML 中，WP Rocket 支持背景图像的延迟加载： 

• div
• span
• section
• li
• figure
• a

这是兼容标记的示例：

<div style="background-image: url(image.jpg)">

您可以在这里阅读有关使用 WP Rocket 延迟加载背景图像的更多信息。

如果您使用 Elementor，可以尝试Lazy Load Elementor Background Images插件。

WooCommerce 的延迟加载

WooCommerce 延迟加载的工作方式与任何其他延迟加载相同。只要您按照上面的说明应用延迟加载，您的 WooCommerce 产品图片或视频就会被延迟加载。您可以按照指南轻松启用和禁用延迟加载。

因此，您还应该记住，任何高于阈值的内容都不会被延迟加载。

如何在 WordPress 上延迟加载视频

如果您想在 WordPress 网站上延迟加载视频，可以使用Velocity或Lazy Load for Videos等插件。请注意，这些插件只能延迟加载 YouTube 和 Vimeo 上托管的视频。

如果您想延迟加载 MP4 视频，可以使用“preload”和“poster”属性进行延迟加载。您可以通过Google 的专门文章了解更多信息。

---

如何在 WordPress 中禁用延迟加载 

WP Rocket 的延迟加载功能不仅仅是打开和关闭它。该插件包括用于删除特定帖子和图像的延迟加载以及手动将延迟加载应用于特定图像的选项。 

例如，此选项可能会派上用场，以禁用折叠上方特定图像的延迟加载并提高最大内容绘制分数。

此外，通过一些代码，您可以进一步自定义插件，为延迟加载图像添加淡入效果。

在特定帖子和页面上禁用 LazyLoad

您不想在某个帖子或页面上使用延迟加载吗？无论出于什么原因，关闭都很容易。

要禁用特定帖子或页面上的延迟加载，请打开该帖子或页面，然后在“缓存选项”元框中取消选中“LazyLoad for images”选项。不要忘记发布或更新帖子或页面以保存您的更改。

使用代码禁用延迟加载

如果您想更好地控制网站上延迟加载的工作方式，您可以使用代码连接到 WP Rocket。虽然将代码片段粘贴到主题的functions.php 文件中是自定义主题的简单方法，但这也是不好的做法。WP Rocket 的开发人员建议创建自定义 MU 插件。这很简单 –您可以在此处阅读更多相关信息。

设置 MU 插件后，您可以粘贴以下任何代码片段。

禁用所有页面上的延迟加载

如果您想延迟加载帖子而不是页面的图像，则此代码段非常有用。

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );

function __deactivate_rocket_lazyload_if_page() {
    if ( is_page() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}

禁用主页上的延迟加载

此代码段将禁用网站首页的延迟加载（您在“设置”>“阅读”>“首页”中设置的页面）。

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );

function __deactivate_rocket_lazyload_if_page() {
    if ( is_front_page() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
     }
}

禁用博客页面上的延迟加载

此代码段将禁用您设置为博客主页的页面（您还在“设置”>“阅读”>“首页”中设置的页面）的延迟加载。

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );

function __deactivate_rocket_lazyload_if_page() {
    if ( is_home() ) {
	add_filter( 'do_rocket_lazyload', '__return_false' );
     }
}

禁用单个帖子上的延迟加载

如果您想禁用所有单个帖子的延迟加载，但保持页面和博客主页启用延迟加载，请使用以下代码段：

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );

function __deactivate_rocket_lazyload_if_page() {
    if ( is_single() ) {
	add_filter( 'do_rocket_lazyload', '__return_false' );
     }
}

对特定图像禁用 LazyLoad

您可以使用 data-no-lazy 属性禁用特定图像的延迟加载：

<img src="my-image.jpg" data-no-lazy="1" alt="" width="100" height="100" />

延迟加载图像的淡入效果

当您延迟加载图像时，当您的图像突然出现在页面上时，访问者可能会感到有点不舒服。幸运的是，通过一些微妙的效果，您可以提供更愉快的用户体验。

图像淡入淡出是与延迟加载搭配使用的一种流行效果。以下 CSS 片段将为您的网站添加淡入效果。只需将代码粘贴到您的 style.css 中（不要忘记先创建一个子主题！）：

/* Image with ‘data’ attribute is hidden */

img[data-lazy-src] {
	/* we set the opacity to 0 */
	opacity: 0;
}

/*Image without ‘data’ attribute is (or becomes) visible */

img.lazyloaded {
	/* prepare the future animation */
	transition: opacity .5s linear 0.2s;

	/* we set the opacity to 1 to do the magic */
	opacity: 1;
}

注意：仅当访问者的浏览器支持 CSS3 转换属性时，此代码段才有效。否则，代码将不会执行任何操作。