Lazy Loading WordPress Images

What is Lazy Loading and How to Do it in WordPress

Last Updated on by Michael Brockbank

If you’re trying to build a blog that does well in Google search, you need to focus on performance. And one of the easiest ways to boost site speed is to set up images for lazy loading. In WordPress, this is very simple to do.

But, lazy loading can only go so far. You should also consider image optimization methods such as compression or using next-gen formats, such as WebP.

That is as soon as everyone jumps on board with next-gen graphics. Not even Photoshop supports WebP as of this article.

How Does Lazy Loading Help?

Also known as “asynchronous loading,” lazy loading for the Internet means to load an element only when a visitor needs it. This means the website doesn’t have to load something like an image until a person scrolls to that part of a page.

Depending on how many images you have, this could shave off a lot of loading time. In turn, the visitor can access your content without having to wait.

If you use speed test tools, such as GTmetrix from WordPress, you can see the impact your images have on any given post or page.

In short, lazy loading helps your website become faster. Think of it like on-demand images for your web pages. They’re only used when someone needs them.

How to Enable Lazy Loading in WordPress

As of WordPress version 5.5, lazy loading is enabled by default. This means you really don’t have to do anything for your images to load on demand.

However, it won’t interfere if you have plugins installed that enable this feature as well. The only complication I’ve come across is how optimization plugins interfere with each other.

For instance, Autoptimize and Speed Booster Plus will disable all images on your website if both plugins are managing lazy loading.

To fix this, just disable the function on one or the other. At least that’s how I fixed the problem on one of my other websites.

Optimization Plugins Galore!

Optimization Plugins

Nearly every WordPress optimization plugin has some form of lazy loading feature. In fact, I use one specifically for loading YouTube videos on this website.

Instead of the javascript running, which slows performance, the LazyLoad plugin pulls the thumbnail image and displays that instead. And it made a huge difference with page speed tests.

My point is that you have access to loading features in a very wide scope of optimization plugins.

Can You Disable Lazy Loading in WordPress?

That’s one of the beauties of working with WordPress…it’s completely customizable. Although a lot of customizations rely on a knowledge of CSS, PHP, HTML or JavaScript, much can be done with a simple plugin.

Using Code

If for some reason you need to disable lazy loading in WordPress 5.5 or later, insert the following code snippet into your functions.php file of the theme you’re using.

add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

It’s probably a good idea to use a child theme when making these kinds of edits in code. That way, should the theme get updated by the developer, you don’t lose any custom coding you put into it.

Using a Plugin

You can also disable this function by using the Disable Lazy Load plugin. It’s probably a lot easier, especially for those who don’t know what they’re doing in terms of adding code snippets.

Because if you put in the wrong coding, you can ultimately wreck your website. And it really doesn’t take much to install a plugin.

Is Lazy Loading Bad for SEO?

When you load images in the background, it’s only for the end-user. Search engines, such as Google, will still crawl the entire site and index your imagery.

In short, no, it’s not bad for SEO to enable lazy loading.

On the contrary, it’ll improve search engine optimization by making your pages load faster. And Google loves a fast website.

What About Background Images Using CSS?

Unfortunately, lazy loading from the browser level does not work with traditional CSS background images. However, you can add CSS coding for background images for lazy loading, if you’re proficient in CSS.

However, there are other ways you can optimize a background image for better performance. For instance, you could save it as a lower-quality JPG in something like Photoshop.

But if the image is just too massive or is causing too much of a hassle, it’s probably better to just remove it entirely.

Should You Disable the Default Lazy Load When Using an Optimization Plugin?

Not all plugins play well together. And although I have yet to see an optimization plugin interfere with the default lazy loading for WordPress, it doesn’t mean it can’t happen.

In fact, I’ve seen two plugins that didn’t control the same functions cancel each other out. It all depends on how the individual developers created the plugin.

For the most part, judging whether you should disable the lazy aspect of WordPress or turning it off in the optimization plugin will be up to you.

Personally, I’d prefer turning it off in the optimization plugin. This means you won’t have to fiddle around with code or install yet another plugin to do the same job.

However, it could also center around how you have your website set up in the first place.

If you’re not sure, I suggest using a staging area such as installing WordPress with Bitnami. It’ll give you a local copy of WordPress on your computer that you can butcher all you want before making changes to your live site.

What is this WebP Thing and Should You Care?

WebP has actually been around for quite a while. It’s a compression format that provides incredibly small files without losing the quality of the image.

However, not all browsers support WebP. In fact, many graphic design programs don’t currently support it, either.

If you’d like to try it for yourself, there are some tools available. You can install a plugin in Photoshop that lets you create WebP graphics, or you could install a plugin like Imagify to do this automatically in WordPress.

Unfortunately, I haven’t had the best of luck with WebP converters.

5 Quick Ways to Optimize Images

Lazy loading isn’t the only way to optimize your website for image use. In fact, you can do quite a bit to help your pages load faster, even if you use a ton of graphics.

For instance, you could:

  • Save the correct dimensions for your pages while reducing image quality in your photo editor. For instance, you can make the file size roughly four times smaller by saving JPGs as “High” quality instead of “maximum” in apps like Photoshop.
  • Utilize image compression such as lossless and lossy. If you’re not sure about image compression, you can install a plugin called ShortPixel which could help by doing this automatically.
  • Leverage browser caching by setting expires in the .htaccess file.
  • Set up a content delivery network, or CDN.
  • Use fewer images in your content.

These are just some of the more common ways creators optimize for images. Though, they are pretty much the only ones I really care about.

It’s All About Performance

I’m not really sure why anyone would want to purposely remove lazy loading from WordPress. After all, it works to improve functionality of the website while making search engines like Google happy.

At any rate, building a successful website centers around its performance. Well, that and writing proper SEO content. Take the steps necessary to ensure your visitors have a great experience.

Because in the end, that’s what it’s all about.

Michael Brockbank
Follow Me...

Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments