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.
📚 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.
Consider this fact:
On average, the majority of a web page’s file size is comprised of images. In fact, the largest increase in web page size from 2012 to 2022 was due to the use of images. [1]. So by lazy loading your already-optimized images, you’re delaying the need to load a majority of your site’s page size.
(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
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, around 90% of internet users are using browsers that already support WordPress’ built-in lazy loading feature [2].
However, that still leaves 10% of 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 100% 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.
Lazy Load by Jeff Starr is a free and lightweight plugin that can help to improve your WordPress performance by lazy loading images and other media content on your pages and posts. It works automatically in the background, and can be easily installed and configured on any WordPress website using WordPress 5.4 or higher.
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, you can open the Lazyload settings under the Advanced section:
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 will disable the built-in feature to avoid conflicts with your lazy loading plugin and give 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 browser lazy loading that WordPress introduced in WordPress 5.5.
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.
You can see a live demo here.
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 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 existing 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 or 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 Disqus comments, you need 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 now includes built-in support for lazy loading iframes via the native browser loading attribute. This support was added in WordPress 5.7, which was released in March 2021.
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. Again, if you do this, we recommend installing the Optimole plugin to disable the native lazy loading so that you avoid any potential conflicts.
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 an option to lazy load iframes in the advanced lazy load settings area.
- 👉 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!
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!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!