Load Disqus on demand
If you want commenting on your blog Disqus seems like a great solution but it comes at a cost, page-weight. If you care about your visitors you should load that overhead only when it is requested.
Don’t get me wrong, Disqus offers plenty of advantages over self-hosted options and it’s a solution I use myself when I require commenting. My only concern is the weight it adds to a page. Even with no comments, i.e., an empty comment form, the call to Disqus will load an extra 226Kb, minimum. If your page has comments this can be far higher. Don’t assume your visitors will always want that, give them the option to choose.
Admittedly, Disqus is loaded asynchronously so it won’t block loading of your page, a point which Disqus are quick to make but this doesn’t account for the fact that people pay for bandwidth. If your visitors happen to be on a mobile device they may pay a lot for that bandwidth. If you care about page-weight you’ll want to ensure that additional overhead is only loaded if it is actually requested.
I created a quick Github Gist to show how I’d handle this.
400: Invalid request
//Requires jQuery of course.
$(document).ready(function() {
$(“.show-comments”).on(“click”, function(){
var disqus_shortname = “YOUR-DISQUS-USERNAME”; //Replace this value with *your* username.
//ajax request to load the disqus javascript
$.ajax({
type: ‘GET’,
url: ‘http://’ + disqus_shortname + ‘.disqus.com/embed.js’,
dataType: ‘script’,
cache: true
});
//hide the button once comments load
$(this).fadeOut();
});
});
view raw gistfile1.js hosted with ❤ by GitHub
<!– An element a visitor can click if they <3 comments! –>
<button class=‘show-comments’>Load Disqus comments</button>
<!– The empty element required for Disqus to loads comments into –>
<div id=‘disqus_thread’></div>
view raw gistfile2.html hosted with ❤ by GitHub
Assuming you are already loading jQuery then you can simply drop the script into your template’s main scripts file (which you already combine and minify, right??) and the html into your posts /article view. You could inline the script of course, but personally I wouldn’t as I like to keep things organised.
Where are your comments?
The observant among you will have already noticed that, for the time being, I’ve decided to not bother with commenting on my blog posts. I did actually implement this solution on this site, along with a method to allow/disallow commenting on a post by post basis, then I decided to leave it disabled.
I’d love hear what you have to say though so feel free to comment directly on my code at Github or Tweet me.
Thanks.
