Display Disqus On Click Event

I have recently redesigned Paulund and it was design to concentrate on page loading speeds, I wanted to make Paulund load as fast as possible. There are lots of things you can do to improve the loading speeds of your website, you can compress images, improve your web hosts, make your website code more efficient. But one thing that I choose to do with this redesign was to reduce the amount of HTTP requests each page makes when it first loads.

When looking into the amount of HTTP requests each page was making I noticed a large amount of HTTP calls being made from Disqus. This is a commenting system that you can place on any website, it makes it really easy to add to any site as you just need to include a couple of lines of Javascript to your page. If your site is running WordPress it's even easier to include on your site as you just need to download the WordPress plugin.

Disqus

Disqus Commenting System

Disqus has become very popular because of the amount of the features that come with it, you automatically get:

  • Threaded comments and replies
  • Notifications and reply by email
  • Subscribe and RSS options
  • Aggregated comments and social mentions
  • Powerful moderation and admin tools
  • Full spam filtering, blacklists and whitelists
  • Support for Disqus community widgets
  • Connected with a large discussion community
  • Increased exposure and readership

The problem with using Disqus is that it makes a large amount of HTTP requests to your page. It will return all the comments for the page, the styling of the comments and avatars for the commenters, it will also bring back links to related articles on your site. This is all done through the Javascript but can still affect the speed of your site.

To solve this problem I changed the way I displayed the Disqus commenting system, instead of loading this on the page load event I will display Disqus by clicking on a button to show it.

To do this I will use jQuery to ajax in the Disqus script when it is needed. It still makes the same amount of HTTP requests as it does on the page load but it will only make the requests when they are needed. A large percentage of people that visit a blog will not leave a comment on the page, or intend to leave a comment on the page, why display the comment box if a large percentage of people will not comment. It's more efficient to simply display the comments when they are needed.

HTML To Display Disqus

The HTML to display the disqus commenting system is very simple just add the following code.

<div id="comments" class="comments-area">
	<div class="showDisqus">Show Comments</div>

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

This will add a comment area to the page, the div with class showDisqus is what we will use as the button to display Disqus.

There is another div with the ID of disqus_thread this is where Disqus will display all the comments for the page.

jQuery To Display Disqus

As we already have the div disqus_thread, as soon as we load the Disqus Javascript it will search for this div and populate it with the commenting system.

$j=jQuery.noConflict();

$j(document).ready(function() {
	$j('.showDisqus').on('click', function(){   // click event of the show comments button
		var disqus_shortname = 'enter_your_disqus_user_name';  // Enter your disqus user name

                // ajax request to load the disqus javascript
		$j.ajax({
	         type: "GET",
	         url: "http://" + disqus_shortname + ".disqus.com/embed.js",
	         dataType: "script",
	         cache: true
	     });

	        $j(this).fadeOut();  // remove the show comments button
	});
});

Use the above jQuery to load the Disqus Javascript, on the click event of the show Disqus button we make an ajax call to get the Javascript and return it as a data type of script, then we simply fade out the show Disqus button.

When the script is loaded it searches for the Disqus div and populates it with the comments.

The problem with loading in Disqus on a click event like above is that search engines will not be able to index your comments. So if you want comments on your site to be indexed by search engines you should not use this method of loading comments.

This will now switch the HTTP requests of Disqus to a click event from page load and will make a big difference to your page loading speeds.

Advertise here

Comment