Implenting YSlow Best practices part 1

7 06 2009

This week we had a discussion in office about how to reduce the page loading time. YSlow is the best tool to check page performance. Current YSlow uses 22 rules. These points are sorted according to the importance. In those 22 rules we decided to start with first 6 points. YSlow documentation describes very well about 6 points. Lets take a look at these 6 points.

Minimize HTTP requests

Now a days we are using more javascript, css, images, flash for the websites to look very rich, and improve the usability. So we are using more images, javascript. If we load each javascript, image file independently there will be more over head of http request and reponse handling between client and server. More number of http requests causes more time to load the page. We can reduce http requests using following points

  1. Use simple UI design.
  2. Combine all javascript files into single file.
  3. Combine all css files into single file.
  4. Use css sprites

Making Simple UI design may not possible for the rich content site, but with simple design we can reduce the requests of images. How we make all javascript and css files into single file. we can right one simple script which read the javascript files and put it in a single file. This script has to execute every time when u change any javascript file and commit it. So best way is to use some build tools which will run these scripts before you commit or after commit is over. I tried using SCons but later used doit I suggest to use individual javascript files for development, and use combined single file in the production environment.

Use a Content Delivery Network

To implementing geographically dispersed content, no need to redesign the application architecture. As a first step start serving your static files from CDN servers.

Add an Expires or a Cache-Control Header

Browsers will store the information in the cache. For browser to store data in the cache server has to send Cache-Control Header. Keep the expiration time very far like after 10 years, so that browser will keep on loading data from the cache without sending request to server. So that loading time of the page will reduce. But first time when a page is loaded it has to send request to server to get data, from the second time onwards the browser will load from cache.

Here there will be another problem, if we change the css, or javascript the browser has to load the changed file rather than loading the file from cache. To do that the url of the static file should have new query string like The q value should change when ever file is changed. So the server side code has to handle this.

Gzip Components

Browsers can understand the gzip, deflate format of content. So server can send compressed data using gzip or deflate. By compressing the data we can reduce the size of data upto 70%. To compress the data we no need to do any special things in our code. Just specify Content-Encoding: gzip in your server configuration. Apache 1.3 uses mod_gzip, Apache 2.x uses mod_deflate. You can specify this for nginx or lighthttp servers also like this.

Put Stylesheets at the Top

We need to keep style sheets in the header, because the page can render progressively. When the page is loading progressively, user can see the information without waiting for long time. User did not get pissed off.

Put Scripts at the Bottom

Browser can keep 2 connections open with the same server. So browser can load images, css, html simultaneously. When browser loading javascript it can not open parallel connection with server, so by keeping javascript at the bottom, the browser will load html css and user see the site.In some cases it is not possible to move javascript down when you are using document.write, and is a clue to browsers that they can continue rendering. So it is upto the usage of the javascript