One of the side affects of developing a more robust, interactive and aesthetically pleasing website is the possibility of an adverse performance impact. When considering all of our potential audiences, it’s very important that we try to maximize the performance of EWU’s future site. One of the ways we are doing this is by following some performance rules, called “YSlow”, developed by the performance gurus at Yahoo!. I need to credit Ryan for bringing YSlow to my attention back when he first started here. Since being introduced to it I’ve been on the verge of obsessing over how we can make the new site faster.
So what is YSlow? YSlow is a set of 13 rules that affect the performace of a web page. Following the rules can lead to performance improvements of 25-50%. That’s a major improvement especially considering the rules are quite simple:
- Make Fewer HTTP Requests
- Use a Content Delivery Network
- Add an Expires Header
- Gzip Components
- Put CSS at the Top
- Move Scripts to the Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
I’m not going to expand on each rule here but I’ve linked to the explanation for each rule on Yahoo’s site if you’re interested. With the possible exception of rule 2, using a CDN, we will be attempting to follow each of these basic rules when developing and deploying the new site.
Measuring page performance using YSlow has been made easy by means of a couple Firefox plugins. Yahoo has developed a Firefox plug-in for YSlow to use with the Firebug plugin (a must-have plug-in for web developers). The YSlow plug-in analyzes web page performance with respect to each of the 13 rules and then assigns a performace grade of A through F.
If these rules have the positive performance impact that we expect, my hope would be that we can apply the same rules to other web-based IT systems around campus.
This is an awesome tool and should definitely be used when considering some of EWU’s user base. When we were conducting research, one of the recurring themes we saw was that folks didn’t want to wait forever for the site to load — good performance was and continues to be an important feature for the site.
Regarding #1 in the list of criteria you’ve outlined — it is probably the most important improvement you can make with regard to performance on your site. Having worked on sites where the web servers didn’t have the luxury of a content deployment network like Akamai, users across the country (or even on the other side of the world) would often complain about the slowness associated with the latency caused by geography. Reducing the number of HTTP requests the client has to make can soften this blow considerably.
In walks… a sprite.
The site’s “permanent” graphics should be in a site-wide sprite and possible one for each of the templates that are created.