For the last few days, I’ve been optimising this blog in order to have it load faster. Why? A site that loads fast is a good site.
One of the most obvious things would be compressing the content sent to the client/browser. For somewhat obvious reasons, NearlyFreeSpeech didn’t enable the gzip module on Apache nor does allow one to enable it in .htaccess.
After a few digging in the NFS forums, I came to the conclusion that I had two options: either using MultiViews or a RewriteRule in my .htaccess. Since the MultiViews needed some more work, I opted for the following rewrite rules:
Header add Vary accept-encoding
RewriteEngine on
RewriteCond %{HTTP:accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*) $1.gz [L]
Translated to plain English, this checks whether the requested file isn’t already a .gz file and if there’s a gzipped version of the requested file in the server. If so, the gzipped version is sent to the browser instead. This allowed to reduce in more than half the size of most files (html, css and js).
The next step was “smushing” the images, that is, compressing them further. There’s a service (Smush.it) that tries several techniques to compress images without changing the image quality. This shaved a few more KB.
However, that wasn’t enough for me. I needed more. This was becoming almost an addiction, trying to make my blog so light it loaded instantly.
So I used another cool service (CompressorRater) to try several minification techniques on Javascript code in order to squeeze some more KB. Success!
I still had too many HTTP requests going on. Each HTTP request adds some loading time to the total. Since I was using three stylesheets (one for resetting the CSS styles, another for the code syntax highlighter and one for the blog stylesheet itself), I first tried merging them all into one file. That had disastrous results and I’m still not exactly sure why.
“Alright”, I thought, “I’ll just leave the reset CSS alone and merge the other two.” It worked fine. Then I minified it, which shaved about half the original size.
At this point, there wasn’t much more I could do. The bottleneck now was loading the comments from Disqus. But there was one thing bugging me: the code for updating the comment count was running in every page, even in the index/archive, where there was no need. That introduced some delay in a completely static page.
It turns out the code the guys at Disqus tell you to use do something silly for a reason I cannot understand: after checking for thread/blog post links, it contacts the Disqus servers to get the comment count even if finds no such links!
So, I changed it to the following:
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
document.write('<script type="text/javascript" src="http://disqus.com/forums/scarybox/get_num_replies.js' + query + '"></' + 'script>');
}
}
})();
This fixed the problem without seemingly affecting the script’s behaviour.
I also updated the link to jQuery, from version 1.2.6 to 1.3.2. The new version is 3KB bigger but it’s also much faster than the pre-1.3 versions. For instance, the “About” slider on the top of this blog now slides up and down much smoother. All in all, it was worth the extra 3KB, since I removed much more in my little adventure with compressing stuff.
Now the slowest part of my site is loading the Disqus comments, and I have no idea how to speed that up. Any suggestions?
