How to Speed up WordPress Comments

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.

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.

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. ?

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.

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.