如何在 WordPress 中轻松延迟加载图像(2 种方式)

技术教程 2025年3月18日
1488 0

您想学习如何在 WordPress 中延迟加载图像吗?

延迟加载允许您的网站仅在用户向下滚动到特定图像时加载图像，从而减少网站加载时间并提高网站性能.

大多数流行的图片较多的网站都使用延迟加载来提高网站速度和性能.

在本文中，我们将逐步向您展示如何轻松地在 WordPress 中延迟加载图像.

How to lazy load images in WordPress easily (2 ways)

为什么要在 WordPress 中延迟加载图片?

延迟加载您的 WordPress 图片可以加速您的网站并提供更好的用户体验.

没有人喜欢慢速网站.事实上，一项性能研究发现，页面加载时间每延迟一秒，转化次数就会减少 7%，页面浏览量会减少 11%，客户满意度会降低 16%.

Strangeloop Study

Google 等搜索引擎也不喜欢加载缓慢的网站.这就是速度越快的网站在搜索结果中排名越高的原因.

与其他网络元素相比，图像在您的网站上加载所需的时间最长.如果您在文章中添加大量图片，那么每张图片都会增加您的页面加载时间.

处理这种情况的一种方法是使用 CDN 服务，例如 BunnyCDN.CDN 可以让用户从离他们最近的网络服务器下载图像，并降低网站加载速度.

但是，您的图片仍会被加载并影响整体页面加载时间.为了解决这个问题，您可以通过在您的网站上实施延迟加载来延迟图片加载.

图片的延迟加载是如何工作的?

延迟加载不是一次性加载所有图片，而是只下载用户屏幕上可见的图片.它用占位符图像或空白区域替换所有其他图像.

当用户向下滚动时，您的网站会加载在浏览器查看区域中可见的图像.

延迟加载对您的 WordPress 博客非常有益.

  • 它减少了初始网页加载时间，因此用户会更快地看到您的网站
  • 它通过仅提供可查看的图像来节省带宽，并可节省托管成本

WordPress 5.5 的发布添加了延迟加载作为默认功能.

但是，如果您想自定义图像延迟加载和背景图像延迟加载的方式，则需要使用 WordPress 插件.

注意:虽然延迟加载有助于提高网站加载速度，但在上传到 WordPress 之前，您应该始终针对网络优化图片以获得最佳性能.

有关更多详细信息，请参阅我们的指南，了解如何在不降低质量的情况下优化图像以提高网络性能.

我们将分享两个不同的 WordPress 插件，它们可以帮助您轻松设置 WordPress 图片的延迟加载.您可以使用下面的快速链接直接跳转到您想要使用的方法.

  • 使用 WP Rocket 延迟加载 WordPress 图像
  • 使用 Optimole 延迟加载 WordPress 图片

方法 1.使用 WP Rocket 在 WordPress 中延迟加载图像

我们建议使用 WP Rocket 插件在 WordPress 中延迟加载图像.它是市场上最好的 WordPress 缓存插件，可让您轻松开启图片延迟加载.

除此之外，它还是一个非常强大的插件，可以帮助您优化网站速度，而无需了解复杂的技术术语.

开箱即用，所有默认推荐的缓存设置都将大大加快您的 WordPress 网站速度.

要启用图像延迟加载，您只需选中几个框即可.您甚至可以为视频启用延迟加载，这将进一步提高您的网站速度.

WP Rocket lazy load images

有关更多详细信息，请参阅有关如何在 WordPress 中正确安装和设置 WP Rocket 的指南.

注意:如果您使用 Siteground 作为 WordPress 托管服务提供商，那么您可以使用具有类似延迟加载功能的免费 SiteGround Optimizer 插件.

方法 2.使用 Optimole 在 WordPress 中延迟加载图像

此方法使用免费的 Optimole 插件.它是最好的 WordPress 图像压缩插件之一，可让您轻松启用图像延迟加载.

如果您每月有超过 5,000 名访问者，那么您将需要高级版.

首先，您需要安装并激活插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，转到媒体» Optimole，然后您需要注册一个 API 密钥.

Sign up for API key

只需点击"注册和"电子邮件 API 密钥"，它将通过电子邮件发送给您.

然后，输入您的 API 密钥并点击"连接到 Optimole 服务".

Enter API key

之后，点击"设置"标签.

在这里您可以确保'缩放图像和 &延迟加载'设置已启用.这将根据访问者的屏幕尺寸生成图像并提高加载速度.

Lazyload settings

接下来，点击"高级"菜单选项并选择"延迟加载".

在此屏幕上，有一些不同的设置可让您自定义图像延迟加载的方式.

首先，您可以调整"从延迟加载中排除第一个图像数量"设置.这将阻止您的帖子或页面顶部的图像延迟加载，因此折叠上方的图像将始终显示.

Exclude images to lazy load

如果您希望每个图像都延迟加载，您可以将其设置为 0.

接下来，您可以启用"缩放图像"滑块.

Enable scale images

这会将图像缩放到访问者的屏幕尺寸，并使您的页面加载速度更快.

之后，您可以打开"为背景图像启用延迟加载"设置.

Lazy load background images

这将延迟加载您的背景图片，这些图片可能是您网站上一些最大的图片.

您可以启用的另一个设置是延迟加载嵌入式视频和 iframe.如果您有很多嵌入的视频内容，那么您需要开启此设置.

Lazy load video

这将加载一个占位符图像来代替视频.点击后，将加载完整视频.

您可以继续自定义这些设置，看看哪些设置最适合您的网站和图片.

在退出插件设置之前，请务必点击"保存更改"按钮.

我们希望本文能帮助您了解如何在 WordPress 中延迟加载图像.您可能还想查看我们的图像 SEO 初学者指南，以优化搜索引擎的图像，以及我们为小型企业选择的最佳电子邮件营销服务专家.

WordPress(893)加载(14)延迟(1)
♥赞4

相关文章

发表回复