您想了解如何在 WordPress 中延迟加载图像吗?
延迟加载允许您的网站仅在用户向下滚动到特定图像时加载图像,这减少了网站加载时间并提高了网站性能。许多流行的图像密集型网站使用延迟加载来提高网站速度和性能。
在本文中,我们将逐步向您展示如何在 WordPress 中轻松延迟加载图像。
为什么在 WordPress 中延迟加载图像?
延迟加载 WordPress 图像可以加快您的网站速度并提供更好的用户体验。
没有人喜欢缓慢的网站。事实上,一项性能研究发现,页面加载时间延迟 1 秒会导致转化次数减少 7%,综合浏览量减少 11%,客户满意度下降 16%。
像谷歌这样的搜索引擎也不喜欢加载缓慢的网站。这就是为什么速度较快的网站在搜索结果中排名较高的原因。
与其他网络元素相比,图像在网站上加载所需的时间最长。如果您在文章中添加大量图像,那么每个图像都会增加页面加载时间。
处理这种情况的一种方法是使用CDN 服务,例如BunnyCDN。CDN 将允许用户从距离他们最近的网络服务器下载图像并降低网站加载速度。
但是,您的图像仍将被加载并影响整个页面加载时间。要解决此问题,您可以通过在网站上实现延迟加载来延迟图像加载。
图像延迟加载是如何工作的?
延迟加载不是一次加载所有图像,而是仅下载用户屏幕上可见的图像。它将所有其他图像替换为占位符图像或空白区域。
当用户向下滚动页面时,您的网站会加载在浏览器查看区域中可见的图像。
延迟加载对您的WordPress 博客非常有益:
- 它减少了初始网页加载时间,以便用户更快地看到您的网站。
- 它通过仅传送查看的图像来节省带宽,这可以节省您的WordPress 托管成本。
WordPress 5.5的发布添加了延迟加载作为默认功能。
但是,如果您想自定义图像延迟加载以及延迟加载背景图像的方式,那么您将需要使用 WordPress 插件。
让我们看一下如何使用两个不同的插件在 WordPress 中延迟加载图像。您可以使用下面的快速链接直接跳转到您要使用的方法:
方法 1:使用 WP Rocket 在 WordPress 中延迟加载图像
我们建议使用WP Rocket插件在 WordPress 中延迟加载图像。它是市场上最好的 WordPress 缓存插件,可让您轻松打开图像延迟加载。
除此之外,它是一个非常强大的插件,可以帮助您优化网站速度,而无需了解复杂的技术术语或配置专家设置。
开箱即用,他们所有默认推荐的缓存设置将大大加快您的WordPress 网站的速度。
您需要做的第一件事是安装并激活WP Rocket插件。有关更多详细信息,您可以参阅我们有关如何安装 WordPress 插件的指南。
要启用图像延迟加载,您只需选中几个复选框即可。您甚至可以启用视频延迟加载,这将进一步提高您的网站速度。
您所需要做的就是转到WordPress 仪表板中的设置 » WP Rocket,然后单击“媒体”选项卡。然后,您可以滚动到“LazyLoad”部分并选中“启用图像”和“启用 iframe 和视频”旁边的框。
有关更多详细信息,请参阅有关如何在 WordPress 中正确安装和设置 WP Rocket 的指南。
注意:如果您使用Siteground作为 WordPress 托管提供商,则可以使用具有类似延迟加载功能的免费SiteGround Optimizer插件。
方法 2:使用 Optimole 在 WordPress 中延迟加载图像
此方法使用免费的Optimole插件。它是最好的 WordPress 图像压缩插件之一,可让您轻松启用图像延迟加载。
如果您每月的访问量超过 5,000 名,那么您将需要Optimole 的高级版本。
首先,您需要安装并激活 Optimole 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后,您将看到一个屏幕,要求您注册 API 密钥。您还可以通过导航到管理菜单中的Optimole来找到此屏幕。
您需要确保列出的电子邮件地址正确,然后单击“创建并连接您的帐户”按钮。或者,如果您是现有用户,则只需单击“我已经有 API 密钥”按钮。
当插件连接到 Optimole 时,您可能需要等待几秒钟。之后,该插件将自动开始优化您的图像,以便您的访问者现在可以看到适合其设备的最佳图像。
发生这种情况时,您可以单击“设置”选项卡来配置延迟加载。
在这里,您需要确保启用“缩放图像和延迟加载”设置。这将根据访问者的屏幕尺寸生成图像并提高加载速度。
接下来,单击“高级”菜单选项并选择“延迟加载”。在此屏幕上,有一些不同的设置可让您自定义图像延迟加载的方式。
首先,您可以调整“从延迟加载中排除第一张图像”设置。这将阻止帖子或页面顶部的图像延迟加载,因此折叠上方的图像将始终出现。
如果您希望延迟加载每个图像,可以将其设置为 0。
您可以检查 Optimole 中的其他一些高级延迟加载设置。默认情况下启用这些设置。
第一个是“缩放图像”设置。这会将图像缩放到访问者的屏幕尺寸,并使页面加载速度更快。
之后,您将看到“启用背景图像延迟加载”设置。这将延迟加载您的背景图像,这可能是您网站上最大的图像。
另一个设置是延迟加载嵌入视频和 iframe。如果您有大量嵌入的视频内容,那么您将需要保留此设置。它将加载占位符图像来代替视频。单击占位符后,将加载完整视频。
您可以继续自定义这些设置,看看什么最适合您的网站和图像。
在退出插件设置之前,请确保单击页面底部的“保存更改”按钮。
优化 WordPress 图像的额外提示
虽然延迟加载有助于提高网站加载速度,但还有一些其他方法可以优化 WordPress 图像以获得最佳性能。
例如,我们建议在将图像上传到您的网站之前使用TinyPNG或JPEGmini等工具对其进行压缩。或者,您可以使用自动图像压缩插件,例如Optimole或EWWW Image Optimizer。
为您的图像选择正确的 WordPress 图像大小和文件格式也很重要。JPEG 最适合具有多种颜色的照片或图像,PNG 适合简单或透明图像,GIF 仅适用于动画图像。
我们希望本文能帮助您了解如何在 WordPress 中延迟加载图像。您可能还想查看我们的教程如何在不损失质量的情况下轻松优化网络图像,以及我们专家精选的最佳网页设计软件。