Table of Contents

No one likes a slow website. But with images making up 54% of all web content and also taking the most time to load, slow page load times are a problem for many sites.

This is why optimizing images is so critical. But… even after compressing your images, they can still take up a large chunk of the total file size of your website.

So how do you keep impatient visitors to your site from bouncing before your content has fully loaded?

The answer: lazy loading images. With lazy load, you can only load images when a user scrolls down to the specific image. It’s a simple solution for image loading that doesn’t interfere with the user’s perception of speed.

In this post, we’ll take a look at what lazy loading is and how it works, and then I’ll walk you through how to set it up and add a fade in effect for your lazy loading images.

What is Lazy Loading?

Lazy loading images means loading images on your website asynchronously. In other words, loading images and other content on your web page at different times.

Basically, this means that when someone visits your website, images will load above-the-fold, but the remaining images on the page will only download when they come into view on the user’s screen.

Lots of image-heavy websites use this technique. As you scroll down the page, you’ll see placeholder images that quickly fill up with real images.

A great example is Medium, the popular blogging website.

Lazy loading in action on the Medium website.

As you can see from the image above, Medium displays a blurred placeholder image until the actual high resolution image has fully loaded so visitors know to expect that an image is coming.

Why Use Lazy Loading?

Lazy loading only kicks in when a visitor reaches your images as they scroll down a web page. So if they never reach the images, they don’t need to load. This saves the user bandwidth because they won’t have to download all your images, plus it makes your site faster for the user to browse.

And let’s not forget why page load time is so important: 40% of people won’t wait 3 seconds for your homepage to load and Google recommends that sites should load within 2-3 seconds.

So anything you can do to speed up your site is definitely worth experimenting with, testing, and adding to your site.

To know more about why you should apply lazy load to your images, read our guide.

How to Enable Lazy Loading on Your Site

There are lots of options available for adding lazy loading to your site, including some free plugins in repository. A quick Google search reveals more JavaScript solutions that I can count.

But by far the easiest way to add lazy loading to your site is with WP Rocket. It takes less than a minute to enable. Here’s how to do it:

  1. Log in to your site and go to Settings > WP Rocket.
  2. Under the “Media” tab, in the LazyLoad section at the top of the page, click “Enable for images”.
  3. Click “Save Changes”.
Enable LazyLoad with WP Rocket

Check “Enable for images” to enable lazy loading with WP Rocket.

That’s all you need to do. Now your site will lazy load images for visitors.

As with any update or change to your site, it’s important to be aware of any conflicts. So if you notice that enabling lazy loading has broken anything on your site, check out this list of common issues with lazy load.

The lazy loading feature is automatically switched off when certain plugins are detected on your site that may cause conflicts, such as Revolution Slider and Envira Gallery. Here’s the full list of compatible plugins.

Customizing How Lazy Load Works

There’s more to WP Rocket’s lazy loading feature than just switching it on and off. The plugin includes options for disabling lazy loading for specific posts and images, as well as manually applying lazy load to specific images.

And with some code you can further customize the plugin to add a fade in effect to your lazy loading images.

Let’s take a look.

Disabling LazyLoad on Specific Posts and Pages

Got a post or page that you don’t want to use lazy loading on? Whatever the reason, it’s easy to switch off.

To disable lazy loading on a specific post or page, open the post or page and in the “Cache Options” meta box un-check the “LazyLoad for images” option. Don’t forget to publish or update the post or page to save your changes.

You can enable and disable lazy loading for specific posts and pages in the “Cache Options” meta box.

If the “LazyLoad for images” options is greyed out, you need to globally activate it in the WP Rocket settings (Settings > WP Rocket > Basic)

Disabling Lazy Load with Code

If you want more control over how lazy loading works on your site, you can hook into WP Rocket with code. While pasting code snippets into the functions.php file of a theme is an easy way to customize a theme, it’s also bad practice. WP Rocket’s developers recommend creating a custom MU plugin. It’s easy – you can read more about it here.

Once you’ve got your MU plugin set up, you can paste in any of the following code snippets.

Disabling Lazy Load on All Pages

This snippet is useful if you want to lazy load images for your posts but not pages.

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
    if ( is_page() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );

Disabling Lazy Load on Home Page

This snippet will disable lazy loading for the front page of your site (the page you set in Settings > Reading > Front page).

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
	if ( is_front_page() ) {
		add_filter( 'do_rocket_lazyload', '__return_false' );

Disabling Lazy Load on Blog Page

This snippet will disable lazy loading for the page you’ve set as your blog homepage (the page you also set in Settings > Reading > Front page).

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
	if ( is_home() ) {
		add_filter( 'do_rocket_lazyload', '__return_false' );

Disabling Lazy Load on Single Posts

If you want to disable lazy loading on all single posts, but keep it enabled for pages and your blog home page, use this snippet:

add_filter( 'wp', '__deactivate_rocket_lazyload_if_page' );
function __deactivate_rocket_lazyload_if_page() {
	if ( is_single() ) {
		add_filter( 'do_rocket_lazyload', '__return_false' );

Disabling LazyLoad on Specific Images

You can disable lazy loading on specific images with the data-no-lazy attribute:

<img src="my-image.jpg"
	 alt="" width="100" height="100" />

Fade In Effect for Lazy Loading Images

When you LazyLoad images, it can be a bit jarring for visitors when your images just suddenly appear out of nowhere on the page. Fortunately, with some subtle effect, you can provide a more pleasant user experience.

Fading in images is a popular effect to pair with lazy loading. The following CSS snippet will add a fade in effect to your site. Simple paste the code into your style.css (don’t forget to create a child theme first!):

/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
	/* we set the opacity to 0 */
	opacity: 0;

/*Image without 'data' attribute is (or becomes) visible */
img.lazyloaded {
	/* prepare the future animation */
	-webkit-transition: opacity .5s linear 0.2s;
	   -moz-transition: opacity .5s linear 0.2s;
	        transition: opacity .5s linear 0.2s;

	/* we set the opacity to 1 to do the magic */
	opacity: 1;

This snippet will only work if the visitor’s browser supports CSS3 transition properties, otherwise, the code will do nothing.


Lazy loading provides a simple way to help speed up your site – especially if it’s image heavy – and only load images when needed, saving bandwidth and ensuring users can enjoy using your site without waiting for every last image to fully load.

With WP Rocket, you can quickly and easily enable lazy loading in the settings. There are also lots of options for customizing the feature.

While WP Rocket’s lazy loading feature might look very simple at first glance (there are just two checkboxes in the settings, after all), with some simple code you can further customize the feature to work exactly how you like with little effort.

For more information on how you can customize WP Rocket’s lazy loading feature, check out the documentation.

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.
Comments (11)

I love this plugin and suggest to my all clients. The lazy load feature is awesome. Recently I've posted a review for cache plugins and listed this one also. :)

I also use wp-rocket. This is amazing plugin for increase website speed. Before my site only getting 75/100 on mobile and 65/100 desktop after use this plugin now i get 86/100 on mobile and 75/100 desktop speed test on google speedtest . also i use cloudflare Optimal settings . I suggest any of you for use this plugin.

Hey Raelene,

Disabling lazy load option on specific post or page is a really good option. I think competitor of WProcket is not proving this options. I'm used most of the premium and paid to cache plugins but I recommend WPRocket because it is an awesome plugin and I'm using this on most of the client sites. This plugin helped me to improve the loading speed of the website.


Thanks, I thought making images lazy load is really a hard thing, but with your plugin, it is easy and effective.

Thanks Once Again

Does not work for <picture-elements.
I want to use it in combination with Shortpixel Image Optimizer.

Hi guys, WP-Rocket customer here. :)

The fade-in effect is nice but I would prefer a "loading" placeholder animation.

Do you have a code snippet that would allow me to do that?

I had to. Disable lazyload wp rocket. Because the loaded javascript lazyload file is not merged with the java compressed file. I really do not know why the LAZY loaded file does not integrate and is loaded separately and is considered an additional request. Please solve it if this is a bug.

How can I load one of my js functions after wp-rocket lazy load feature. Could you tell me the best practice? I need to calculate the image with height, and the placeholder image is diffrent to actual image due to the css codes where image gets the "height:auto".
Thank you in advance

hi, thanks for this plugin.

actually i use the complete wp rocket plugin and am using lazy load from it.
my question is how can i add lazlyload.js file to the compressed minified js file of my site that is made by wp rocket?
i mean, all my files are combined in just 1 js file and are minified, except lazyload.js and analytics files (that are made by wp rocket too!)
how can i combine all of these files into that 1 file?

Thanks, to disable the lazy-load on specific image (data-no-lazy="1") saves my day! Cheers the wp-rocket team.

Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat