How to Lazy Load Images on Your WordPress Site

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.

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 WordPress.org 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 “Basic” tab – the first screen – in the LazyLoad section at the top of the page, click “Enable for images”.
3. Click “Save Changes”.

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"
	 data-no-lazy="1"
	 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.

Conclusion

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.