如何在 WordPress 中启用延迟加载（图像、iframe 和视频）

随着网络上的内容越来越长，利用 WordPress 中的延迟加载等功能来保持您的网站快速运行非常重要。

什么是延迟加载？

延迟加载本质上是延迟图像的加载，直到用户向下滚动页面（图像进入视口）。

为什么这很棒？好吧，假设您有一篇长篇博客文章，其中包含 100 张图片。默认情况下，当有人访问帖子时，浏览器会尝试加载所有 100 张图片。即使使用优化的图像，这也可能需要一段时间，尤其是在移动设备上。

但是，如果您延迟加载图像，它只会将图像加载到访问者可以在浏览器中看到的页面顶部。图片的数量根据浏览器的类型、正在使用的延迟加载类型、视口的大小等而有所不同。但无论如何，这个想法是它通常会立即减少 85% 以上的请求蝙蝠。

懒加载测试

我们对我们的一篇博客文章进行了小测试，以便您看到差异。

不懒加载

这是在我们延迟加载图像之前。如您所见，总共有 56 个请求，总页面大小为 852 KB，加载时间为 1.2 秒。

懒加载

这是在我们启用延迟加载之后。如您所见，请求数下降到 35，总页面大小下降到 245 KB，加载时间下降到 0.8 秒。所以换句话说，仅仅启用延迟加载给了我们一个速度提升 33% 和页面大小减少了 70%.

我们测试的帖子已经相当优化了。如果您延迟加载未优化的图像或页面上有更多图像，您会看到更大的速度提升。

我们的延迟加载是如何工作的

我们使用一个小的 (2.5 KB) 开源 JavaScript 库来延迟加载图像、iframe 等。我们还支持延迟加载 WebP 文件。您将在您的站点上看到对以下文件的请求：

/perfmatters/js/lazyload.min.js

Perfmatters 延迟加载与本机延迟加载

WordPress 5.5 现在默认具有本机延迟加载。但是，我们建议使用 Perfmatters 中的延迟加载解决方案。为什么？我们的解决方案比原生延迟加载更快更好，原因如下：

本机意味着它让浏览器决定应该延迟加载的内容。不幸的是，这是默认情况下的问题，它的方式太热心了. 这可能是一个优势，因为您可能不需要任何排除项，但通常不会有那么多资源会被延迟加载。这意味着它不会那么快。
原生延迟加载正在改进，但仍然缺乏对某些事物的支持。我们一直在为我们的产品添加很多功能，如下所示。

重要的： 启用 Perfmatters 中的延迟加载后，WordPress 中默认的本机延迟加载将自动禁用。

如何在 WordPress 中启用延迟加载

要在 WordPress 中启用延迟加载，请转到 WordPress 管理仪表板中的“Perfmatters”设置。

单击“延迟加载”选项卡。

在延迟加载方面，您有几种不同的选择。它们也可以同时使用。

延迟加载图像
排除主要图片
延迟加载 iframe 和视频
YouTube 预览缩略图

DOM 监控
淡入
CSS 背景图片

延迟加载图像

第一个选项也是最常见的是延迟加载图像。要启用此功能，请打开“图像”选项。这还包括样式属性内的内联背景图像。

排除主要图片

你可以手动排除图像从延迟加载，但有时自动化过程更容易。这就是“排除主要图片”功能发挥作用的地方。这允许您从页面顶部（首屏）开始自动排除一定数量的图像。

重要的： 在估计或测试要排除的图像数量时，请确保您已注销。自动排除不适用于背景图像。

如果您使用我们的预加载关键图像功能，这将自动从延迟加载中排除这些图像。这意味着您可能不需要使用排除领先图像。

延迟加载 iframe 和视频

第二个选项是延迟加载 iframe 和视频。这包括 YouTube、Vimeo、SoundCloud、谷歌地图和任何类型的 iframe。这也适用于使用文件 URL 嵌入的视频 video 标签。

要启用此功能，请打开“iFrames and Videos”选项。

YouTube 预览缩略图

如果您在自己的网站上使用 YouTube 视频，那么启用我们的预览缩略图功能会很有好处。这样做是用预览缩略图和轻量级 SVG 播放图标替换 YouTube iframe。然后在点击时加载 iframe。这是加载 YouTube 视频的最快方式.

在我们对视频的性能测试中，我们看到此功能将网站的速度提高了 64%。它还将总页面大小减少了 58%。这太不可思议了。

前：加载时间为 1.93 秒，总页面大小为 691 KB。
之后（延迟加载）： 0.72 秒的加载时间，总页面大小为 288 KB。

YouTube 上使用的缩略图是会自动拉取的预览图像。这只是下面的一个例子。

要启用此功能，请打开“YouTube 预览缩略图”选项。 笔记： 这确实需要 iFrame 和视频在 Perfmatters 中启用。

YouTube 预览缩略图质量过滤器

默认情况下，会从 YouTube 提取低分辨率图像作为缩略图。我们有一个过滤器，您可以使用它来更改缩略图的质量。这 maxresdefault 如果可用，属性将提取最高质量。确保您的 YouTube 缩略图至少为 1280 x 720 像素。看看这个伟大的指南如何调整 YouTube 缩略图的大小.

add_filter('perfmatters_lazyload_youtube_thumbnail_resolution', function($resolution) {
return 'maxresdefault';
});

您还可以使用 wp_is_mobile 功能可在移动设备上显示低分辨率图像，同时在桌面上显示高分辨率缩略图。

add_filter('perfmatters_lazyload_youtube_thumbnail_resolution', function($resolution) {
if(!wp_is_mobile()) {
$resolution = 'maxresdefault';
}
return $resolution;
});

DOM 监控

DOM 监控监视 DOM 的变化并动态延迟加载新添加的元素。这提高了在加载页面时使用无限滚动的第三方插件和主题的兼容性。

要启用此功能，请打开“DOM 监控”选项。

笔记： 如果您不使用无限滚动，我们不建议启用此选项。

从延迟加载中排除图像

有时您可能希望从延迟加载中排除特定图像。有几种方法可以做到这一点。

排除使用 Perfmatters UI

最简单的方法是使用 Perfmatters 中的 UI。通过添加源 URL (example.png) 或添加其属性字符串的任何唯一部分 (class=”example”) 来排除元素。格式：每行一个

如果你有一个像 ShortPixel 或 Imagify 这样的插件来提供 WebP 图像，你可能需要定位标签。

这里有几个例子：

如果您使用的是 GeneratePress 之类的主题，并且希望将徽标从延迟加载中排除，您可以添加他们的 is-logo-image 班级。
如果您想从博客文章中的延迟加载中排除特色图片，您可以使用它们的缩略图类，例如 class="attachment-full size-full.

非懒惰的 CSS 类

如果您有权将 CSS 类添加到要排除的特定图像，只需添加 no-lazy 类，并且在为延迟加载准备文档时应该忽略它。

perfmatters_lazyload_excluded_attributes 过滤器

如果您要排除的图像难以直接访问和操作，我们有一个可用的 WordPress 过滤器，可用于添加特定于相关图像的任何属性或属性部分。

在下面的示例中，我们的目标是任何包含 title="Perfmatters" 属性或部分 class="size-full 属性。这简直是一个字符串匹配，因此任何属性的任何部分都应该起作用，它只需要与您要排除的图像或图像完全匹配。

function perfmatters_lazyload_exclude_attributes($attributes) {
     $attributes[] = "title="Perfmatters'";
     $attributes[] = "class="size-full";

     return $attributes;
}
add_filter("perfmatters_lazyload_excluded_attributes', 'perfmatters_lazyload_exclude_attributes');

下面是一个基于排除的示例图片文件名匹配.

function perfmatters_lazyload_exclude_attributes($attributes) {
     $attributes[] = 'src="https://domain.com/image.png"';

     return $attributes;
}
add_filter('perfmatters_lazyload_excluded_attributes', 'perfmatters_lazyload_exclude_attributes');

此过滤器有多种使用方式，如有任何问题，请与我们联系。

从延迟加载中排除页面/帖子

您可以从延迟加载中排除单个帖子、页面或自定义帖子类型。在编辑器中，在右侧取消选中“延迟加载”。这将从脚本中排除整个页面。

如何更改视口阈值

如果需要，您可以扩展延迟加载阈值，允许图像在视口中可见之前加载。默认情况下，它是 0px，这是最具侵略性和最佳性能的。但是，有些人可能更喜欢增加它，因为它可以使滚动更平滑一些。或者换句话说，当您向下滚动页面时，弹出的图像将会减少。

阈值字段接受 px 或 %。

您还可以使用以下过滤器更改延迟加载的视口阈值。它接受 px 或者 %.

add_filter('perfmatters_lazyload_threshold', function($threshold) {
 return '500px';
});

淡入

一些用户喜欢在向下滚动页面时对图像产生淡入效果。这为图像创建了更平滑的过渡，而不是在延迟加载后立即弹出。要启用此功能，请打开“淡入”选项。

如果你想改变淡入淡出的过渡速度，你可以用我们的 #perfmatters_fade_in_speed 筛选。

CSS 背景图片

Perfmatters 支持延迟加载内联背景图像，无需任何额外配置。但是，某些页面构建器、主题和插件会在其 (CSS) 样式表中加载背景图像。 Perfmatters 无法更改其 CSS 的内容，但我们可以阻止某些容器立即在浏览器中加载其背景图像。这使您可以在 GenerateBlocks、Elementor、Oxygen、Divi、Beaver Builder 等中延迟加载 CSS 背景图像。

要启用此功能，请打开“CSS 背景图像。

在背景选择器框中，输入在包含背景图像的容器上找到的特定 ID 或类。格式：每行一个。如果您有权向容器本身添加其他类，则可以改为添加我们的 perfmatters-lazy-css-bg 班级。

强制元素延迟加载

有时，来自另一个插件或主题的元素已经应用了排除类或属性，这会阻止我们的延迟加载默认拾取它。如果发生这种情况，您可以使用以下过滤器强制该元素延迟加载。

perfmatters_lazyload_forced_attributes 过滤器

这个过滤器可以像在排除属性示例中一样使用，但是当一个元素包含一个包含的属性时，我们的惰性加载器将跳过检查该项目的排除项并继续尝试延迟加载该元素。

function perfmatters_lazyload_force_attributes($attributes) {
     $attributes[] = "title="Perfmatters"";
     $attributes[] = "class="size-full";

     return $attributes;
}
add_filter("perfmatters_lazyload_forced_attributes', 'perfmatters_lazyload_force_attributes');

故障排除

如果启用延迟加载时您的图像未加载并且图像的源如下所示，则意味着您可能正在推迟我们的延迟加载脚本。

data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox='0'%0%0/svg

要解决此问题，您需要排除 /perfmatters/js/lazyload.min.js 从推迟。

如果您尝试在 Elementor、Beaver Builder 或 Oxygen 等页面构建器中延迟加载背景图像，请参阅此背景图像技巧.