To Blog or Not To Blog

Response time of a web site is a critical component of user experience. Here are some practical steps to reduce your response time.

It is recommended that you install Firebug and YSlow before you proceed. YSlow provides you with a wealth of statistics about your page (server requests, external file size, response time, images size etc.)

1- Place all CSS/Java Script in external files

Move all styling and java script in external files. Browser has to download the inline styling and script every time the page is accessed. In comparison the external file can be cached.

2- Single vs multiple JS/CSS files

When you move java script in external files, you can,

a) Place all code in one file

Pros

• File is downloaded only once and then used from cache hence there is only single download cost
• There are fewer requests to server

Cons

• There can be a delay when user accesses the page for the first time
• Even a small change in the code results in a fresh download of file

b) Divide the code in separate files

Pros

• Files are smaller in size hence easy to download for browser

Cons

• The file download cost is now distributed across different pages. Users would feel slight delay on every page for the first time they visit that page
• For every file, a request is sent to the server

Using a balance between both extremes is the right approach. From common sense, if the time it takes to request for file exceeds its download time, its better to combine it with some other file.

3- Use YUI File compressor

Compressing (minifying) the javascript & css files can reduce the file size significantly. There are many tools available to compress the js & css files. I personally find YUI compressor quite useful.

http://developer.yahoo.com/yui/compressor/

4- Use Image Preloading to render images

Images constitute a large part of any web page. If your web page has many images, you should consider Javascript Preloading. This means that,

• Use the ‘img’ tag only for images that you have to download
• Use preloading to load images as they are required

This however means that (some) part of your web page will be rendered using Java Script. Also, IE 6 has a problem in preloading images less than 5kB (took me 3 days to find out :@)

5- Enable gzip in server

The final ingredient is to compress the serve compressed contents from server. Most modern browsers support gzip contents. You can gain over 50% size reduction using gzip.

http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

Related posts:

1. django: How to get model class from model name