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.
Quick start: use WordPress’ built-in lazy loading for a simple setup for images and iframes, use a plugin such as Optimole or a3 Lazy Load if you want more control, use Lazy Load for Videos if you embed lots of videos, and use Lazy Load for Comments if you want to lazy load native WordPress comments.
📚 Table of contents:
- What is lazy loading?
- Why lazy load WordPress comments and images?
- How to lazy load WordPress images
- How to lazy load WordPress YouTube videos
- How to lazy load WordPress comments
- How to lazy load WordPress iframes
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.
On average, the majority of a web page’s file size is comprised of images. So by lazy loading your already-optimized images, you’re delaying the need to load a majority of your site’s page size.
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
When WordPress launched version 5.5, it began including built-in support for native browser lazy loading for images, in the core system files.
This means that your images will lazy load already without you lifting a finger.
However, there’s a catch!
This feature only works for visitors using web browsers that support the loading attribute. Most major web browsers now support this attribute, including Chrome (and Chrome-based browsers like Edge and Opera), recent versions of Safari, and Firefox.
Put together, support for the loading attribute now covers well over 90% of internet users [2].
However, that still leaves some people who aren’t able to benefit from the native lazy loading feature. This could be people using older versions of macOS/Safari, certain mobile browsers, and so on.
Additionally, the native browser lazy loading feature doesn’t give you a lot of control over how you lazy load images. For example, you can’t use a static placeholder image or manually exclude certain key images.
To offer broader lazy loading support for images and get more control over how lazy loading functions, you can use a dedicated WordPress lazy loading plugin for your site’s images.
Below, you’ll find some of the top options.
Optimole
Optimole is a full-service WordPress image optimization plugin that includes optimized image lazy loading, among other features such as a built-in CDN and real-time adaptive compression and resizing.
It offers a plug-and-play solution for image lazy loading, though you also get options to specify a generic placeholder lazy load placeholder image and manually exclude images from lazy loading if needed.
If you want a one-click option to optimize all of your site’s images with lazy loading and pretty much every other important strategy, this is a great option.
Once you activate the plugin, you’ll need to connect it with your free Optimole account by adding an API key – full instructions here.
Once you connect it, Optimole will enable image lazy loading by default. If you want more control over how the lazy loading behavior functions, look for the lazy loading options in the structured settings areas, including Loading Method, Loading Method (Global), Visual Settings, and Extended Features. You can also configure options such as Native Browser Loading (NOT RECOMMENDED), Skip lazy loading for first images, Video & iframes, and CSS Background Lazy Load:
In addition to images, Optimole can also help you lazy load videos and iframes – more on that later!
⚠️ Note: If you do decide to use a WordPress lazy loading plugin instead of the built-in feature, we recommend installing the Optimole plugin. It offers more control over lazy loading behavior and gives you so much more in the way of image optimization.
a3 Lazy Load
A3 Lazy Load is a free WordPress lazy load plugin that works alongside the native WordPress lazy loading.
You can use it in two ways:
- If you leave native lazy loading enabled, it can act as a fallback to still lazy load WordPress images for users with unsupported browsers or images that come from outside WordPress.
- If preferred, it includes a built-in feature to disable native lazy loading so that you can use a3 Lazy Load’s JavaScript-based approach for all your images.
Beyond lazy loading WordPress images, it also includes support for videos and iframes.
Once you install and activate the free plugin from WordPress.org, you can go to Settings → a3 Lazy Load to configure lazy loading behavior on your site:
Lazyload
Lazyload is a very simple free option that supports lazy loading for images, iframes, and YouTube videos. It doesn’t give you nearly as many options as a3 Lazy Load, but you might prefer a simpler approach in some situations.
Once you install and activate the plugin, you can go to Settings → Lazyload to enable lazy loading for different types of content. There are no other settings – you just check the toggle and you’re off to the races.
How to lazy load WordPress YouTube videos (or other videos)
If you embed a lot of YouTube videos in your content, you might want a special solution to lazy load YouTube videos.
Some of the lazy load plugins that we mentioned above will work for YouTube, too, so you can often use them for both images and videos.
However, for a more targeted and flexible approach, you can use the free Lazy Load for Videos plugin, which is specifically focused on YouTube, Vimeo, and other similar services.
To maximize performance, the plugin will lazy load a static image thumbnail at first (with a play button so that visitors know it’s a video). When a visitor clicks the play button, it will then load the full video embed and play the video automatically. From a performance perspective, this is the most optimal way to handle video embeds while still offering a good user experience.
It also includes some other features, such as hiding the YouTube player controls and the related videos that display at the end of a video.
Once you install and activate it, it starts working right away for supported new videos that you add to your content.
To further configure video lazy loading behavior, you can go to Settings → Lazy Load for Videos. These settings let you customize the play button, thumbnail, YouTube behavior, and Vimeo behavior.
To add video lazy loading to your previously published videos, you need to click the Update Posts button in the settings area.
How to lazy load WordPress comments
If you allow comments on your blog, it can also be useful to lazy load them, especially if you’re using third-party comment services such as Disqus.
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, wpDiscuz, Disqus comments, or something else.
Thankfully, there are some plugins dedicated to different types 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 wpDiscuz, use its own built-in tools or performance settings rather than treating it like a Disqus lazy loading plugin.
- If you’re using Disqus comments, you’ll need a Disqus-specific lazy loading solution rather than wpDiscuz.
I’ll show you how to configure lazy loading for native WordPress comments below.
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.
How to lazy load WordPress iframes
Iframes are external code embeds in your site such as Google Maps, some third-party form tools (e.g. Typeform), Google Sheets, and other similar services.
As with images, WordPress includes built-in support for lazy loading iframes via the native browser loading attribute.
However, the same caveats apply to iframes as to images, in that there’s still not 100% support for the native approach and you don’t get as much flexibility.
If you’d prefer, you can use a dedicated plugin to lazy load iframes in WordPress.
In terms of the best WordPress lazy loading plugin for iframes, most of the plugins above will get the job done, but the top three are:
- 👉 Optimole – includes options for iframes and videos in its lazy loading settings.
- 👉 a3 Lazy Load – includes an option to lazy load iframes in the Lazy Load Videos and iframes settings area.
- 👉 Lazyload – check the box to lazy load iframes & Videos.
Implement WordPress lazy loading today 🚀
If you want to optimize your WordPress site’s performance, implementing lazy loading 🦥 is an important strategy.
Since WordPress 5.5 and WordPress 5.7, WordPress has supported built-in lazy loading for images and iframes via native browser lazy loading.
However, as we discussed above, there are still some limitations with the native method, which is why you might want to use a dedicated WordPress lazy load plugin.
Additionally, if you’re embedding a lot of YouTube videos, you’ll probably want a dedicated solution to lazy load them and replace them with a static thumbnail image until a visitor hits play.
Of course, learning how to lazy load WordPress is not the only thing you need to do to speed up your site. To learn about other important strategies, check out our guides to speeding up WordPress and general website optimization.
Do you still have any questions about how to lazy load WordPress images, comments, videos, or iframes? Let us know in the comments!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
Thanks for stopping by Richard! Which one did you finally pick?
We are currently (very) busy with Enfold 🙂
It has a lot going for it right of the bat without becoming overwhelming. Sofar so good!