• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Optimizing site loading time using YSlow recommendations

YSlow is a firefox plugin that offers you optimization tips for your website by scanning it. To use YSlow you'll need to install Firebug plugin, then install YSlow plugin. And after that, press right mouse button anywhere on your website, choose "Inspect element" and click on YSlow tab.

So before testing how YSlow tips improve website loading speed, let's test website how it is now. For testing purpose I choosed this same website

First results are:

  • Average script execution time: 0,03294 seconds
  • Average page loading time: 1,6425 seconds

Of course these measures are pretty relative, because script execution time depends on available server resources and since I'm one shared hosting, I don't have access to all server resources all the time. And of course page loading time depends on location, internet connection etc. So I tested multiple times and calculated averages.

Now testing using YSlow.

YSlow grade: C 

Overall performance score: 78

We got all A grades except:

  • F - Make fewer HTTP requests    
  • F - use CDN    
  • F - Add expire headers
  • D - compress with gzip
  • B - put javascript at bottom    
  • n/a - Make javacript css external    
  • D - Minify CSS and javascript  

Let's eliminate impossible ones

"F - use CDN " - it is impossible for me to use it, it means you should deliver contents from different servers around the world, so visitor will get contents from the possibly closest server to his/her location. You can get this kind of paid services from Amazon Webservices for example. But we'll leave it as it is.

"F - Add expire headers" - I already provided expiration headers for different type of contents, but the problem is, there are too many script, that aren't running from my host name like google analytic and google adsense, and they have no expiration, they are updated every page refresh. Can't do anything here either.

"n/a - Make javacript css external " - and again, some scripts can't be put externally, like google adsense and analytics.

Others things can be improved, so let's start with "B - put javascript at bottom". One script should remain on top, because it is used as specific content loads, but we can put others at the bottom.

After placing javascripts at the bottom results are:

  • Average script execution time: 0,03336 seconds
  • Average page loading time: 1,2891 seconds

YSlow grade: C 

Overall performance score: 79

Can't tell if my internet connection played role, or it really helps, but we got A for that tip and average page loading time decreased for about 0,4 seconds.

Let's proceed with "D - Minify CSS and javascript".

We'll remove all comments and unnecessary spaces and include all css files in one php script, and js files in other using dynamic compression method.

After minifying  javascripts and css results are:

  • Average script execution time: 0,0452 seconds
  • Average page loading time: 1,108333333 seconds

YSlow grade: B 

Overall performance score: 82

I've got C for minifying tip, again because of javascripts like google analytic and adsense, but page loading time decreased for about 0,2 seconds. Although script execution time increased, but that doesn't definitely mean it is caused by compression script, don't forget I'm on shared hosting. And of course it improved "Make fewer HTTP requests " tip from F to E, because I combined multiple files in one, thus website is making less HTTP requests.

Next step "D - compress with gzip"

I can't access Apache settings on my hosting, but I can enable zlib output compression, by enabling php settings from .htaccess files.

After using zlib.compression in .htaccess files results are:

  • Average script execution time: 0,0406 seconds
  • Average page loading time: 0,9076 seconds

YSlow grade: B 

Overall performance score: 82

So now there an A for compression type and page loading time reduced for about 0,2 seconds.

And last step is "F - Make fewer HTTP requests " and after Minify now it is E grade.

I'll try to reduce HTTP request amount by using  CSS sprites.

After CSS sprites results are:

  • Average script execution time: 0,03975 seconds
  • Average page loading time: 0,8348 seconds

YSlow grade: B 

Overall performance score: 83

I've got C for "Making fewer HTTP requests", because some files can't be combined together, and some image files can't be used in sprites, like patterns for example. But still it decreased page loading time for almost 0,1 second.

Total results:

After following all optimization tips when possible, we decreased page loading time from 1,6425 to 0,8348. That's half of what it used to be. But is it still enough to go through all optimization measures? Well that depends on you and importance of your website site. You might want to optimize only couple of things instead of going through all process, or try to implement optimization already while creating website project. That's up to you.

You may also be interested in:

Powered by

blog comments powered by Disqus