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:
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:
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. Published on Feb 11, 2009 Tags: The Ultimate CSS Tutorial for Beginner Programmers
| Javascript
| firebug
| Optimization
| gzip
| Theory
| JavaScript
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
13 Steps to Improving Webpage Performance
Reducing HTTP Requests on page load
Minify Javascript for performance improvements
Enabling GZip on Apache
AddOutputFilterByType DEFLATE text/javascript application/x-javascript text/css text/html
Expire Headers and Etags for Apache
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:
FileETag MTime Size
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.