使用延迟加载修复 WordPress 中的延迟离屏图像

大多数内容网站都充斥着大量的多媒体内容,无论是图形、图像还是视频。 虽然这些类型的内容提供了极好的美学吸引力和独特的信息传递形式,但缺点是它们在您的网页上占据了相当大的权重。 这反过来导致最终用户必须下载和呈现大量资源才能访问它们。 不幸的是,这包括最初在屏幕上不可见的文件。 这就是延迟加载发挥作用的地方,它只在需要时加载媒体。 在本文中,我们将探讨如何使用延迟加载技术修复 Google PageSpeed Insights 工具的建议,例如在 WordPress 中延迟屏幕外图像。

什么是延迟加载技术?

当任何用户打开它时,您的网页上有两个部分:

  • 首屏或 ATF – 这是屏幕上可见的区域,Googlebot 等爬虫会在 Google PageSpeed Insights 屏幕截图中向您显示。 请记住,首屏区域在移动设备和桌面设备上会有所不同。 这就是您将获得不同的移动和桌面速度分数的原因。
  • 首屏下方 – 这是您网页上初始加载时不可见的区域。

整个 WordPress 优化都是关于优化在折叠区域上方加载的文件。 无论是移除渲染阻塞资源、移除未使用的 CSS/JS 还是减少总阻塞时间,都是为了优化快速加载页面首屏内容所需的资源。 延迟加载就是这样一种优化过程,它最初加载仅在首屏可见的媒体文件。 但是,除非使用其他技术,否则它不会止步于此。 延迟加载还会延迟页面上的所有媒体文件,包括折叠区域下方的媒体文件,并且仅当用户滚动到网页中的该位置时才呈现它们。 这将大大提高您的网站速度和加载时间,从而带来更好的用户体验。

延迟加载是一种内容加载功能,可确保您的网站仅将媒体内容加载到已向下滚动到的页面部分,从而提高网站性能和页面加载时间。

检查 Google PageSpeed Insights 工具中的错误

Google PageSpeed Insights (PSI) 是网站管理员用来衡量其网站速度的最流行的工具之一。 由于页面体验和速度是排名信号的一部分,因此所有网站所有者都有必要衡量其网站的速度并在需要时采取必要的措施。 以下是 Google PSI 工具中显示的“延迟屏幕外图像”机会消息的示例。

在 PSI 中延迟离屏图像
在 PSI 中延迟离屏图像

如果您使用 FCP、TBT、LCP 和 CLS 过滤结果,您会惊讶地发现延迟离屏图像不属于这些组中的任何一个。 但是,尽管您会看到一条消息表明机会不会直接影响性能得分,但修复问题会大大提高您的速度得分。

什么时候需要延迟加载?

WordPress 中的许多用户只是使用插件为所有媒体文件启用延迟加载。 如上所述,您只需要延迟加载折叠图像下方,而不需要在初始加载期间加载折叠上方所需的媒体文件。 以下是您需要延迟加载的一些示例:

  • 评论和作者简介框中显示的 Gravatar 图片。
  • 相关帖子或任何其他缩略图从屏幕上加载。
  • 非首屏可用的 iframe 内容、图库和滑块图像。
  • 用户在初始加载时看不到大型信息图表图像和 YouTube 视频预览图像。

如您所见,您不仅需要延迟加载图像文件,还需要延迟加载 iframe 内容和视频。 据说在某些情况下您需要从延迟加载中排除以避免在 Google PSI 工具中看到另一个问题。

  • 在折叠区域上方加载的桌面和移动设备上的徽标图像。
  • 标题导航菜单中使用的小图标和 SVG 图像。
  • 在网页的标题部分加载的任何其他较小的图像。

然而,这个逻辑有一个例外——最大的内容绘画图像。 Lat 说,您在标题部分有一个背景图像,它的大小非常大,如 1MB。 您需要延迟加载此背景图像,尽管它位于可见区域,以避免在 Google PSI 工具中看到“Largest Contentful Paint image was not lazily loaded”警告。

在 WordPress 中延迟加载

所以,既然我们知道延迟加载是什么以及为什么它是必要的,那么是时候了解如何在您的 WordPress 网站中实施了。 有几种方法可以做到这一点,在本教程中,我们将介绍几个不同的插件来帮助您实现这一目标。 请注意,一些插件具有延迟加载排除选项,而许多插件不提供此功能。 如上所述,如果您在折叠区域上方有文本徽标并且没有其他图像,我们建议使用没有任何排除选项的简单插件。 否则,您需要尝试一个插件,该插件提供从延迟加载中排除图像列表的功能。

1. WP Rocket 的延迟加载插件

这个插件无疑是最好的,迄今为止已经有超过 100K+ 的活跃安装。 它由 WP Rocket 开发,很容易成为最好的 WordPress 网络性能插件。 通过这个插件,您不仅可以优化图像,还可以用预览缩略图替换 YouTube iframe。 这将进一步降低页面重量,并在此过程中提高页面加载速度。

由于这是 WordPress 存储库中可用的免费插件,您可以通过导航到“插件 > 添加新”部分从 WordPress 管理仪表板安装它。 只需在搜索框中输入“Lazy Load”,即可找到 WP Rocket 开发的插件。

搜索延迟加载插件
搜索延迟加载插件

安装然后激活插件,方法是首先单击“立即安装”按钮,然后单击“激活”按钮。 转到“设置 > 延迟加载”菜单以访问插件的设置页面。 单击复选框以对图像、iframe 和视频应用延迟加载,并用缩略图替换 YouTube 视频。

更新延迟加载设置
更新延迟加载设置

退出前单击页面左下方的“保存更改”按钮。 仅此而已,插件将为您完成剩下的工作。 该插件现在仅在最终用户可见时才会在页面上显示图像、iframe 和视频,从而减少带宽使用并缩短加载时间。 虽然 Lazy Load 插件只需点击几下即可简单使用,但它不提供排除功能。 为此,您可能需要完整的 WP Rocket 高级插件,包括缓存功能以改善您网站的整体 SEO 健康状况。 如果您使用的是 WP Rocket,请转到“媒体”部分并为图像、iframe 和 YouTube 图像预览启用延迟加载。

WP Rocket Premium 中的延迟加载媒体
WP Rocket Premium 中的延迟加载媒体

如果您已经有一个缓存插件并想尝试另一个性能优化插件,那么 Perfmatters 是完美的选择。 它还提供延迟加载,只需点击几下即可启用图像、YouTube 预览缩略图、iframe 和视频。 您可以在插件的“选​​项 > 延迟加载”部分下启用这些选项。

使用 Perfmatter 进行延迟加载
使用 Perfmatter 进行延迟加载

2. 使用 Smush 插件进行延迟加载

这是另一个可以为您的内容延迟加载需求创造奇迹的插件。 Smush 插件可能以其图像压缩和优化功能而闻名,但该插件还提供延迟加载等功能。 该插件的安装量已超过一百万,是 WordPress 最好的以 SEO 为中心的插件之一。 首先,从免费的 WordPress 存储库中找到并安装插件。

找到并安装 Smush 插件
找到并安装 Smush 插件

使用 Smush 启用延迟加载

激活插件后,您将看到一个设置向导,引导您完成所有功能。 您可以从设置向导启用延迟加载或暂时跳过此步骤。

使用 Smush 设置向导启用延迟加载
使用 Smush 设置向导启用延迟加载

通过单击 WordPress 管理仪表板面板中的“Smush > Lazy Load”菜单项,转到 Smush 插件控制面板。

在 Smush 中打开延迟加载
在 Smush 中打开延迟加载

如果您没有从设置向导激活,您可以在这里激活延迟加载功能,您现在可以对您网站的延迟加载配置进行自定义更改。 与 WP Rocket 插件的 Lazy Load 不同,您可以使用 Smush 插件选择媒体类型和媒体输出。 默认情况下,所有媒体类型(如 .png、.jpeg 等)和所有媒体输出(如内容、小部件、缩略图和 Gravatars)都将启用延迟加载。 如果您有任何特定偏好,请取消选择您不想应用延迟加载的选项。

接下来是很酷的部分; 您可以选择要显示的加载图像的方式以及要显示的动画类型。 插件提供的不同选项是:

  • 淡入: 此功能将在加载后延迟时间后显示图像。
  • 微调器: 将在图像延迟加载的位置显示微调动画。 您可以使用其中一种预设微调器 Gif 或上传您的 Gif,例如您的公司徽标。
  • 占位符: 顾名思义,您还可以在延迟加载时显示占位符图像而不是实际内容。 与以前一样,您可以使用提供的模板中的一个或上传您自己的模板。
  • 没有任何: 这里不会应用任何花哨的东西,图像会在加载后立即显示。
更新 Smush 上的设置
更新 Smush 上的设置

排除和其他 Smush 设置

如前所述,您需要延迟加载排除项以排除特定项目,并且 Smush 提供了许多甚至高级插件也不提供的选项。 您可以根据帖子类型、页面/帖子 URL 和 CSS 类/ID 进行排除。

  • 通过关闭这些选项,这对于排除所有档案或仅排除首页非常有用。
  • 某些页面内容(如带有过滤器的投资组合页面)可能无法通过延迟加载正常工作。 您只需输入页面 URL 并将其从延迟加载中排除。
  • 最后,对于您的徽标和标题图片等项目,您可以使用相应的 CSS 类或 ID 并从延迟加载中排除。
Smush 中的延迟加载排除
Smush 中的延迟加载排除

除了上述配置选项外,您还可以更改加载脚本的位置、启用对本机浏览器加载的支持以及在延迟加载期间禁用 Noscript。 通常,您可以为脚本使用页脚位置并禁用本机和非脚本选项。

Smush 中的附加延迟加载功能
Smush 中的附加延迟加载功能

更新设置后,单击页面右下角的“保存更改”以应用您刚刚选择的延迟加载设置。

  如何在 Weebly 中上传徽标并添加替代文本?

3. 使用 SiteGround 优化器

我们列表中的这个插件仅适用于 SiteGround 托管用户。 由于 SiteGround Optimizer 插件拥有超过 100 万活跃用户,我们将为 SiteGround 用户介绍这一点。

  • SG Optimizer 默认情况下随 SiteGround 中的所有 WordPress 安装一起提供。 因此,您将预装此插件,无需再次安装。
  • 转到“SG Optimizer”菜单并导航到“Media”部分。
  • 向下滚动到“媒体优化”部分并启用“延迟加载媒体”选项。
  • 您还排除了本节下的 CSS 类和媒体类型。
SiteGround 优化器中的延迟加载
SiteGround 优化器中的延迟加载

不幸的是,当您从子域托管媒体文件时,SiteGround Optimizer 中的延迟加载将不起作用。 这将造成跨源资源共享 (CORS) 违规并阻止插件中的资产,您将看到空白而不是图像。 因此,在使用 SiteGround Optimizer 插件启用延迟加载功能后,请确保清除缓存并测试图像是否正常工作。

4. 使用 Jetpack 进行延迟加载

超过 500 万用户使用 Jetpack 来提高其 WordPress 网站的安全性、备份和优化。 如果您使用 Jetpack,请转到“Jetpack > 设置”部分并在“性能”部分下启用图像延迟加载选项。

使用 Jetpack 插件进行延迟加载
使用 Jetpack 插件进行延迟加载

5.其他免费缓存插件

几乎每个优化和缓存插件都提供延迟加载功能,因为在 Google PageSpeed Insights 中获得高页面速度分数很重要。 在这里,我们将提到两个最流行的 WordPress 免费缓存插件。

  • W3 总缓存 – 您可以转到“设置指南”下的“延迟加载”部分以启用延迟加载选项。
启用延迟加载
启用延迟加载
  • 自动优化 – 转到“图像”选项卡并启用延迟加载选项。
自动优化中的延迟加载
自动优化中的延迟加载

测试延迟加载是否适用于您的网站

有两种方法可以测试延迟加载是否在您的站点上成功运行。 第一个选项是在 Google PSI 中测试您的网站并确认“延迟屏幕外图像”显示在“通过审核”部分下。

在通过审核时推迟屏幕外图像
在通过审核时推迟屏幕外图像

下一个选项是检查页面的页面源。 您可以从您使用的插件中找到延迟加载脚本。 此外,检查图像是否包含在延迟加载 CSS 类中。 下面是 WP Rocket 插件的示例,显示图像包含“rocket-lazy-load”CSS 类和“data-lazy-src”参数。

源中的延迟加载参数
源中的延迟加载参数

延迟加载第三方内容

使用来自第三方服务的图像和嵌入视频时,您会在 Google PSI 中看到延迟加载相关问题。 通常,您会在已通过的审核部分看到“Lazy load third-party resources with facades”。 但是您会发现典型的“延迟屏幕外图像”测试在使用 YouTube 视频或横幅广告等第三方嵌入时会失败。

  • 如上所述,您可以用静态预览图像替换嵌入的 YouTube 视频。 然后您可以延迟加载此预览图像以解决 Google PSI 工具中的问题。
  • 遗憾的是,对于来自 Google AdSense 广告程序的横幅图片等情况,您无能为力。 由于这些广告是动态加载的,它会在每次页面加载时发生变化,并且没有固定的方法来避免 Google PSI 警告。 但是,有一些 WordPress 主题有助于使用延迟加载和动态加载广告。 下面是 Breek 极简主义主题的主题选项页面,您可以在其中看到 Google AdSense 广告的延迟加载选项。 如文中所述,主题会要求您移除默认广告代码中的广告推送,并在用户到达页面上的位置时动态推送。 我们不建议使用此类功能,因为它会影响您的收入,也可能无法正常工作(无论如何,除了 AdSense 之外,您不能使用此功能)
Breek 延迟加载优化
Breek 延迟加载优化

最后的话

应用延迟加载并不棘手或复杂,通过阅读本文,您也可以立即完成。 确保选择最适合您的情况并且最适合您的插件。 但是,请记住,延迟加载需要在页面页脚部分的插件中包含一个脚本。 有时,此脚本可能会被阻止,并且您的图像不会像上面提到的那样使用 SiteGround Optimizer 加载。 因此,启用延迟加载功能后,请在不同的浏览器中彻底测试您的页面,尤其是具有大量内联 JavaScript 的页面。

类似文章