Have you ever noticed that your most popular blog posts – the ones that trigger an avalanche of comments – take a little longer to load? While it’s nice to watch WordPress comments roll in if your commenting system is not carefully configured it can really slow down your website.
Think about the resources that go into making comments work:
- A database is queried to pull up existing comments,
- Database entries are created for each new comment,
- Comments and comment metadata are received and processed by a visitor’s browser,
- External resources, such as Gravatars, are requested, downloaded, and loaded, and
- In many cases, large JavaScript and jQuery resources have to be downloaded and processed to make the commenting system work the way it’s supposed to.
As a result, a busy comments section can add a significant load the webserver, increase the overall size of the page, bulk up the number of required HTTP requests, and add additional JavaScript resources for browsers to contend with. Whether you’re using native WordPress comments or have plugged in a third-party commenting system such as Disqus or Facebook Comments, comments can be a drag on the speed of your website, and you should make it a priority to optimize the performance of your site’s comments section. Btw. if you are having trouble with comment spam make sure you read our detailed guide on the topic How to Stop WordPress Comment Spam.
- Strategies for Fixing Slow-Loading Comments
- Optimizing Native WordPress Comments
- Use a Third-Party Commenting System
- Lazy Load Comments
Strategies for Fixing Slow-Loading Comments
If you find that the comments section is slowing down the load speed of your most popular blog posts there a few things you can do:
- Disable comments entirely. This will certainly fix the issue. However, you should really only consider it if your comments section isn’t adding any value. If your comments section is busy enough to slow down your site, it’s probably adding enough value that you won’t want to kill it off. Check out our complete tutorial on how to disable comments in WordPress.
- Optimize native WordPress comments. If you’re using the native WordPress commenting system, there are some things you can do to speed it up.
- Use a third-party comment system. If your site is hosted on a cheap, resource-starved shared server, then using a third-party commenting system may speed up pages with lots of comments. However, if you’re hosted with Kinsta or another quality web host, switching to a third-party won’t do much to help your website’s load speed and may actually slow it down.
- Lazy load comments. Whether you’re using WordPress native comments or a third-party commenting system like Disqus, find a way to lazy load comments so that they don’t slow down the initial page rendering.
Let’s consider each strategy independently so you can figure out which is best for your site.
Optimizing Native WordPress Comments
There are two things that you can do to speed up web pages that have been loaded up with a mountain of native WordPress comments: limit the number of comments that load initially and use locally-hosted avatars. Let’s look at each option in turn.
Limit the Number of Comments Displayed
By default, WordPress is set up to load all of your comments with the initial page load. However, loading dozens or even hundreds of comments, each including a unique avatar, can really bulk up your page and create lots of additional HTTP requests.
You can reduce the number of comments loaded with the initial page load very easily.
- Go to Settings > Discussion in the WordPress admin area.
- Look for the Other comment settings section.
- Select the checkbox next to Break comments into pages with and add a value for the number of comments you want to display with the initial page load.
- Scroll to the bottom of the page click the button to Save Changes.
After going through those steps, the number of comments you specified will be displayed with the initial page load.
Use Locally-Hosted Avatars or on Your CDN
WordPress has built-in support for Gravatar. This means that any user with a Gravatar account will have their custom image added as an avatar when they comment on a blog using the native WordPress commenting system. This adds a nice personalized element to the comments section, but comes at a considerable cost. When WordPress comments are loaded, every single unique Gravatar requires an HTTP request. So if a page is loaded up with comments from 50 different commenters, 50 HTTP requests will be required to download all of those Gravatars. As you can imagine, this can have a considerable impact on page speed.
If you decide that Gravatars aren’t worth the added HTTP requests, you can have two options. First, you can disable avatars entirely by going to Settings > Discussion, finding the Avatars section, and unchecking the box to Show Avatars.
If you don’t want to take such a drastic measure, another option is to switch to locally hosted avatars. To do that, install the WP User Avatar plugin. Once the installation is complete, go to Avatars > Settings and select the checkbox to Disable Gravatar and use only local avatars. If you don’t like the default avatar included with WP User Avatar, there’a clean mystery user image in this tutorial on using locally hosted avatars which you can upload and use as the default avatar.
Keep in mind that after making this change all comments will be displayed with the default avatar unless users register with your site and upload a custom avatar.
Your final option is to load your Gravatars on your own CDN. This is the approach we take on the Kinsta blog. 🤓
Use a Third-Party Commenting System
There a variety of reasons why you might be interested in switching to a third-party commenting system. First, there’s the server load to think about. Creating and loading comments is a resource-intensive process. If your blog comment section is really busy, then offloading that work to a third-party commenting system will take that load off of your site’s server.
In addition, third-party systems offer a better user experience than the native WordPress commenting system. They may also encourage more visitors to comment since visitors that already have an account with the third-party system can comment right away without having to register or provide details to your site.
In some cases, all of these benefits pan out. However, that isn’t universally true.
Not everyone loves third-party commenting systems and others worry about the data being gathered behind the scenes. In addition, the idea that third-party comment systems are faster than native WordPress comments sounds good in theory but things don’t usually play out that way in reality.
If you do decide to use a third-party commenting system, do so because you like the experience of using that particular system and because you’re convinced your site visitors will love it as much as you do. Don’t switch to third-party comments for a perceived performance improvement that may be more theoretical than realistic. If you do make the jump to a third-party system, be sure to consider implementing the next strategy as well: lazy loading.
Lazy Load Comments
Whether you’re using native WordPress comments or a third-party system, lazy loading comments is a technique that will almost certainly speed up your page load time. Commenting systems that are lazy loaded are removed from the initial page rendering and loaded either by JavaScript when the visitor reaches a certain point in the page or by clicking a button that says something like “View Comments”.
If implementing lazy loading sounds a bit technical to implement, it’s because it is. Thankfully, you don’t have to figure it out. There are plugins you can use to lazy load the commenting system you have chosen.
Lazy Load Native WordPress Comments
The ability to lazy load comments isn’t built into the WordPress core. However, a great lightweight and free solution that we recommend is the Lazy Load for Comments plugin.
The plugin is available from the WordPress plugin directory. So you can install it right from the WordPress admin area. This will reduce the number of HTTP requests by lazy loading all the WordPress gravatars. It is very simple to configure. Simply install and under the Discussion settings, there are two options. By default, it is set to “On Scroll” which is what most people will probably prefer. You can also set it to “On Click” which will create a button for visitors to click on before the comments load.
Another option to lazy load native comments is using the wpDiscuz plugin.
The plugin is available from the WordPress plugin directory. So you can install it right from the WordPress admin area.
- Go to Plugins > Add New.
- Search for “wpDiscuz”, and select the Install Now button.
- Once the plugin is installed go to Comments > Settings.
- Scroll down until you see the row that says Comments loading/pagination type and select the radio button for Lazy loading comments on scrolling.
- Next, go to Settings > Discussion.
- In the Other comment settings section reduce the number in the box following words Break comments into page with.
- Use a small number, less than ten, and save the changes.
- Be careful to leave the checkbox next to this line unchecked. If you check the box, default WordPress comments pagination will override the lazy loading feature implemented by wpDiscuz.
Now, when you visit any page with more than ten comments, only the first ten comments will load. Additional comments will load automatically as soon as you reach the bottom of the comments section.
Lazy Load Disqus
If you do use Disqus, it’s pretty critical that you lazy load Disqus comments. If you don’t, Disqus can be a real hindrance to your site’s load speed. However, lazy loading Disqus comments can actually speed up your site when compared to native WordPress comments.
Disqus Conditional Load is a free plugin you can use to lazy load Disqus on your site. If you’ve never used Disqus before, you’ll first need to sign up for an account and add a new site to Disqus. Once you’ve set up your Disqus site, install Disqus Conditional Load by going to Plugins > Add New, searching for “Disqus Conditional Load”, and selecting Install Now.
Once the installation is complete go to Comments > Disqus and select Upgrade to configure your database to work with Disqus. On the following screen, log into Disqus using your Disqus username and password. From the next screen, select the Disqus site you added just a few minutes prior and select the Next button. After completing that final step Disqus will be installed on your site and configured to lazy load when readers reach the comments section of your blog.
We, in fact, use this plugin on the Kinsta blog and highly recommend it. Besides lazy loading all of the images (avatars), it also lets you disable the count script if you don’t use it. So one less JavaScript call on your WordPress site.
Lazy Load Facebook Comments
The same developer of the Disqus Conditional Load plugin mentioned above also created a free plugin to lazy load Facebook comments on your WordPress site. Facebook’s scripts are known for bogging down a website, even if the scripts are loaded asynchronously.
Lazy Facebook Comments is a free plugin you can use to either load comments on scroll or with a click of a button. This ensures you are loading the Facebook scripts only when they are needed. You can also adjust the number of comments, color scheme, language, width, sorting order, etc.
Summary
Comments are a core feature of most blogs, but a burgeoning comments section can really drag down your site’s load speed. You can speed up comments and your WordPress website by optimizing native WordPress comments and by lazy loading comments to remove them from the initial page load.
Thanks for mentioning Disqus Conditional Load, Jon :)
Side note: There is a plugin for lazy loading Facebook Comments too :) – https://wordpress.org/plugins/lazy-facebook-comments/
Thanks Joel, I have updated the post to include that! Great little plugin. Keep up the great work.
Thanks Brian :)
Thanks for this info. Does Kinsta have recommendations for lazy loading in general (for images, videos, etc). I used to use WP Rocket but that’s not allowed on Kinsta now.. ?
Hey David, I am a big fan of this plugin for video: https://wordpress.org/plugins/lazy-load-for-videos/
We have a post on lazy loading with some other recommendations: https://kinsta.com/blog/wordpress-lazy-load/
I was actually testing this the other night and I personally haven’t found a good image lazy loading plugin yet that works 100%. They all seem to be hit and miss. You have to also make sure they work with srcset update (responsive images).
Thanks for sharing this useful info. We are now using Lazy load on scroll and it is really helpful :)
Great, glad it was helpful!
Hi Brian
Great article! I just noticed a few comments and my replies got my site from 100 to 95 ( from gravitar and query strings and leverage browser cache) listed on page speed and pingdom) using native wp comments
Which plugin (or combination) would help this the most of the options listed in your article?
Hey Howard, if you’re using native WordPress comments the warnings are probably because they are pulling from Gravatar as a third-party resource. You can check out this tutorial on how to load Gravatars on your own CDN: https://woorkup.com/load-gravatars-from-cdn/
I tried to integrate AJAX into the WordPress comments system but it kind of messed up the theme comments and makes it really slow. Anyone have any idea on how to optimize AJAX comments for WordPress?
It’s way to slow to use on a live site, because it’d so slow it actually bothers users.
Thanks for this data. Will Kinsta have recommendations for lazy loading generally (for pictures, videos, etc). I want to use WP Rocket however that’s not allowed on Kinsta currently?
WP Rocket is a fully supported plugin on our platform. Here is the official announcement please take a look https://kinsta.com/blog/wp-rocket/
Great article!
Oh… my —- god!!! I have been searching for this info but only when I typed in the correct keyword, (specifically relating to reducing load speed with comments) did I get this! I had a post with hundreds of comments and my mobile speed was at 20%! I followed the advice here & I also disabled avatars showing up, (I didn’t even realize I could do that before checking the settings) and the page mobile speed is up to 78% with desktop speed of 99%!!! I lost top page rankings, (I think) because of my page speed. This could have literally changed everything for me, thank you SO much!!!!!
Glad to hear our tutorial was helpful Natalie!
Ps – I see you have avatars enabled, do you think taking them off is a bad idea? Or not? – as I think it may improve speed as well? thanks
This post was quite useful for my research!…It has everything I was looking for!
Thanks for sharing!