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.
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.
[ux_image id=”8510″]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.
[ux_image id=”8511″]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.
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.
Upon activation, you need to visit the Settings » BJ Lazy Load page to configure plugin settings.
[ux_image id=”8512″]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.
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.
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.