How to lazy load Disqus using vanilla/native javascript! - Updated 2022

I recently found out that my blog was slow according to google pagespeed. I scored below 50, but I could have sworn that when I created my blog it was in the 90s. There were two reasons for this, Google Adsense and Disqus. Both took an immense amount of resources to load and had extra scripts and resources that they needed, which slowed down the initial load of my pages and therefore I decided to lazy load disqus so my pages would load faster.

In order to lazy load disqus you will need to make some changes to your site. The following solution is based on not loading the javascript file for Disqus until the comments would be in view.

HTML

For Disqus to work, you will have a piece of HTML - a <div /> with the id disqus_thread and attributes that disqus uses to identify the page:

<div 
     id="disqus_thread"
     post-id="5f081a952416320039388812"
     post-url="https://peterdaugaardrasmussen.com/2020/06/27/how-to-lazy-load-disqus-using-native-javascript"
     />

In the above HTML there are two attributes, the post-id and the post-url. The post-id is the unique id of the page and the post-url is the canonical URL of your page. These you likely already have and are good to go and you do not need to change what you already have in your HTML, now you just want to lazy load Disqus.

Javascript

In order to lazy load Disqus we need to add a small javascript script:

var element = document.getElementById('disqus_thread');
if (element === null)
	return;

var isLoaded = false;

window.addEventListener('scroll', function (e) {
	var currentScroll = document.scrollingElement.scrollTop;

	if (!isLoaded && (currentScroll > element.getBoundingClientRect().top - 100))     {
		isLoaded = true;

        //TODO Insert your usual disqus code after this line, mine is below:
        window.disqus_config = function () {
            this.page.url = element.getAttribute('post-url');
            this.page.identifier = element.getAttribute('post-id');
        };
	
        var d = document, s = d.createElement('script');

        s.src = '//peterdaugaardrasmussen.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
	}
}, false);

In the above we first check if the disqusthread div is present, if not we do nothing because not all pages have Disqus. If it is present we add an event listener to the scroll of the page. When the user scrolls we check if they are a 100 pixels from the Disqus thread div and if so we initialize it. In the above TODO part you need to place your own code!, at least for the src attribute. This will make Disqus load only when your users scroll and if your users are about to see the Disqus comments. It is basically a wrapper around your original disqus script which delays loading it.

All that is needed is the script above. Depending on how you load your javascript you might have to add a <script> tag around it or somehow include it on your site. Write below if you have questions!

That is all

I think this is a very simple solution. I hope you liked it! please let me know in the comments down below - of course powered by lazy loaded Disqus :)