DEVseo

Making It Your Web

YSlow: How To Use Yahoo's Optimisation Tool Part 1

What Is YSlow?

>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.

Reduce The Number Of HTTP Requests

An HTTP request is when the browser requests a file from the server in order to load the content on a web page. The process here is, when you type a URL into a browser the browser has to go and look up that page. Once it has found it it must send a request to the server for the HTML (1 request). Once it has this HTML page back it needs to parse it and then go back and find any scripts that the page needs in order to load (including javascript, CSS and images). A browser can generally only send up to 2 HTTP requests at once so if you have a load of javascript or CSS files it's going to take a while to fetch them all.

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.

The simplest way to optimise this is by simple not having so many files! That may sound a little silly, and you may be thinking, "But I need all my files?". Well, you may need all the information in your files, but you do not need to request them all to get it. I wrote a very simple script that checks to see if a minified version of my files exists (that is, main file with -min attached to it) and if it doesn't exist it is passed to a function that will automatically create that file and return it. The creation function for that simply scans a directory for the files it needs (I have a fairly ordered server), runs them through a minification process and concatenates them. It then returns that one single file rather than having to send multiple. I use this same function for javascript and CSS.

Doing this reduces the request, in one example, from requesting 30 files, to just two, one CSS and one javascript. That just leaves images.

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...

Comments (be the first)

Add A Comment

Please note: all comments are moderated before they are published on this page.


me15ss
Cancel Reply

Loading

Complete!