Lazy loading Disqus in Wordpress

As you may have noticed, I have recently updated theme of my website. I’ve also cleaned up some hardly used features, including the translation bits; It seemed to annoy people more than anything.

But for some reason, the pages with single posts — like this one — were slow to complete loading. A quick look in Firebug showed that there were quite some delays getting images from the Disqus CDN. Since I don’t own that content, nor could I modify the Disqus Javascript, I had to come up with a solution to this.

From working with jQuery, I remembered that their Disqus comments only get loaded once you’ve reached a certain point on the page. Looking into their solution, I figured I could implement the same method with Disqus in Wordpress.

The only requirement is that the Wordpress theme is using jQuery (which many do, and if not, is easy enough to add).

The first part is to find spot on your web page where you think its a good point to start loading the Disqus comments. In my case, I’ve chosen the post tags section, found at the bottom of each single post. There’s a <div class=”cat_tags”> wrapper in my theme at that position, which I will be using for the following javascript change.

Next is to edit the comments.php file in the Disqus plug-in directory (in /wp-content/plugins/disqus-comment-system/). Around line 114 of that file, you will find the following javascript:

<script type="text/javascript">
/* <![CDATA[ */
(function() {
 var dsq = document.createElement('script'); dsq.type = 'text/javascript';
 dsq.async = true;
 dsq.src = 'http://' + disqus_shortname + '.' + disqus_domain + '/embed.js?pname=wordpress&pver=<?php echo DISQUS_VERSION; ?>';
 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
/* ]]> */
</script>

This the actual loader for the Disquss javascript. As you can probably tell, this bit is always loaded. We’ll change it to load only when we reach that certain point on our web page by wrapping it in a little jQuery magic as follows:

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
 var ds_loaded = false;
 var top = $(".cat_tags").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 = 'http://' + 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>

As you can tell from the code, the top variable sets the position of where we start loading the script (in this case at the cat_tags class). Just remember that classes start with a period (.) and id’s with a pound/hash sign (#). When you use a class, make sure it hasn’t been used elsewhere on the page.

That’s it really. With these modifications in place, the Disqus javascript will only be loaded when a certain point on the page has been reached.

The one caveat with this modification, is that it may not persist through plugin updates (e.g., a newer version of the Disqus plugin may overwrite this file). In that case, just come back here on how to redo the changes… ;-)