8 steps to reduce blog load times from 4sec to below 1sec

I’m obsessed with metrics. I’m obsessed with the number of RSS subscribers. With Google PageRank. Google seems to push faster internet to everyone, with fiber to the home, their own DNS, the page speed plugin and hosting Ajax libraries. As I wanted to get some more Google love, going from PR4 to PR5 and not falling back to PR3, I needed to speed up my blog. But where to start? Isn’t this impossible if you’re not a professional? All of you might have thought about speeding up your website or blog I guess along the same thoughts:

• Page speed influences pagerank (PR) in the future
• Firefox experienced a 15% increase in conversion for downloads, by speeding up their landing page recently. For a blog this means better conversion of RSS subscribers and newsletter signups.
• I was shocked when I saw Google Webmaster Tools show page speeds of 5-15 seconds, still not sure why but urgently needed to get better.
• Faster pages just feel more professional.
• Took the opportunity to declutter the blog. Removed external widgets like PostRank I no longer use.

The result of my work is that page loading times are down from 4sec to below 1sec mostly (measured by Pingdom Tools) – Still too slow as I want to get below 0.5sec, but much better than before.

Here are the 8 steps I took to get this amazing improvement:

1. Inspect your page, e.g. with YSlow, Google Page Speed or Pingdom Tools. Measure, measure, measure. Think about every little Javascript, every image and every CSS. Are they really needed?
2. Delete all plugins in WordPress you do not really really need – they often inject Javascript or CSS into the page, even if you do not use the plugin in a widget or on the page.
3. I’ve added a cookieless domain, cmstatic.com to post stuff I do not want to put into the CDN. YSlow suggested this and I’ve seen Stack Overflow use sstatic.net.
4. Move to a CDN – most of my readers are in the US, my server is in Germany. This leads to slower image downloads and especially latency, or startup times before the first byte arrives. I’ve chosen Cloudfront for now because it was easy to setup and I had an Amazon account. I’m using CloudBerry for uploads, it’s free in the basic version and just works. I might move to a cheaper CDN that better supports (SimpleCDN is full!) GZIP and expire headers. I’ve added a domain for my CDN usage at cdn.cmstatic.com which adds some flexibility.
5. I’ve removed merciless Javascript from WordPress (JQuery was twice on the page), I’ve minified JS and packaged all CSS into one CSS file. This results in less DNS lookups, less http connections and smaller files and overall reduces page loading times significantly.
6. Added expire header in the far future with a version URL scheme ( /version/images/ … e.g. /1/images), so everything is cached in the browser. I can increase the version number with new assets. Expire headers are easy to do with Apache on cmstatic.com by adding .htaccess, more difficult with Cloudfront (see above, a reason to possibly move to another CDN). I also removed ETags when possible so the .htaccess looks like this:

   ExpiresActive On
   ExpiresDefault "access plus 1 year"
   FileETag None
   

7. Added GZIP where possible, was easier with Apache than Cloudfront:

   <Files *.js>
   SetOutputFilter DEFLATE
   </Files>
   

8. I’ve reduced the number of posts on the page. Now there are only 3 posts on the start page. I might move to summaries, as they are shorter, have less images, faster download.

Overall I’m pleased with the results. Especially as the page really feels much faster to me, not only the metrics are better. So what’s left to do: External images and JS, like tweetmeme, quantcast and Google Analytics still are slow – something I need to solve.

I had some fun during all of this and learned a great deal about CDNs, so I suggest you do the same.

You can leave a Reply here. Of course, you should follow me on twitter here.