YSlow: Checking Web Performance
For a long time now I’ve been looking for a good tool to help optimize the pages I’m making, especially with the onset of some really mysterious timing out happening over at my writing blog. Firebug helps in showing me how long each page element loads, but that’s pretty much it.
What’s great is that Yahoo! has released the previously-internal Firebug extension YSlow, which grades web pages according to a list of criteria which impacts page load performance. The criteria that YSlow looks at was discussed by Nate Koechley during the High Performance Web Sites presentation at the @media conference in London this year, which I’ll list below:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Move scripts to the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookup
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
I tested it out on my writing log, and I certainly wasn’t surprised to see it failed (its grade was F)! This blog scored a C, which is passable, I suppose, but should really be better. What’s wonderful about YSlow is that it also itemizes what made your score low, and what makes each item’s score low. For example, for my writing log, it told me:
Minimize HTTP requests: F
This page has 17 external JavaScript files.
This page has 23 CSS background images.
So obviously, given the comments, you have a clearer view of what needs to be done in order to optimize your website to speed up loading time.
I’ve only started using it, but it’s a really nifty, useful tool. Remember that it’s a Firebug plugin, and so you have to have the Firebug plugin installed in Firefox to get it to work. (Firebug itself is a fabulous plugin, so it’s a good idea to have it installed, especially if you work with JS and AJAX.)