Use YSlow Firefox add-on to analyze the performance of your web site

Posted on August 3, 2007 at 3:53 pm

Make sure to read other posts from the FireFox YSlow series!

  1. Use YSlow Firefox add-on to analyze the performance of your web site
  2. How I increased by blog’s load speed by 50% using YSlow

YSlow is a FireFox add-on from Yahoo that you can use to help analyze the performance of your web site and determine why your web pages are slow to load based on the rules for high performance web sites. YSlow integrates with Firebug Firefox web development add-on, so you’ll need to install that first.

YSlow will generate an overall performance scorecard for your page, a complete HTML/HTTP summary, a list of components on the page, and other cool tools like JSLint. There are 13 rules for high performance web sites:

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags

According to Yahoo, this tool has helped to increase the performance of about 50 Yahoo sites by 25 to 50%. Once installed, browse to the page you want to analyze, click on Tools, then FireBug, and choose Open FireBug.

firebug

You’ll now see a docked bar across the bottom where you can inspect every aspect of the web site. Go ahead and click on YSlow at the far right. There are four main tabs in YSlow: Performance, Stats, Components, and Tools. Click on Performance to get your report card score:

yslow performance analyzer

As you can see from above, my blog is not quite optimized yet!! OUCH! I will certainly be working on this problem very soon! You get a score for each of those thirteen performance points. Click on Stats and you’ll see exactly how many style sheets, JavaScript files, and images that were loaded. You’ll get the total size of the page and the total number of HTTP requests.

Click on Components to get a list of what each request was, the response time, the size, and the eTag.

Finally, under tools you can use JSLint to find any problems with your JavaScript files. All JS and All CSS combines all of the separate files into one file. The Printable View option is very convenient since it puts all of the data from all of the tabs together for easy printing.

Overall, a very essential add-on if you have a web site and want to optimize it so that web pages load as fast as possible.

Technorati Tags: , , , , , , , , ,

If you enjoyed this post, make sure you subscribe to my RSS feed!

» Filed Under Web Site Tips

Related Posts

One Response to “Use YSlow Firefox add-on to analyze the performance of your web site”

    Pingbacks
  1. 7 free SEO tools to analyze and optimize your website for speed and compatibility Says:

    [...] articles on YSlow, one about how it helped me reduce the load time of my site by 50% and another on how to setup YSlow. Make sure to read them and install Firefox just for this [...]

Please post your comments/suggestions!