How to Prevent Disqus Comments System from Slowing Page Speed & Performance

While testing usefulangle.com's speed and performance, it came as a surprise to me that Disqus comments system used on pages was really impacting their speed and performance. Performance in mobile devices was especially dropping real bad.

Google PageSpeed Insights score was around 60 for almost all mobile pages :

However apart from page performance, I was pretty satisfied with Disqus comments system. It made no sense to try out some other commenting system, or roll out a custom commenting system.

I decided to try using Javascript Intersection Observer to lazy-load Disqus' script files. Turns out, it made a huge difference. Performance for mobile pages straightaway became 90+ !!

The rest of the article will discuss how to make changes to the code so as to lazy-load Disqus.

Disqus Default Installation

While installing, Disqus website just tells to insert their Javascript code where we would like Disqus comments to load.

<div id="disqus_thread"></div>

<script>
var disqus_config = function () {
	this.page.url = PAGE_URL;
	this.page.identifier = PAGE_IDENTIFIER;
};
(function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://your-website.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>

Developers generally insert the comments container <div id="disqus_thread"></div> in the desired section in HTML, and the script just above </body> tag.

On page load, this Disqus script loads synchronously in the main browser thread, blocking rendering till it is loaded. This script will then load other resources, and get the page's comments and other information. This whole process impacts the performance.

This default installation needs to be changed so that Disqus' script files are not downloaded on page loading.

Lazy-Loading Disqus with an Intersection Observer

The reality is that comments are just a part of the page content. Users usually read the page content first, and then scroll down to the comments section. There is no real need to show comments on page load. Even if comments are shown on page load, there will be still time before users actually start reading the comments. Showing Disqus comments on page load is a waste of resources.

The alternate way is to wait for the time till users reach the comments section. Once they get there, we can start loading Disqus. Users would probably be willing to wait for a few seconds at that point. Even if they are not willing to wait for comments to load, at least we would have our main content covered and majority of our targets would have been met.

We can use Intersection Obsever API to detect when a user reaches the comments section. Once reached, Disqus' Javascript can be executed.

var disqus_config = function () {
	this.page.url = PAGE_URL;
	this.page.identifier = PAGE_IDENTIFIER;
};

var disqus_observer = new IntersectionObserver(function(entries) {
    // comments section reached
    // start loading Disqus now
    if(entries[0].isIntersecting) {
        (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://your-website.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();

        // once executed, stop observing
        disqus_observer.disconnect();
    }
}, { threshold: [0] });
disqus_observer.observe(document.querySelector("#disqus_thread"));

For the Disqus comments container, we can add a loading message or spinner inside it. Till the time Disqus' files are not loaded, the user will see the loading message, and will probably wait for the comments to load.

<div id="disqus_thread">
    <div id="disqus_thread_loader">Loading Comments</div>
</div>

It is also important to give a minimum height to <div id="disqus_thread"></div> container so that the Intersection Observer does not have to observe an element of height 0.

#disqus_thread {
    min-height: 100px;
}