Lazy Loading Disqus Comments - EasyBlogging.net

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.

Table of Contents

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.

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 the links given below.
disqusloader.js : 779 bytes when minified

jquery.disqusloader.js : 569 bytes when minified

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 and 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:
Loading of embed.js file and Loading of all the assets and performing other type of network requests

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

In the conclusion I want to state that after adding this lazy load functionality on your website you actually make your website load faster than usual, this helps you in optimizing your website or blog to rank higher in Google search this also makes your website eligible to rank your in top 10 list in Google search. If you have some queries or better solutions then please let me know in the comments below, your comment is highly appreciated.