How to Lazy Load WordPress Comments, Images, and YouTube Videos

And finally, a third common lazy loading target for WordPress is your comments section. On every WordPress theme I’ve ever seen, comments are located below posts and pages. Therefore, you really don’t need to load them until readers start scrolling down the page.

  • Comments
  • Images
  • YouTube Videos

How to lazy load WordPress comments

What is Lazy Loading?

To lazy load your images, I recommend a plugin called Lazy Load.

If you test your website’s performance before and after, I bet you’ll see an improvement.
Native WordPress comments are the commenting system that comes with every WordPress install. Unless you install a plugin to switch how you handle comments, you’re using native WordPress comments.

How Does Lazy Loading Make Your WordPress Site Faster?

Enough theory – let’s get into how you can actually lazy load your WordPress comments, images, and YouTube videos.
Once you set up Disqus comments, you can configure how you want them to lazy load. You have the exact same options as Lazy Load for Comments:

  • The average page is about 2MB
  • 1.3MB of that comes exclusively from images

Then, configure it by going to Settings → WP YouTube Lyte. For the best performance, you should enter a YouTube API key. While it’s not 100% necessary for the plugin to function, the developer recommends it for optimum performance.
It’s all about reducing your page size and number of requests.
Once you activate Disqus Conditional Load, you can configure its settings by going to the DCL Settings option in your dashboard sidebar.
You can install Lazy Load directly from your WordPress dashboard. Just go to Plugins → Add New and search:

How to Lazy Load WordPress Comments

I’ll show you how to set up each…

  • Native WordPress Comments
  • Disqus Comments
  • Facebook Comments

For reference, here’s what the On Click option looks like:

How to Lazy Load Native WordPress Comments

If you want more customization options, give it a look. Just know that I’ve read several reports of it gobbling up CPU usage – so buyer beware.
Once you’ve activated it, you can configure Lazy Load for Comments by going to Settings → Discussion and finding the Lazy Load Comments option:
If you’re using Disqus, lazy loading is an absolute must. Disqus adds a number of extra external requests to your site. Without lazy loading, these can slow down your site.
If you scroll down, you can also customize the messages your visitors will see during your chosen method of lazy loading.

Now that you’ve knocked out lazy loading for your comments section, let’s hit the next candidate: images.

  • On Scroll – comments will start loading automatically as your visitors scroll down the page. Does not require any action from your visitor.
  • On Click – comments will only load when your visitors click on a Load Comments button. Does require action from your visitor.
  • No Lazy Load – completely turns off the lazy loading functionality.

Lazy loading alone will not get you a blazing fast WordPress site. But as part of a broader strategy, it’s a great way to squeeze some extra performance out of your site. So, make sure you’re already following the tips in our ultimate guide to speeding up WordPress. Then, add in these lazy loading tools to boost your speed even more.
On this page, you can also configure general settings like how many comments to display and how to sort comments.
To lazy load Disqus comments, you can use the Disqus Conditional Load plugin. Like Lazy Load for Comments, it’s free and can be installed directly from your WordPress dashboard.

How to Lazy Load Disqus WordPress Comments

Now, all you need to do is embed YouTube videos like normal. At first glance, your embedded YouTube videos will look the same. But if you dig into the source code, you’ll see that the plugin actually generates a lightweight .jpg instead of a full YouTube embed:
Lazy loading lets you slash a huge portion of that out of the initial page load. A common trick is to lazy load all of the images in your blog posts. That way, you only need to load those size-heavy images once a visitor starts engaging with your page.
How to lazy load WordPress images
As you can see, there’s only one dropdown to configure. But, it is a rather important setting. Here’s what each choice in the dropdown means:
Let’s dig in…
For example, did you know that, on average, 65% of your page size is comprised of images? In real numbers, that means:
Once your visitors click, the real YouTube player will load and autoplay the video.

  • On Click – requires visitors to click a Load Comments button.
  • On Scroll – comments will automatically load as visitors scroll down the page.
  • Normal (Disable Lazy Load)

To lazy load YouTube videos, you can use WP YouTube Lyte. The plugin works by utilizing “lite” YouTube embeds. They look just like the real thing, but only load the more resource-intensive HTML5 player when clicked on.
Note – Disqus Conditional Load is a standalone plugin. That means it handles integrating Disqus comments into your site as well as adding lazy loading. If you’re already using the official Disqus plugin, you’ll need to deactivate it before installing Disqus Conditional Load.

How to Lazy Load Facebook WordPress Comments

Therefore, any content that sits below the fold (i.e. out of sight) doesn’t necessarily need to load right away. Lazy loading basically delays loading some of that content until a visitor starts scrolling down, at which point it becomes necessary to load everything.
Lazy loading comments becomes especially important if you’re using a third-party comments system like Disqus or Facebook comments. These systems add additional requests that will unnecessarily slow your page load times if loaded immediately.
Why this plugin? First off, it comes from Automattic, which gives me extra trust in its quality. And second, pretty much all you need to do is install it, activate it, and enjoy your lazy loaded images.
Lazy loading is a performance optimization trick that works by delaying loading certain assets until after the initial page load. That’s a bit jargony, so let’s look at it in real world terms.

First off, you need to configure basic Disqus comment functionality:
In this post, I’ll tell you what lazy loading is and how it can benefit your site’s performance. Then, I’ll show you how to lazy load three key areas of your WordPress site:
There is another plugin I like called BJ Lazy Load. It gives you more flexibility over which images you lazy load and how lazy loading functions.
You can install it directly from your WordPress dashboard:

How to Lazy Load WordPress Images

The exact plugin you need will depend on the comments system you’re using. Thankfully, one developer has created separate plugins for:
Finally, if you’re using Facebook Comments for WordPress, you need a plugin called Lazy Facebook Comments. This plugin comes from the same developer as the previous two plugins, so you can expect a similar interface and setup process.
Generate your YouTube API key by following these instructions. Then, enter it in the settings and click Test Key:

Once you add your app ID, you should have a working Facebook comments section. Then, you just need to scroll down the settings page and configure how you want your comments to lazy load:
To get started, install it by going to Plugins → Add New and searching:
Almost right behind images, videos make up another 10% of the average web page’s size, making them another good target for lazy loading.
Once you make your selection, you’re finished! Your comments will now start lazy loading.

How to Lazy Load YouTube Videos on WordPress

Laziness is good…when it speeds up your WordPress site.
How to lazy load WordPress YouTube videos
When a user first loads your page, they only see the content on their viewable screen (also known as the above the fold content), right?
Like Disqus Conditional Load, Lazy Facebook Comments is a standalone plugin. It will help you both add and lazy load Facebook comments for WordPress.
If you embed tons of YouTube videos into your posts, you should consider lazy loading them to reduce unnecessary external requests and lower your page size.
Once you activate it, you’re done! Your images will now delay loading until they come into your visitors’ active viewports.
Here’s the thing with lazy loading WordPress comments:

Then, go to Settings → Lazy FB Comments to configure it. First, you’ll need to add your Facebook App ID (if you don’t already have an App ID, here are instructions to obtain one):
To add lazy loading to native WordPress comments, you’ll need a free plugin called Lazy Load for Comments. You can install it directly from your dashboard by going to Plugins → Add New and searching for it:
If your key works, you’re set to jet! If you want, you can also configure some extra settings for how your videos display – but none of the are required.

Wrapping Things Up

You probably already know how important your WordPress site’s load time is to your success. But have you really done everything possible to speed up your site? Sure, you’ve probably done the basics like choosing a great WordPress host and installing a caching plugin. But have you tried lazy loading some of your WordPress content?
Your parents and teachers probably drilled it into you that laziness is bad. But allow me to offer a dissenting opinion:

Posted by WordPress Guru