如何在WordPress中延迟加载图像

Do you want to lazy load images in WordPress? Lazy Loading allows your website to only load images when a user scrolls down to the specific image. You can see it in action on many popular websites like Buzzfeed. In this article, we will show you how to easily lazy load images in WordPress.

您要在WordPress中延迟加载图片吗? 延迟加载允许您的网站仅在用户向下滚动到特定图像时才加载图像。 您可以在许多热门网站(例如Buzzfeed)上看到它的运行情况。 在本文中,我们将向您展示如何轻松地在WordPress中延迟加载图像。

Lazy load images in WordPress
为什么在WordPress中延迟加载图像? (Why Lazy Load Images in WordPress?)

No one likes slow websites. A study conducted by Strangeloop found that a 1 second delay in page load time can lead to 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction.

没有人喜欢缓慢的网站。 由Strangeloop进行的一项研究发现,页面加载时间延迟1秒会导致转换损失7%,页面浏览量减少11%以及客户满意度下降16%。

Strangeloop Study

Images take the most time to load on your website compared to anything else. If you add a lot of images to your articles, then each image increases your page load time.

与其他任何图片相比,图片花费最多的时间在您的网站上。 如果您在文章中添加了大量图像,则每个图像都会增加页面加载时间。

One way to deal with this situation, is to optimize images for web and use a CDN service, like MaxCDN. This allows users to download multiple images at once from servers located near them.

解决这种情况的一种方法是优化Web图像并使用CDN服务 (如MaxCDN) 。 这样,用户可以一次从附近的服务器下载多个图像。

List25 lazy load preview

However your images will still be loaded, and it will still affect the overall page load time. To overcome this issue, you can delay images by implementing lazy load for images on your website.

但是,您的图像仍将被加载,并且仍然会影响整个页面的加载时间。 为解决此问题,您可以通过对网站上的图像实施延迟加载来延迟图像。

How does lazy loading for images work?

图像的延迟加载如何工作?

Instead of loading all your images at once, lazy loading downloads only the images that will be visible on users screen. It replaces all other images with a placeholder image.

延迟加载不会立即加载所有图像,而是仅下载在用户屏幕上可见的图像。 它将所有其他图像替换为占位符图像。

As a user scrolls down, your website loads images that are now visible in the browser’s viewing area.

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

That being said, let’s see how to easily setup lazy load for images in WordPress.

话虽如此,让我们看看如何轻松地为WordPress中的图像设置延迟加载。

在WordPress中设置图片的延迟加载 (Setting up Lazy Load for Images in WordPress)

First thing you need to do is install and activate the BJ Lazy Load plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活BJ Lazy Load插件。 有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to visit the Settings » BJ Lazy Load page to configure plugin settings.

激活后,您需要访问设置»BJ延迟加载页面以配置插件设置。

Lazy Load settings

You can apply lazy load to content, text widgets, post thumbnails, gravatars, images, and iframes. You can also upload a custom image to be used as a placeholder image.

您可以将延迟加载应用于内容,文本窗口小部件,发布缩略图,图形,图像和iframe。 您也可以上传自定义图像以用作占位符图像。

This plugin also has an option to show a low resolution version of the image instead of the placeholder image. To use this feature, you will need to regenerate image sizes, so that it can generate a low res version for all your previous uploads.

该插件还可以选择显示低分辨率版本的图像而不是占位符图像。 要使用此功能,您将需要重新生成图像大小 ,以便它可以为以前的所有上载生成低分辨率版本。

Don’t forget to click on the save changes button to store your settings.

不要忘记单击“保存更改”按钮来存储您的设置。

You can now visit your website to see the lazy loading for images in action.

现在,您可以访问您的网站以查看图像的延迟加载。

We hope this article helped you learn how to lazy load images in WordPress. You may also want to check out our ultimate guide to speed up WordPress that contains 19 tips to boost WordPress performance.

我们希望本文能帮助您学习如何在WordPress中延迟加载图像。 您可能还想查看我们的终极指南,以加快WordPress的速度 ,其中包含提高WordPress性能的19个技巧。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-do-lazy-load-images-in-wordpress/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值