'Disqus Comments affecting my pagespeed. How can I either lazy load or click to show comments?

Hi I've static website(made with Hugo) with Disqus installed. My website load time is really affected by ~30% in negative. So, I wish I could prevent it from loading it until a person reaches to that section or a better approach is that there'll be 'show comments' button that totally leave on visitor to decide.

I'm already using lazyload(lozad js library) but it's not working with disqus even I tried following code too

var iframes = doc.querySelectorAll('iframe');

iframes.forEach(function (e){

  e.classList.add('lozad'); // adds required 'lozad' class
  var iframeAttr = e.getAttribute('src'); 
  e.setAttribute('data-src', iframeAttr); // lozad needs source data in data-src attribute
  e.setAttribute('src', ''); // empty src attribute so that library use it at right time
});
pagespeeddisqus


Solution 1:[1]

Zachary wrote a tutorial for Hugo sites on how to display a Show comments button and have the Disqus comments only displayed when a reader click on the button.

As a bonus, the Disqus Javascript file embed.js will only load when the button is clicked.

To add this to your site, first, create a partial and name it disqus.html. Inside this file, put the following code:

<div id="disqus-container">
  {{ with .Site.DisqusShortname }}
    <button id="disqus-button" onclick="showComments()">Show comments</button>
    <div id="disqus-comments">
      {{ $isDummyName := eq . "yourdiscussshortname" }}
      {{ $isServer := $.Site.IsServer }}
      {{ if or $isDummyName $isServer }}
        <p>Disqus comments are disabled.</p>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ else }}
        <div id="disqus_thread">
        </div>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-main.js" . | safeJS }}
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ end }}
      <noscript>Enable JavaScript to view Disqus comments.</noscript>
    </div>
  {{ end }}
</div>

Then, create two Javascript files. First one call it disqus-js-common.js. Inside this file, add the following code:

// Remove button
var disqusButton = document.getElementById('disqus-button');
disqusButton.parentNode.removeChild(disqusButton); 
// Un-hide comments
var disqusComments = document.getElementById('disqus-comments');
disqusComments.style.display = 'block';

The second Javascript file call it disqus-js-main.js. And inside this one, add the following code: 

// Config
var disqus_config = function () {
};
// Build and append comments 
var d = document;
var s = d.createElement('script');
s.async = true;
s.src = '//' + "{{ . }}" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', + new Date());
(d.head || d.body).appendChild(s);

Finally, add a little bit of CSS to make everything looks better: 

#disqus-container {
  font-size: 0.85rem;
  border: 1px solid;
  padding: 1.5rem;
}
#disqus-button {
  width: 100%;
}
#disqus-comments {
  display: none; 
}
#disqus-comments,
#disqus-comments iframe {
  max-height: 65vh !important;
  overflow-y: auto; 
}

Source

Solution 2:[2]

It can be achieved with pure HTML and JavaScript

But since I really like Alpine.js this is how it can be done

<button
  x-data="disqusComponent()"
  x-show="!loaded"
  @click="toggle()"
>Show/Post Comments
</button>

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

See Load Disqus Comments on demand

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmad Al Maaz
Solution 2 hugronaphor

Related Questions