Don’t know, how to lazy load images in WordPress Site? You have come to the right place to know all about it.
Lazy load functionality allows your WordPress site or blog to load images from the server, only when a person scrolls down to those specific images. Due to this functionality your blog’s load time is reduced drastically, which in-turn improves the performance.
Websites or blogs that are image heavy can use this functionality to speed up their performance. In this article, we will show you how to easily lazy load images in WordPress site or blog.
Please note that, the release of WordPress 5.5 added the lazy load feature by default. Having said that, if you want to customize how your images lazy load, and lazy load background images, then you’ll need to use a WordPress plugin.
Table of Contents
Why Lazy Loading Of Images Is Required
As you might know that, images take the most time to load as compared to other web elements.
Lazy loading your images can speed up your WordPress website or blog & offer a much better user experience to all the people that visit them.
Websites or blogs that load slow, can kill your money making opportunities.
A research study suggests that a single second delay in the loading time leads to 7% less conversions, 11% fewer page views, and 16% decrease in customer satisfaction.
Besides, search engines like Google do not like slow loading websites or blogs either.
Their algorithm is well equipped to rank the slow loading websites or blogs much lower in the search results.
You can handle this by using a Content Delivery Network (CDN).
But that will solve only half the problem, as the images closer to the location where the audience is viewing them will only load faster.
Images that are at far away location from your audience will still take time to load
This is exactly why, you need the lazy load functionality for your website or blog.
How Does Lazy Loading For Images Work?
Now, when someone requests for a page to be viewed by opening a website or by clicking on a link, that request is sent to the server & then page is retrieved from that server. While this entire process is going on, all the images tend to load at once. This causes the website to load slower.
If a functionality is added to your website or blog which allows all your images to load lazy rather than loading all at once, then it can save a lot of time. So, with lazy load, the website or blog loads images only the audience scrolls down to those images. Not just the time is save in loading your images, but also the bandwidth is saved resulting in reduced hosting costs.
One important thing to remember here is that, though lazy load functionality helps you to improve website or blog’s loading speed, you should always optimize your images before uploading them.
How To Lazy Load Images In WordPress Site
WordPress plugins can help you easily set up lazy loading for images.
In this article we are going to enable the lazy load functionality with the help of two different plugins.
Lazy Loading Of Images With WP Rocket Plugin
WP Rocket is one of the best WordPress caching plugin out there & it let’s you turn on lazy loading feature smoothly. The plugin also helps you optimize your website or blog speed.
To enable image lazy loading, all you have to do is check a few boxes. You can even enable lazy loading for images as well as videos, which will improve your website or blog speed even further.
Install & Activate WP Rocket. In case you don’t know how to install & activate a WordPress plugin, check out our post on How To Install And Activate A WordPress Plugin.
After you have activated the plugin, go to the media section & check all the boxes under LazyLoad.
You are all set & done.
Please Note – If you’re using Siteground as your WordPress hosting provider, then you can use the free SiteGround Optimizer plugin that has similar lazy loading features.
Lazy Loading Of Images With Image Optimization And Lazy Load Plugin
Image optimization & Lazy Load by Optimole plugin is one of the best image compression plugins which allows you to easily lazy load images.
But, if you get a traffic of over 5,000 visitors per month, then you will need the premium version of this plugin.
Install & Activate the plugin.
After you have activated the plugin, go to Media » Optimole and then you need to sign up for an API key.
Click on the Register & Email API key & you will receive it in your email.
Once you have received the key, enter it & Click on Connect to Optimole Service.
After you have entered the key, click on the Settings tab. Now simply enable the Scale images & Lazy load option.
This will generate images based on your visitor’s screen size and improve loading speeds. Now, click on the Advanced menu option and select Lazyload. On this screen, you can customize the options available for lazy loading.
You can put in a value say ‘3‘ for the Exclude first <number> number of images from lazyload setting.
This feature will allow you to stop 3 images at the top from lazy loading, & the remaining images will lazy load.
If you want to lazy load all the images the put the value as ‘0‘.
You can also enable the Scale Images, Enable lazyload for background images & Enable images for embedded videos and iframes options.
After you have enables the required options, don’t forget to Save them before exiting the plugin.
Conclusion
Even though WordPress has the lazy load functionality in their newer versions, its still crude. You can use the above mentioned plugins to gain full control over all the settings & customize it as you want.
We hope you like this article & it helps you in reducing the loading speed of your WordPress website or blog, by enabling lazy load functionality for your media i.e. images & videos.