Perfmatters - 如何在 WordPress 中开启延迟加载 (图片, 框架, 和视频)

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');

启用延迟加载

推荐广告

第一个选项，也是最常见的，是延迟加载图像。

要启用此功能，请切换“图像”选项。这还包括样式属性内的内联背景图像。

延迟加载测试

推荐广告

我们在我们的一篇博客文章上做了一个小测试，这样你就可以看到区别了。

使用了延迟加载

这是在我们启用延迟加载之后。如您所见，请求数降至35，总页面大小降至245KB，加载时间降至0.8s。

换句话说，只要启用延迟加载，我们的速度提高了33%，页面大小减少了70%。(如上图)

未使用延迟加载

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

我们测试的文章已经相当优化了。

如果您懒得加载未优化的图像或页面上有更多图像，您将看到更大的速度提升。

排除前导图像

您可以手动从延迟加载中排除图像，但有时更容易自动化该过程。

这就是“排除主要图像”功能发挥作用的地方。

这允许您从页面顶部（折叠上方）开始自动排除一定数量的图像。

重要提示：在估计或测试要排除的图像数时，请确保您已注销。

自动排除不适用于背景图像。

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

延迟加载框架和视频

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

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

YouTube 预览缩略图

如果您在您的网站上使用 YouTube 视频，启用我们的预览缩略图功能将非常有利。这样做的目的是用预览缩略图和轻量级 SVG 播放图标替换 YouTube iFrame。然后在单击时加载 iframe。

这是加载 YouTube 视频的最快方式。

在我们的视频性能测试中，我们看到该功能将网站速度提高了64%。它还将总页面大小减少了58%。真是难以置信。

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

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

最简单的方法是在事务中使用 UI。通过添加源 URL（example.png）或添加其属性字符串的任何唯一部分（class=“example”）来排除元素。

格式：每行一个

如果您有一个像 ShortPixel 或 Imagify 这样的插件来提供 WebP 图像，那么您可能需要将＜picture＞标记作为目标。

这里有几个例子：

如果您正在使用像 GeneratePress 这样的主题，并且希望从延迟加载中排除徽标，则可以添加他们的 is-logo-image 类。
如果您想从博客文章的延迟加载中排除特色图像，可以使用它们的缩略图类，例如 class=“attachment full size full”。

no-lazy CSS 类别

如果您有权向要排除的特定图像添加 CSS 类，只需添加 no-lazy 类，当文档准备加载时，应该忽略该类。

perfmatters_lazyload_excluded_attributes 筛选器

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

在下面的示例中，我们针对的是包含 title='perfmattents' 属性或 partial 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');