YSlow – Helping slow web pages load faster

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 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.

13 Steps to Improving Webpage Performance

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.

Reducing HTTP Requests on page load

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 <head> tags of your site. Now you need to the same thing with your one Javascript file, instead add this <script> include a close to the closing </body> tag as you can.

With those 4 items completed, I would suggest re-running the YSlow test. If you had your CSS and Javascript in many separate files, I’ve bet you’ve already significantly increased your score.

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.

Minify Javascript for performance improvements

The next step is to Minify your Javascript. Minifying your Javascript entails running it through a process that removes line breaks, comments, basically anything that adds extra size to the file. Please, please, be sure to not overwrite your regular Javascript file with the minified one, always keep the unminified copy somewhere else to ensure you can easily update the code if you need to. You’ll just need to reminify it afterwards.

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.

Enabling GZip on Apache

Now that our Javascript is minified, next up is to GZip all of our components. I’ve had good success adding this to my .htaccess files:

[code]
AddOutputFilterByType DEFLATE text/javascript application/x-javascript text/css text/html
[/code]

The above tag tells Apache to GZip all Javascript, CSS, and HTML files on the server. This one tag in itself can accomplish a lot all on its on. To give you an idea, a site I was optimizing started off being over 600KB and took about 26 seconds to load. Adding the GZip line, the site went down to 220KB and took only 16 seconds to load!

With just GZipping and Javascript minification working together, the load time dropped from 16 seconds to just under 10 seconds. I was absolutely extactic at the progress I was making so for and so was my client!

Expire Headers and Etags for Apache

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:

[code]
ExpiresActive On
ExpiresDefault A29030400
Header append Cache-Control “public”
[/code[

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:

[code]
FileETag MTime Size
[/code]

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.

YSlow – Helping slow web pages load faster