You’ve probably been beaten over the head with the importance of page speed and WordPress. Better user experience, more conversions, and all that jazz. But after you’ve done the obvious performance tweaks, how can you eek out even more speed? One way is to lazy load WordPress comments.
Using lazy load WordPress comments can boost your initial page load speeds and keep your readers happy. Jay already showed you how to lazy load WordPress images. Now, in this post, I’ll show you how to take it further and lazy load WordPress comments, whether you’re using the native WordPress comments system, Disqus comments, or Facebook comments.
How Does Lazy Loading Work?
Lazy loading sounds like a bad thing, right? I mean, laziness is bad, at least that’s what I tell myself as I’m laying on the couch binge watching Netflix. So why would you want to make your “loading” lazy?
Don’t worry – it’s not a bad thing. All lazy loading means is that certain content, which you specify, doesn’t immediately load when a user goes to your page. Instead, it loads at a later time. For example, the normal way is to make comments load as a user scrolls down the page, but you can also require users to click a “Load Comments” button to load the comments.
Essentially, lazy loading makes certain content “on-demand” only. It only loads when actually needed, not before.
Why Lazy Load WordPress Comments?
The main reason to lazy load WordPress comments is speed. Think about it, your comments section is at the bottom of your WordPress posts. That means that, 99% of the time, users will only be able to see your comments after they’ve scrolled a good ways down your page.
So what’s the point of loading comments before your readers even get a chance to scroll? There isn’t one.
Basically, lazy loading WordPress comments is a way to reduce the size of your page, which can boost your initial page load time. And given that 30% of users want sites to load in under one second, you need every performance improvement you can get.
Now that you know why, I’ll dig into how you can use plugins to lazy load native, Disqus, or Facebook WordPress comments.
How to Lazy Load Native WordPress Comments
Let’s start with lazy loading native WordPress comments. Unless you know you’re using a third-party comments plugin, this is the one that applies to you.
To get started, you need to install and activate the Lazy Load for Comments plugin. While this plugin doesn’t have a ton of active installs, it’s regularly updated, works great, and comes from a known developer.
Once activated, you only need to configure one dropdown. To find it, go to Settings → Discussion and find the Lazy Load Comments Section:
You can select one of two lazy loading options:
- On Scroll – with this method, comments will automatically load as the user scrolls down and reaches the bottom of the page. The user will not need to complete any manual action to view comments.
- On Click – with this method, the user will need to click on a button to view the comments – they will not load automatically. Here’s an example of what that looks like:
Once you select your lazy loading style and save the settings, you’re done! Your comments section will automatically start lazy loading according to your selection.
How to Lazy Load Disqus WordPress Comments
The previous plugin is great for lazy loading native WordPress comments, but if you’re using Disqus, you’ll need a different solution.
Lazy loading Disqus comments is especially important because of all the extra HTTP requests the Disqus comments section adds.
To lazy load Disqus comments, you can use a different plugin called Disqus Conditional Load (which comes from the same developer as the previous plugin). The free version of the plugin lets you load Disqus comments “On Click” and “On Scroll” (just like before). If you go with the premium version, you can also start loading comments as soon as users start scrolling (rather than waiting until they scroll down the page).
To get started, install and activate Disqus Conditional Load. Then, go to DCL Settings to configure the plugin:
You’ll want to first configure how to load your comments (on scroll or on click). Then, you’ll also want to decide whether or not you need the “comments count” feature. Disabling it can improve performance by removing another script. But it also may break comment counts, so there’s a definite tradeoff.
You can also disable lazy loading for certain custom post types, customize your loading messages, and configure the plugin to work with some caching plugins.
One nice bonus feature is that the plugin adds a shortcode which you can use to include Disqus comments anywhere you want.
How to Lazy Load WordPress Facebook Comments
If you’re using Facebook comments for WordPress, you’ll need yet another solution to lazy load your comments. Like Disqus, lazy loading Facebook comments can reduce external HTTP requests as well as shrink your page size.
This time, you can use the Lazy Facebook Comments plugin which comes, yet again, from the same developer (Joel James has the lazy loading comments plugin market on lockdown!). Get started by installing and activating the plugin.
Once activated, you can configure it by going to Settings → Lazy FB Comments:
In addition to choosing how to lazy load your Facebook comments, you can also configure lots of other goodies like the width of your comment box, the number of comments to display, color schemes, sorting, and button text.
Once you’re done, make sure to save your settings and you’re good to go!
Wrapping Things Up
There you go! Three different plugins for lazy loading three different types of WordPress comments. Whether you’re using the native WordPress comments, Disqus comments, or Facebook comments, you can lazy load your comments section and speed up your WordPress site.
Along with lazy loading your images, lazy loading WordPress comments is a quick way you can squeeze out some additional performance by shrinking your page sizes and eliminating some HTTP requests.
Personally, I’m never bothered by lazy loading, but I’m wondering how you guys feel. Do you get annoyed if you ever have to wait for content to load due to lazy loading?
Article thumbnail image by RaulAlmu / shutterstock.com
The post How to Add Lazy Loading WordPress Comments (& Why That’s Useful) appeared first on Elegant Themes Blog.
Powered by WPeMatico