Improving the performance of Disqus (Lazy loading, selective loading)

Aug 02, 2020 by Kolappan N

Disqus is a great commenting platform. It provides a great deal of control and it’s free tier is not heavily limited making it an ideal choice for small and medium size blogs. After trying out few of the alternatives, I decided to implement Disqus on this blog.

After installing Disqus, I noticed that my blog’s page speed score in Lighthouse dropped from a beautiful 90+ to a disappointing 56.

Disqus code for Jekyll, by default only loads on pages where comment is enabled in Jekyll front matter. But if you are using a different platform, the first step would be make the disqus script load only in pages with comments.

Score of the rest of website unaffected by Disqus integration

I searched for a options to defer or lazy load disqus to improve the performance on pages that use disqus. I came across this blog post from Useful Angle which utilizes Intersection Observer to lazy load Disqus. The solution is perfect expect for the fact that Disqus config variable were not loading correctly. As pointed out in the comments of that original article, declaring the disqus config variables in a global level fixed that issue.

Even after lazy loading, the website score was not in the previous levels before Disqus. But it certainly improved to a lot. A 84 is better than the previous 56.

Score of the website after lazy loading Disqus

Here is the code to lazy load Disqus,

HTML

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

CSS

#disqus_thread {
    min-height: 100px;
}

JavaScript

/**
* Disqus config
* Docs URL: https://help.disqus.com/en/articles/1717084-javascript-configuration-variables
*/
var disqus_config = function () {
    this.page.url = 'PAGE_URL';  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = 'PAGE_IDENTIFIER'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    this.page.title = 'PAGE_TITLE'; // Replace PAGE_TITLE with your page's title
};

/**
* Lazy loading disqus comments
* based on: https://usefulangle.com/post/251/disqus-comments-improve-page-load-speed
* disqus.scss is also related to this
*/
var disqus_observer = new IntersectionObserver(function (entries) {
    // comments section reached
    // start loading Disqus now
    if (entries[0].isIntersecting) {

        /* #region Code from Disqus */

        (function () { // Function from Disqus
            var d = document, s = d.createElement('script');
            // Replace the DISQUS-USERNAME with yours
            s.src = 'https://DISQUS-USERNAME.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();

        /* #endregion Code from Disqus */

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