Hosting Tutorial & Guide

How to Lazy Load WordPress Comments for Better Performance

updated on Jan 23, 2017
How to Lazy Load WordPress Comments for Better Performance There are many reasons if your WordPress loads slowly. After trying all the major speeding-up methods, you may also want to apply some less significant performance tweaks, for example, lazy loading WordPress comments.

When you use lazy loading, your comments won't be loaded automatically to anyone who lands on the page they are included. Instead, they only appear when they are demanded. Depending on your choice, the comments may be loaded when readers scroll to a certain place on the page, or they may be served when readers click on a "load comments" button.

Serving comments when they are actually needed can bring you some benefits, including:
  • Reducing the page size so as to improve the page load time, which attributes to better reading experience and makes your site more search engine friendly.
  • Saving the bandwidth, which helps reduce your hosting cost.
Despite the benefits, you should notice that lazy loading comments is not always suitable for every site. If you only get a few comments for your posts, you will not need such a speeding-up method for the sake of engagement. But in the case that you have dozens or hundreds of comments in a single post, you can try.

The easiest way to enable lazy loading is to use a plugin. And in below, we will tell which plugin to choose when you use the default WordPress comment system, Facebook comments, and Disqus comments.

Lazy Load the Default WordPress Comments

If you are using the WordPress built-in comment system instead of a third-party one, you can count on Lazy Load for Comments to lazy load your comments. This plugin is simple and lightweight, and it is actively maintained.

After installing the plugin, you need to access Settings > Discussion. On the settings page, you will find a section of "Lazy Load Comments". By default, lazy loading is enabled, and in the dropdown, you can choose:
  • On Scroll – Loading comments automatically when readers scroll down to the end of your content.
  • On Click – Displaying a "Load Comments" button which readers have to click in order to load your comments.
  • No Lazy Load – Disabling lazy loading for comments.
Set Up Lazy Load for Comments

Up to now, you have configured the plugin completely. You can then visit your website, read a post, and then try loading comments according to your settings. If you have chosen to load comments on click, you will see the following button.

Load Comments

However, to minimize the negative effects that lazy loading brings to your user experience, we'd suggest automatic comment loading on scroll instead of manual loading on click.

Lazy Load Facebook Comments for WordPress

There are many ways to integrate Facebook with WordPress effectively, among which using the Facebook comment system instead of WordPress comments is a good method that helps reduce spam. If you have taken this method, you can make use of Lazy Facebook Comments to enable lazy loading and reduce the external HTTP requests for shorter page load time.

Designed by the same developer as Lazy Load for Comments, this plugin functions in the same way, too. But after installing it, you have to visit its special settings page through Settings > Lazy FB Comments to set up the plugin.

On the settings page, you will deal with a number of settings. For example, you have to enter the Facebook application ID which is used by your Facebook comments, customize the comment box width, and decide how many comments can be shown by default.

Set Up Lazy Loading

Besides, you are able to choose "Light" or "Dark" as the color scheme, select the way to load comments, and customize the text of the "Load Comments" button. When all the settings are done, you can save the changes and test the plugin on your WordPress site.

Customize Lazy Loading

Lazy Load Disqus Comments

Disqus is a popular third-party comment system for WordPress sites. By lazy loading Disqus comments, you can see a significant reduction of the extra HTTP requests. To enable this feature, we'd suggest the Disqus Conditional Load plugin which is offered by the same developer as the former two plugins introduced in this tutorial.

The free version of this plugin should suit your needs, but there is still a premium version which comes with more features, for example, allowing comments to be loaded when readers start scrolling, adjusting comments width, and using shortcodes to load comments.

Upon the plugin activation, you need to click the DCL Settings menu item to configure the plugin. Under the "DCL Settings" tab, you will be faced with the following options.
  • Choosing whether to load comments on scroll or on click.
  • Enabling or disabling the Disqus count script.
  • Customizing the "Load Comments" button text.
  • Customizing the loading message when there is a delay.
  • Enabling caching support when caching is enabled on your site.
Lazy Load Disqus Comments

When these settings are successfully dealt with, save them, and try lazy loading the comments on your site. If there is anything that doesn't meet your expectation, change the corresponding settings, or contact the plugin developer for support.