Slow loading websites are really frustrating! Especially when your blog posts are filled with beautiful images. Lazy loading is a clever technique that can make such pages load faster.
With lazy loading, images are loaded only when they are needed.
Instead of loading every image on the page at once, your site will wait until the visitor scrolls down to where the image is about to appear, and then load it.
That means faster page loads, happier visitors. And, of course, better SEO! We’ve found that Google really appreciates faster sites. It’s a win-win situation.
The best part is, adding lazy loading functionality to your WordPress site is a lot easier than you think. In this article, we’ll walk you through the process step by step so you can have a faster, more efficient site in no time. Ready to speed things up?
Why Lazy Load Images in WordPress?
Lazy loading WordPress images can speed up your website and provide a better user experience.
No one likes a slow website. In fact, one website performance study found that a 1-second delay in page load time can lead to a 7% drop in conversions, an 11% drop in page views, and a 16% drop in customer satisfaction.
Search engines like Google also don’t like slow loading websites. That’s why websites that load faster rank higher in search results.
Images take the longest time to load on a WordPress site compared to other web page elements. If you add a lot of images to your posts, then each image will increase the page load time.
One way to handle this situation is to use a CDN service like BunnyCDN. A CDN allows users to download images from a web server that is closest to them, thereby reducing the loading speed of your website.
However, your images will still load and affect the overall page load time. To combat this, you can delay the loading of images by implementing lazy loading on your website.
How does lazy loading of images work?
Instead of loading all images at once, lazy loading only downloads the images that are visible on the user's screen. It replaces all other images with placeholder images or empty space.
As users scroll down the page, your website loads the images that are visible in the browser's viewing area.
Lazy loading can be very beneficial for your WordPress blog:
- It reduces the initial web page loading time so that users can access your website faster.
- It only delivers the images that are viewed, saving bandwidth, which can save you money on your WordPress hosting costs.
WordPress 5.5 was released and added lazy loading as a default feature.
However, if you want to customize image lazy loading and how background images are lazy loaded, then you will need to use a WordPress plugin.
Let’s take a look at how to implement lazy loading of images in WordPress using two different plugins. You can use the quick links below to jump directly to the method you want to use:
- Lazy Loading Images in WordPress with WP Rocket (Recommended)
- Lazy Loading Images in WordPress Using Optimole (Free)
- Additional Tips for Optimizing WordPress Images
Method 1: Lazy Loading Images in WordPress Using WP Rocket
We recommend using WP Rocket to enable lazy loading of images in WordPress. It is the best WordPress caching plugin on the market and allows you to easily enable lazy loading of images.
Other than that, it’s an extremely powerful plugin that can help you optimize your page speed without having to understand complex technical terms or configure expert settings.
Out of the box, all default recommended cache settings will significantly speed up your WordPress site.
You first need to install and activate the WP Rocket plugin. For more details, see our WordPress plugin installation guide .
To enable lazy loading of images, all you have to do is check a few boxes. You can even enable lazy loading of videos, which will further speed up your site.
All you have to do is head to Settings » WP Rocket in your WordPress dashboard and click on the Media tab. You can then scroll to the LazyLoad section and check the boxes next to Enable images and Enable iframes and videos.
Note: If you are using Siteground as your WordPress hosting provider, then you can use the free SiteGround Optimizer plugin which has a similar lazy loading feature.
Method 2: Lazy Loading Images in WordPress Using Optimole
This method uses the free Optimole plugin . It is one of the best WordPress image compression plugins that allows you to easily enable lazy loading of images.
If you have more than 5,000 visitors per month, you'll need the premium version of Optimole .
First, you need to install and activate the Optimole plugin. For more details, see our step by step guide on WordPress plugin installation .
Upon activation, you will see a screen asking you to register an API key. You can also find this screen by navigating to Optimole in the admin menu .
You will need to make sure the email address listed is correct and then click the "Create and connect your account" button. Alternatively, if you are an existing user, you can just click the "I already have an API key" button.
You may have to wait a few seconds while the plugin connects to Optimole. After that, the plugin will automatically start optimizing your images so that your visitors will see the images that are best suited for their devices.
During this process, you can click on the Settings tab to configure lazy loading.
Here you’ll want to make sure the ‘Scale images and lazy load’ setting is enabled. This will generate images based on your visitor’s screen size, which will improve loading speeds.
Next, click on the “Advanced” menu option and select “Lazy Load.” There are a few different settings on this screen that allow you to customize how your images are lazy loaded.
First, you can adjust the “Exclude first few images from lazy loading” setting. This will prevent images at the top of your post or page from lazy loading, allowing images above the fold to always appear.
If you want every image to be lazy loaded, you can set this to 0.
There are some other advanced lazy loading settings in Optimole that you can check. These settings are enabled by default.
The first is the “Scale images” setting. This setting will scale images to the size of your visitor’s screen, making your pages load faster.
After that, you’ll see a setting that says “Enable background image lazy loading.” This will lazy load your background images, which are likely to be the largest images on your site.
Another setting is lazy loading of embedded videos and iframes. If you have a lot of embedded video content, you’ll want to enable this setting. It loads a placeholder image in place of the video. Once the placeholder is clicked, the full video will load.
You can continue to customize these settings and see which works best for your site and images.
Before exiting the plugin settings, make sure to click on the ‘Save Changes’ button at the bottom of the page.
Additional Tips for Optimizing WordPress Images
While lazy loading can help make your site load faster, there are other ways to optimize WordPress images for best performance.
For example, we recommend that you compress your images using a tool like TinyPNG or JPEGmini before uploading them to your website . Alternatively, you can use an automatic image compression plugin like Optimole or EWWW Image Optimizer .
It’s also important to choose the right WordPress image size and file format for your images. JPEG is best for photographs or colorful images, PNG is good for simple or transparent images, and GIF is only suitable for animated images.
I hope this article helped you learn how to lazy load images in WordPress. You may also want to read:
- How to use Flickr to find images for your blog
- Image SEO: Actionable Tips for Optimizing Image Traffic
If you liked this article, you can share it on Twitter and Facebook.
Disclosure: Some of the links in this article contain affiliate links, which means we may earn a commission if you click through to visit us, at no extra cost to you. See how SidelinePlay is funded, why it’s important, and how you can support us.
Was this helpful?