Being lazy is good. I said it. No, I’m not talking about sitting on your couch binge-watching TV shows all day. I’m talking about deciding to lazy load WordPress comments and images to boost your page load times.
Page Load time is one of the key metrics you need to pay attention to when it comes to your WordPress site. Even if you’ve already implemented our basic tips for speeding up WordPress (and our list of even more speed tips), you can still take load time reduction a step further with lazy loading.
In this post, I’ll explain lazy loading and its benefits and then show you exactly how to lazy load WordPress images and comments.
What is lazy loading?
Don’t be put off by the name! Though laziness is commonly associated with negativity, it’s truly not a bad thing in this case.
Lazy loading works by delaying loading certain elements on your website until they’re absolutely needed. It makes them…lazy. They sit around doing nothing until a user starts scrolling down the page. Then, they jump into action as needed.
Take your WordPress comments section as an example…
In pretty much every WordPress theme that I’ve ever looked at, the comments section is at the bottom of the post. Usually, it requires scrolling at least a few page lengths to reach the comments. So what’s the point in loading comments right away?
Lazy loading says there is no point. Instead, lazy loading only loads such elements once a reader starts scrolling down the page (which is the only time they’re actually needed).
Why lazy load WordPress comments and images?
Lazy loading WordPress elements is primarily about page speed. You can seriously speed up the initial page load times for your sites with lazy loading. Of course, those elements will need to be loaded eventually, but your reader won’t know that the page isn’t fully loaded when they first arrive.
Consider this fact:
(Chart by Visualizer Lite.)
And it’s the same with your comments section. Lazy loading WordPress comments can eliminate both page size and external HTTP requests (if you’re using a third-party comment plugin like Disqus). Without going into too much detail, I’ll just say that too many HTTP requests can slow down your WordPress site just like a large file size.
Lazy loading also has a secondary benefit of reducing how much bandwidth your site consumes, which is beneficial to both you and any of your readers with bandwidth limits.
Now that you know how lazy loading WordPress elements can help, here’s how you can quickly implement lazy loading for your images and comments with free plugins.
How to lazy load WordPress images
If you want the absolute simplest way to lazy load WordPress images, you can use the aptly named Lazy Load plugin.
Literally, all you need to do is install and activate the plugin. It will then automatically start lazy loading all of your images. Zero configuration or thought needed.
However, because it’s so lightweight, you can’t make any changes to how your images lazy load. That’s why I’m going to recommend using a different plugin if you want to customize your lazy loading setup.
To accomplish this, you can install and activate the free BJ Lazy Load plugin.
This plugin gives you the ability to lazy load:
- iFrames (including video embeds from YouTube or other sites)
- Text widgets
To configure the plugin, go to Settings → BJ Lazy Load:
Here, you can enable or disable lazy loading for certain types of elements. By default, it’s enabled for all elements. Check the No box to turn off lazy loading.
Here’s what else you can configure:
- Placeholder Image URL – if you want to include a placeholder image where your lazy loading images will (eventually) appear, you can enter the URL to the image here.
- Skip images with classes – this is a fairly advanced setting. If you don’t know anything about CSS, you can safely ignore it. Basically, it lets you add a CSS class to certain images to force them to load normally.
- Threshold – this tells the plugin how soon you want it to load images. By default, it will load images once the user scrolls to within 200px of where the image should appear. If you want images to load earlier, you can increase the number. If you want the plugin to wait longer to load images (a bad idea, in my opinion), you can decrease the number.
- Use low-res preview image – when enabled, this adds a low-resolution preview image in place of your full-resolution images. As images lazy load in, the full resolution will appear.
Once you save your changes, your images should start lazy loading according to your settings!
How to lazy load WordPress comments
Lazy loading WordPress comments is also quite easy to accomplish with existing plugins. The only trick here is that the plugin you choose will depend on what type of comments section you’re using. That is, whether you’re using native WordPress comments, Disqus comments, Facebook comments, or something else.
Thankfully, one developer named Joel James has created plugins for a variety of comments sections. Here’s what you’ll need…
- If you’re using the native (default) WordPress comments, you need Lazy Load for Comments.
- If you’re using Disqus comments, you need Disqus Conditional Load.
- If you’re using Facebook comments, you need Lazy Facebook Comments.
As I mentioned, all of these plugins come from the same developer, so the interfaces are fairly similar. I’ll show you how to configure lazy loading for native WordPress comments, but the same principles apply to the other plugins.
Once you install and activate Lazy Load for Comments, go to Settings → Discussion to configure it (note – the other plugins get their own tab in the sidebar). Then, scroll down until you find the Lazy Load Comments option:
All you need to do is configure how you want your comments section to load:
- On Scroll: Your comments section will load as the user scrolls down the page. It doesn’t require any manual action from the user.
- On Click: Your comments section will only load after the user clicks a “Load Comments” button. It does require manual action to see comments.
Pick the option which you prefer and save the settings. Your comments will now lazy load. For example, here’s what it looks like if you select the On Click option:
Making sure to lazy load WordPress images and comments won’t cure a slow website all by itself. But after you’ve knocked out all of the obvious performance improvements, it’s a good way to wring another bit of performance out of your WordPress site.