YSlow - Helping slow web pages load faster

[bholus10]

This 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 ****on 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:

1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires Header
4. Gzip components
5. Put CSS at the top
6. Put JS at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. 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.

The easiest way to increase your score with HTTP requests is to group all of your CSS and Javascript into one large file each. After your Javascript is in one large, it makes it easier to clean up duplicate scripts.

After your CSS is into one file, ensure your one stylesheet include is within the tags of your site. Now you need to the same thing with your one Javascript file, instead add this