Speeding up your website the Yahoo! way
Yahoo recently came out with two great resources for web developers: the article Thirteen Simple Rules for Speeding Up Your Web Site and YSlow, a FireFox Firebug add-on which accompanies it. Most of the rules any good web developer should be aware of, but there are a few things you can learn. Here’s a few things I wanted to touch upon.
One of the points, “Minimize HTTP Requests,” is basically the age-old idea of not putting 50 large images on a page at once. Who wants to download all of that? With web applications becoming more and more complex lately there’s a tendency for people to have lots of external CSS and Javascript files included. This rules applies to these cases as well. There are plenty of major sites right now which have 10+ includes in the header — this is no good. Optimize that! You can usually combine a lot of these scripts and styles which results in not only a single HTTP request, but can also be cached by the browser.
There’s also a few server side tips which are good to have in your bag of tricks. Most servers do not have expires header set by default and, because you cannot see it, most people don’t even know to look for it. In short, it makes sure the browser knows it can cache your content so subsequent requests are loaded from the browser cache. The same goes for using Gzip. This is the most effective way of automatically getting your file size down and saves on bandwidth. Certain Javascript libraries have been known to shrink from 100+k to 17k when it’s enabled!
There’s also a few things in Yahoo’s list that, while I know they apply to larger presences, do not apply to the average website. If you aren’t running a major website with a worldwide audience you probably aren’t going to want to worry about a Content Delivery Network. This is also the same for ETags; if your site isn’t spread out around multiple servers you aren’t going to have to worry about clashing ETags either. It’s always good to have an understanding of theirs concept and have that knowledge stored away for when you need it.
Know for the best part about — if you didn’t jump straight to downloading the plugin that is. After you’ve gone through these concepts I bet you really don’t want to check every website manually. Well, you don’t have to! That’s where the FireFox Firebug addition YSlow comes in (a mouthful isn’t it?). I’m assuming you’ve already been using the Firebug plugin; this addition adds another tab which will run all of these tests for you and give you a grade. To get started just load up a website, open the Firebug pane, and on the YSlow tab click Performance. There are a few other tabs to go over there, but this is enough to get you started. Now go and optimize your sites!
