by Jamie Munro
Posted on May 20, 2009
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.
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 <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.
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.
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:
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!
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:
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:
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.
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:
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 <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.
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.
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:
AddOutputFilterByType DEFLATE text/javascript application/x-javascript text/css text/htmlThe 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!
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:
ExpiresActive On
ExpiresDefault A29030400
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 SizeSave 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.
I have been developing web sites for over 10 years and 6 years professional. I recently have decided to begin sharing my knowledge through articles and my blog:
http://www.endyourif.com
Print This Article|
Send To A Friend|
RSS Feeds|Read More Related ArticlesCOMMENT ON THIS ARTICLE...
Post them now in our forums for quick, helpful advice from thousands of members!
PHP Redirect
The Best and Easiest Google-Friendly Change to Your Web Site
Using External Coding To Improve Search Engine Placement
The Best and Easiest Google-Friendly Change to Your Web Site
Using External Coding To Improve Search Engine Placement
SEO Articles
Internet Marketing Articles
Development Articles
General Articles
And also in our Archives
Internet Marketing Articles
Development Articles
General Articles
And also in our Archives
Drive traffic to your business and get recognized as an industry leader by sharing your knowledge on Site-Reference. Authors are given a wide range of exclusive benefits here at SR; so checkout what we can offer to those that…
We’re always on the lookout for new writing talent so even if haven’t written for the web yet, feel free to contact us anytime
We’re always on the lookout for new writing talent so even if haven’t written for the web yet, feel free to contact us anytime
cycling writes: Thanks for the info I havent tried Expires Headers before I get right into it tomorrow
12:43:48 Tue May 26 2009 CDT
Ayden writes: That's a brilliant tool. Using it now to test on my site.
8:25:02 Mon May 25 2009 CDT
Dan writes: I will check it out now,
thanks...
16:43:24 Sat May 23 2009 CDT
Shakti writes: Sir,
Your Article is informative and interesting.
Since you are hi-tech and Web oriented person, you have assumed certain things, that need to be clarified to the non-techies like me-
You have given certain scripts to be added to:
....add Expires Headers, in your .htaccess file, or
....To configure ETags, again in your .htaccess file, add the following line:
FileETag MTime Size
But it is still difficult for persons like me to understand how and where to paste these lines.
It would be great if you examplify the same for greater elaboration.
Shakti
8:30:20 Sat May 23 2009 CDT
CampingDude writes: Thanks for the refresher course. I used Magento for a while and wondered why it was so slow, Yslow really showed me what the problems were. Don't use Magento anymore. Great program for finding ways to speed up your website.
20:56:50 Fri May 22 2009 CDT
JDWebs writes: I have been using these tools for qite some time and they have proven very beneficial in improving my sites' load time. This is a good article for those that have not yet found these tools, or have not yet tried them.
13:30:33 Fri May 22 2009 CDT
Donovan writes: Thanks for this information. Could Gzip php pages as well?
10:43:42 Fri May 22 2009 CDT
Jeremy Webb writes: A really useful article, and some great tips for optimising static sites.
I'd say it is still useful to check redirects, because sometimes web hosts can set up domain names and hosting in a very un-optimal way, and a bad redirect not only slows loading but can upset search engines also. It's a 10 second job to check using the tool here:
http://www.searchenginefriendlyhosting.com/tools.php
You are looking for a nice "200" server response rather than a 302 (temporary redirect)
The other thing I'd say if that after all that, you still have problems, check who else is on your server. It is not unusual to share a server with many sites, but perhaps one is a resource hog?
http://whosonmyserver.com
10:31:58 Fri May 22 2009 CDT
The Black Ace writes: Firebug is a must for interface developers. Nice to see another useful plug-in added to the mix.
9:03:34 Fri May 22 2009 CDT
Pages: 1 | 2