Loads Disqus comments on click with native JavaScript. Opens comments when linked to directly.

disqus-ondemand.html

<div class="comments-block">
    <button id="show-comments" onclick="disqus();return false;">Load Comments</button>
</div>

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

<script>
var disqus_loaded = false;
var disqus_shortname = 'xxxx'; //Add your shortname here

function disqus() {

    if (!disqus_loaded)  {
        disqus_loaded = true;

        var e = document.createElement("script");
        e.type = "text/javascript";
        e.async = true;
        e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
        (document.getElementsByTagName("head")[0] ||
        document.getElementsByTagName("body")[0])
        .appendChild(e);

        //Hide the button after opening
        document.getElementById("show-comments").style.display = "none";
    }
}

//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length > 8) {
    if (hash.substring(0, 8) == "comment-") {
        disqus();
    }
}

//Remove this if you don't want to load comments for search engines
if(/bot|google|baidu|bing|msn|duckduckgo|slurp|yandex/i.test(navigator.userAgent)) {
   disqus();
}
</script>

This helps a lot! Thank you!!! I'm using it on my website on a JAMstack and Google Page Speed is 100 with this and 74 without it!!!

Do you have a similar tutorial for the default WP comments system using vanilla JS?

Sounds interesting but it's not something I've tried to do before.
Most of the sites I work on tend to have comments disabled.

@robwent there is a similar plugin that does it, but it uses jQuery and using it increases my page loading time by nearly 2 seconds coz I don't use jQuery. I have tried to find a solution using vanilla JS to no avail. I (and many others) would really appreciate if you could kindly get something working for the default commenting system.