Today most of the websites, whether they are on blogger or on wordpress use disqus comment system. Wordpress also provides built in functionality for comment system but most of the wordpress users also use disqus comment system to eliminate the headache of developing their own local commenting system, dealing with spam comments and managing them.
Comments are the second most thing that has great role on our website. In many cases comments are never seen by all the visitors who comes to your site because they don't scroll down to where they are but comments automatically loads up, no matter the user wants to see the comments or not and same happens with disqus comment system which has waste bandwidth problem and also slows down your website.
Disqus comments Slows Down Your Site:
Disqus comment system usually increases the size of your webpage which also slows down your web page loading because disqus comment system downloads the necessary JavaScript and CSS files from the disqus server which makes your website slow.After test the experts have noticed that a disqus comment system without any comment has a page size of 2.49 MB because it performs a bunch of network requests for JavaScript, CSS, image and font files that are necessary and to be loaded when this disqus comment system loads up.
This too much network requests also has a great impact on the functionality of your website it disturbs the normal functionality of your website and make your website load slow which has very bad effect on your website and your website is de-ranked in Google search engine.
All in One Solution:
The solution for all the issues that I have discussed above like slowing down your website and too much requests and also the increase of bandwidth and page size the solution is only one and that is lazy loading.After Lazy loading your disqus comments will load like this.
I have already published the article about lazy loading images, lazy loading AdSense ads, lazy loading youtube videos and this time I have a technique for you too lazy load disqus comments.
I will be providing you at tiny JavaScript plugin which does this job no matter where the comments are located, above or below the viewport it won't get loaded if there isn't any reason to.
This tiny Plugin is also available in Versions vanilla and jQuery like Adsense lazy load plugin. You can Grab the files from here:
You have to include any one js file provided above, depends on the version you use, in your website or embed the code in your website.
For jquery version of this plugin please make sure you have already added the jquery file in your website HTML Code, If you haven't please add it before using jquery version.
When Comments will Load?
The comment system will only be loaded when it is in viewport and the user is going to see the comments. This lazy loading of disqus comment system also has a great impact on your website and makes your website speed faster.You can also implement this lazy load disqus comment functionality in blogger as well as in WordPress website.
All you have to do is to follow the steps which I am going to tell you and perform the tasks as they are listed.
HTML Code:
First of all you have to add this HTML code where you want to show the disqus comments, usually at the bottom of your webpage.<div class="disqus"></div>Initialization:
Then you have to do initialization of this small lazy loading plugin for disqus comment system. You can initialize the plugin by adding any one javascript code provided below. Depends upon the version of plugin you use.// vanilla
disqusLoader( '.disqus', { scriptUrl: '//username.disqus.com/embed.js' });// jQuery
$.disqusLoader( '.disqus', { scriptUrl: '//username.disqus.com/embed.js' });The username will be your disqus shortname. You will find it in your disqus dashboard.
While initializing this plugin you have to provide the disqus short name or username.
Default Options & their Modification:
By default configuration settings or default options are listed below you can also modify these options according to your requirements the description is also provided for that.var options =
{
scriptUrl: '//username.disqus.com/embed.js',
/*
@type: string (url)
@default: none
@required
URL of Disqus' executive JS file. The value is memorized on the first function call
and ignored otherwise because Disqus allows only one instance per page at the time.
*/
laziness: 1,
/*
@type: int (>=0)
@default: 1
Sets the laziness of loading the widget: (viewport height) * laziness . For example:
0 - widget load starts when at the least a tiny part of it gets in the viewport;
1 - widget load starts when the distance between the widget zone and the viewport is no more than the height of the viewport;
2 - 2x viewports, etc.
*/
throttle: 250,
/*
@type: int (milliseconds)
@default: 250
Defines how often the plugin should make calculations during the
processes such as resize of a browser's window or viewport scroll.
250 = 4 times in a second.
*/
/*
@type: function
@default: none
Disqus-native options. Check Disqus' manual for more information.
*/
disqusConfig: function()
{
this.page.title = 'Page Title';
this.page.url = 'http://url.to/your-website';
this.page.identifier = 'unique-identifier';
}
};
// vanilla
disqusLoader( '.disqus', options );
// jQuery
$.disqusLoader( '.disqus', options );Loading Indication of Comments:
As in the previous article you have seen that you can indicate the AdSense ad loading process likewise you can also do that for this comment system.Loading disqus comment system is usually consisted of two parts:
For indication of loading disqus comments we have to use JavaScript callback function which helps to hide the disqus element when it is not loaded and shows a placeholder instead while the comments are not loaded.
To indicate the loading process you have to use this HTML code instead of using the above one.
<div class="disqus-placeholder">Loading comments...</div>
<div class="disqus"></div>Now the JavaScript code for callback functionality and for showing disqus loading placeholder.
// vanilla
disqusConfig: function()
{
this.callbacks.onReady = [function()
{
var el = document.querySelector( '.disqus-placeholder' );
if( el.classList )
el.classList.add( 'is-hidden' ); // IE 10+
else
el.className += ' ' + 'is-hidden'; // IE 8-9
}];
}
// jQuery
disqusConfig: function()
{
this.callbacks.onReady = [function()
{
$( '.disqus-placeholder' ).addClass( 'is-hidden' );
}];
}We also need a little bit of CSS to hide the Loading placeholder when the comments are completely loaded.
.disqus-placeholder.is-hidden { display: none; }We are done now you have successfully implemented lazy load functionality for disqus comment system on you website.
Conclusion and ending thoughts:
In the conclusion I want to say that after adding this lazy load functionality on your website you can make your website loads faster which helps you in optimizing your website so that Google may rank your website in top 10 list.If you have any question or any query related to this article please leave your comments below I will try to resolve your issues as soon as possible.