YSlow - Helping slow web pages load faster
Published on Feb 11, 2009 by Jamie MunroThis article is a continuation to my article about Firebug. YSlow is an add-on to Firebug that helps developers determine why a site is loading slowly.
After you install YSlow, if you open up Firebug in Mozilla a new tab will now appear called "YSlow". The next steps would be to load a web site that you want to check it's performance. After the web site has loaded, click the YSlow tab, if the results don't compile automatically, click the Performance button to run the diagnostics.
The grading is made up of 13 steps. For each step you receive a grade from A to F. An overall grade is compiled in the same format.
The 13 steps are as follows:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires Header
- Gzip components
- Put CSS at the top
- Put JS at the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
I normally ignore these items because they don't usually apply to the sites that I'm optimizing: Use a CDN, Avoid CSS expressions, Reduce DNS lookups, and Avoid redirects. This helps reduce our list to 9 items.
I focus on the remaining 9 items in the following order: Make fewer HTTP requests, Remove duplicate scripts, Put CSS at the top, Put JS at the bottom, Minify JS, Gzip components, Expires header, and Configure Etags.
After reloading the page, I bet you didn't notice a huge speed improvement? Don't worry, the above 5 steps were mostly to help with some optimizations, but the next 4 will really help.
I've had good success with JSMin for a minifier. I think Google also offers one, if you search for it, you'll find a bunch.
6 down and just 2 to go (expires header and etags). From my experience, I don't think it's necessary to do both of these steps as they are very different. I added them separately and ran different benchmarks for each to see if one is better than the other.
To add Expires Headers, in your .htaccess file, copy the following lines:
Header append Cache-Control "public"
Now reload your web site and prepared to be amazed. Assuming your results are similar to mine you should be floored right now. My load time went from 16 seconds to just 2 seconds! I added ETags with expires headers and found no difference.
Because I found no difference, I decided to remove the Expires headers and just add the ETags. To configure ETags, again in your .htaccess file, add the following line:
FileETag MTime Size
Save your file and reload your web site. You should have seen a significant improvement, but if your results were similar to mine, they weren't as good as expires header. My load time went from 16 seconds to a respectable 5 seconds.
That's all I have to share for this article. If you've found it useful, but would like more information on each of the 13 steps YSlow offers excellent descriptions of each.
Until next time.