How to Lazy Load Images in WordPress (Only 1 Step)

Lazy loading images is one of the best ways to speed up WordPress.

Implementing lazy loading will allow your site to load faster and use less bandwidth.

Even better, modern WP plugins have made it extremely easy to add lazy loading to your site. In fact, it only takes one step.

But before we dive into the instructions, here’s a quick overview of what lazy loading is.

What is lazy loading?

Subscribe to Compete Themes on Youtube

It’s easiest to understand lazy loading with a visual example.

Take a look at this zoomed-out view of the Compete Themes blog.

You can see that there are 16 blog posts each with a Featured Image as well as a logo image at the top. Normally, when someone visits that page, all 17 images would load at once. This is extremely wasteful.

Most people won’t scroll all the way to the bottom which means loading every image is unnecessary. This takes up more of my hosting bandwidth and slows down the site for visitors.

Furthermore, even if someone does scroll all the way down the page, it will take them at least a few seconds, so there’s no reason to make them load every image the instant they arrive.

With lazy loading, only images on the visitor’s screen will be loaded when they arrive.

Then as they scroll down the page, the other images will be loaded as they come into view.

This makes the site load much faster for visitors, regardless of how much of the page they end up viewing.

Now that you understand how lazy loading works, let’s cover the simple steps to implement it on your site.

How to add lazy loading to WordPress

As I promised, this can be done in just one step:

The Optimole plugin is a complete image optimization solution, and it automatically starts lazy loading your images the moment you install it. No configuration needed.

If you haven’t been compressing or resizing your images, the performance boost you’ll get from this plugin will be pretty incredible.

If you’re interested in trying out Optimole, this tutorial will walk you through the complete setup.

The other plugin I recommend is WP Rocket.

WP Rocket is like a swiss army knife of performance optimization. It includes high-performance caching, file optimizations, and media optimizations, such as lazy loading.

Enabling lazy loading with WP Rocket couldn’t be much easier. All you have to do is check this box:

If you take another look at that screenshot, you’ll see that right below the image setting is another checkbox to enable lazy loading for videos and iframes. This post has three videos embedded, but they didn’t slow the page down because WP Rocket is lazy loading them.

If you want to see what else WP Rocket can do for your site’s performance, you watch my full video walkthrough.

Either of those plugins can work well, but if you’re really interested in speeding up your site, I recommend using both. That’s what I do on this website.

I use Optimole for all of my image optimization, and WP Rocket for its variety of other performance upgrades. I leave image lazy loading disabled in WP Rocket since Optimole handles that, but I enable the video lazy loading option in WP Rocket since Optimole doesn’t include that option as of now.

Better performance with WordPress

Once you learn how lazy loading in WordPress works, it’s actually pretty simple.

Not only is the concept simple, but thanks to the plugins we have available, implementing it on your site is easy too.

Regardless of which plugin you choose, you should see some great performance gains once you start using lazy loading.

If you want to keep optimizing your website, you’ll love the huge variety of performance tactics listed here:

All 36 Ways to Speed Up Your WordPress Website →

If you have any questions you can post below, and please consider sharing this post with someone else before you go.

Originally published at https://www.competethemes.com/blog/wordpress-lazy-load-images/ on May 18, 2020.