How to Lazy Load Disqus Comments

Today most websites, whether they are on blogger or on WordPress use the Disqus comment system.

WordPress also provides built-in functionality for the comment system but most of the wordpress users also use the 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 a great role on our website. In many cases comments are never seen by all the visitors who visit your site because they don't scroll down to where they are but comments automatically load up, no matter whether the user wants to see the comments or not, and the same happens with disqus comment system which causes bandwidth problem and also slows down your website.

Disqus comments Slow 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 the test, the experts 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.

Too many network requests also have a great impact on the functionality of your website it disturbs the normal functionality of your website and makes your website load slowly which has a 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 many 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 with a tiny JavaScript plugin that 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:

disqusloader.js : 779 bytes when minified

jquery.disqusloader.js : 569 bytes when minified

You have to include anyone js file provided above, depending on the version you use, in your website or embed the code in your website.

For the 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 the jquery version.

When Comments will Load?

The comment system will only be loaded when it is in the viewport and the user is going to see the comments. This lazy loading of the 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 bloggers as well as on the 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 the initialization of this small lazy loading plugin for the Disqus comment system. You can initialize the plugin by adding any one javascript code provided below. Depends upon the version of the 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 a 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 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 consisted of two parts:

Loading of embed.js file

Loading of all the assets and performing other types of network requests

For an 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 the Disqus comment system on your website.

Conclusion and ending thoughts:

In conclusion I want to say that after adding this lazy load functionality on your website you can make your website load faster which helps you in optimizing your website so that Google may rank your website in the top 10 lists.

If you have any questions or any queries related to this article please leave your comments below I will try to resolve your issues as soon as possible.