Lazy loading Disqus in WordPress

on March 20, 2011 in Projects with 11 comments by

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… ;-)

 

11 comments

  1. posted on Jun 19, 2014 at 4:10 AM  |  reply

    Thanx, this was great help!

  2. posted on Jun 13, 2014 at 4:52 PM  |  reply

    You can use this plugin if you are on WordPress platform. Try this http://wordpress.org/plugins/disqus-conditional-load/

  3. WP
    posted on Feb 20, 2013 at 7:06 PM  |  reply

    Not working with the latest version.

  4. posted on Feb 16, 2013 at 9:35 AM  |  reply

    The Lazy Loading is not work perfect when you have Cloudfare on your site . the login is not working .

  5. posted on Jun 25, 2012 at 2:15 PM  |  reply

    […] Reference: myatu.com […]

  6. posted on Jun 24, 2012 at 11:41 AM  |  reply

    just what i was looking for…i will soon create a post and give a linkback to this post. very helpful thanks…i recently installed disqus and was having trouble loading it after all the elements in a page have been loaded…it was also taking time to fetch gravatar images…this solved my problem! :)

  7. posted on Oct 04, 2011 at 4:39 AM  |  reply

    Some people say when updating disqus or whenever they release a new version, the downtime really sucks. And is it true they sell users’ data to third parties? I hope they’re not doing that.

  8. posted on Jul 01, 2011 at 1:25 PM  |  reply

    The only drawback is that whenever they come up with a new version, you have to update the file. However, works like charm :) Thanks

  9. posted on May 03, 2011 at 4:46 AM  |  reply

    You can found in some blogs that there is a comment page. It is powered by the different engine. In my own blogs I do use Disqus because of its high quality services.

  10. giannii
    posted on Mar 29, 2011 at 8:10 PM  |  reply

    Which images were you seeing slow load times for? Can you shoot me an email with a couple links? g (at) disqus.com

    • posted on Mar 29, 2011 at 9:30 PM  |  reply

      I’ve sent you some URLs as well as two screenshots of Firebug output.

Join the discussion

Your email address will not be published. Required fields are marked *