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

Updated on December 19, 2019Published on November 9, 2019

Use-Cases of this Tutorial

Know how to improve page speed performance if using Disqus comments system.

Know how to load Disqus comments using an Intersection Observer.

Loading Disqus' script files and comments on page load can lower down speed and performance of the page, specially in mobiles. A solution would be to use an Intersection Observer to lazily load Disqus.

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.

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.

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.