>YSlow is Yahoo's answer to showing you exactly why your web page is not performing to the highest possible standard in terms of speed, through optimisation. The add-on for Mozilla Firefox was written by Steve Souders and his team and Yahoo and aims to teach you good web practices in helping visitors get the best of your site.
The first point to make is that there are two ways in which you can optimise your web site: on the back end, and on the front end. If you are running a CMS or MVC framework on the back end of your site then the chances are that you are not going to have an easy job optimising the code to deliver the site as fast as possible.
Well, according to Steve, you're in luck! I'm not suggesting here that you should not worry about optimising the back end of your site, because you should, but it's a long and arduous process with little influence on the end user experience compared to front end optimisation. It has been claimed that you can save users about 5-10% of the overall optimisation of a web page optimising the back end. Compare this to the 80-85% optimisation you can perform on the front end and you certainly know where to start!
The great thing about front end optimisation is that for the most part it is simply and easy to do. A lot of it requires a few specifics in an htaccess file and some thought behind your front end scripts, as well as minifying and concatenating those files. There are plenty of minification tools out there, or you can do as I did and write your own. read on and I'll go through a couple of simple ways you can optimise your web pages and what the process means.
On top of this, once the browser has fetched the file it must then parse that file and, if you have a CSS that contains background images the browser then needs to go and fetch those as well. This can be a long and arduous process for the browser.
You may be thinking, "How can I concatenate images?". This is actually easier than you might think thanks to CSS. In CSS you can specify a 'background-position', that is, where in that image you want the background to start from. What you can do with your images is create a 'sprite' (no, not a small goblin-looking thing!), or a concatenation of all of your images into one and then use CSS to position that image where the background you require is found. An example of a site that does this is Yahoo
To be continued...