Do you use Disqus comments instead of native WordPress? If you do, Then you must have noticed some extra HTTP request that is slowing down your WordPress performance. However, Earlier I used to use Disqus comments on this blog and I removed that because of performance issues. Though, I still use Disqus comments on my other blogs, but I do utilize lazy load system, That reduces extra HTTP request made by Disqus.
I have found few other bloggers who have similar performance issues on their blog for using Disqus and they need a solution. So I thought, It’d be a great idea to share this tutorial with them. Here are the tips to lazy load Disqus comments and say bye to an extra HTTP request made by Disqus.
If you are using WordPress, Then there is an awesome plugin on the WordPress plugin repository, That you can use to make your Disqus comments only load when a reader want to see. And The plugin is Disqus Conditional Load developed by Joel James from JoelSays.com
I know, You love Disqus because It’s helps in preventing Spam in WordPress and turn your blog into a community and a few more other useful features. However, Disqus also has some issues that you may know and if not, Here are some of those.
Anyway, Through this article, I will show you how to lazy load Disqus comments or add a click to load Disqus comments button in WordPress.
Lazy Load Disqus In WordPress
As I wrote at the beginning of this post, The Disqus conditional load plugin is awesome to make Disqus loads only when a reader wants to load. That’s mean, It will help you to add a “Click to Load comments” button instead of Disqus comments. So The Disqus comments won’t load until it requested.
Here In this tutorial, I’m going to use the Disqus conditional load plugin and I recommend you also if you are on WordPress.
The very first step is installing the plugin to your WordPress And I know you are technically enough to install any plugin to your WordPress. However, If you still need assistance in installing a plugin in WordPress, You may refer our beginners guide to install WordPress Plugin.
Notice this: If you already have the Disqus comment system enabled on your WordPress, You should disable that before installing DCL. Otherwise It can conflict with each other.
Once you successfully installed DCL on your WordPress, A new tab titled “Disqus Settings” will be added to your WordPress admin panel like this:
If you already have installed the official Disqus plugin, DCL will take the settings from the official plugin and you don’t have to enter or authorize your Disqus account. So all things are functional, If not, You can insert your Disqus forum credentials into DCL settings to activate Disqus forum from DCL.
Now go through Advance Features in DCL menu to make comments only load when requested. The advance features, configuration will look like as shown below:
You will see two lazy load option when the “Load Disqus when :” expanded, One is On Click and another is On Scroll. There is one more option called “Normal – Disable Lazy Load”.
Okay, Let me explain each option:
- On Click: By Choosing On Click option, A button or customized text will appear instead of comments. So when The button gets clicked the comments will load.
- On Scroll: This is the option that I recommend. By Selecting On Scroll, The comments will load when a user scroll to the comments section.
- Normal – Disable Lazy Load: By selecting this option, DCL won’t have any affect on your blog comments. If this option enabled, The Disqus comments will load as usual without lazy loading.
If you have chosen to use On Click option, You will notice that by selecting On Click in DCL advance feature option, Some input field will appear under the settings as shown below:
On the additional field, You can add the “text to display on the button” and what to appear while the comments loading and even custom CSS for designing the button’s look and feel.
So, After activating Lazy Load for Disqus comments in your WordPress blog, How’s your blog performance? You may want to share what happened next after activating Disqus lazy load via the discussion box below.