Pagespeed: Use Disqus with Lazyload

Those who use the Disqus comment system in their blog will sooner or later have noticed that there are sometimes loading delays caused by Disqus. The solution: Lazyload.

The basic idea: if a defined point is reached while scrolling in a post, the comments are reloaded. If a reader does not read the whole post, the comments are not loaded at all. If a reader reads a post completely, the comments are loaded in time so that they are displayed when the comment area is reached.

This "lazyload" approach of images is well known (it is also used here in the blog), because images that are not displayed in this way are not transferred either. With an adaptation of the Disqus script this behaviour can also be used for the comment area. There are different approaches, but I use a variant that requires jQuery - for the lightbox functionality this javascript library is already included, so there is nothing to load additionally.

Edit Disqus plugin

To use Lazy Load, the Disqus plugin must be adapted, more precisely the file disqus-comment-system/comments.php. You start editing in WordPress by selecting the submenu item "Editor" in the menu item "Plugins" and then the corresponding plugin from the list in the upper right corner. At the very end of the comments.php a Javascript is included, which is replaced with the following code:

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
 var ds_loaded = false;
 var top = $(".related_post_title").offset().top; // WHERE TO START LOADING

 function check(){
  if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) {
   ds_loaded = true;
   (function() {
     var dsq = document.createElement('script'); dsq.type = 'text/javascript';
     dsq.async = true;
     dsq.src = 'https://' + disqus_shortname + '.' + disqus_domain + '/embed.js?pname=wordpress&pver=<?php echo DISQUS_VERSION; ?>';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
  }
 }

 $(window).scroll(check);
 check();
});
/* ]]> */
</script>

Particularly important is Line 5: there you define which HTML element triggers the reloading of disqus, I chose "Similar Posts" or the CSS class "related_post_title" as it is still located well before the commentary section and well after the start of the post. Depending on the theme it may be necessary to use a different ID (then with # in front) or a different CSS class there.

Disqus Lazy-Load in practice

The advantage of Lazyload is obvious: only the data that is really needed is loaded. This is good for the page loading time, which in turn can bring advantages at Google - and of course better usability. Furthermore: since Disqus itself does not work without Javascript there is no further disadvantage by using jQuery.

However, there are also disadvantages: for example, the recognition of the loading mark does not always work reliably and with every browser. As a result, it can happen that no comments are displayed at all. Here in the blog I will leave the function activated for the time being and see how it works. If you want to learn more about Lazy Load and Disqus you can find several script examples and instructions on the net, e.g. here or on Github.com.