Enhancing user experience by improving website performance

From my experience I device some points and tools used in the development of the website.

Any website's user experience depends on the speed of data transfer( including images, js and actual page content), amount of the data transferred and number of requests made.

Caching the static content :

All the static files like js, css and images can be cached by the browser so that the same content will not be requested and thus reducing the data transferred through wire. Server can tell the browser to cache the content by setting the following headers. ( Tested in chrome, IE, and firefox).

• Expires header (setting near future expires header with one year from current time)
• Cache control header (Cache-control header (public, max-age=)

Adding these headers will permanently cache the files on the client side. Versioning of the static content is must for controlling of the data flow between client and server. Versioning of the static implies including version number in the url which should be added as part of build process.

Compression of static content:

Adding the cache headers will reduce the number of requests made by a client once the static files are stored in client's cache. Compression of the static files reduces the amount of data transfered over the wire. Compression eats server CPU so compressed bytes needs to be cached for a given URL on the server side and the same bytes should be used when ever the URL is requested.

Merging of the static files:

If a site uses number of static files and each file is included in the body as script or css then browser requests for those files for the first time even though they are cached for later requests.

Number of requests made by the client can be reduced by merging static content into a single file and including that file in the body of the html document sent to the client. This merging process is nothing but copying js file contents based on the hierarchical dependency into a single file. Css files also can be merged into a single file. This can be done as part of build process.

Minifying js/css files:

Minifying is the process of reducing the size of css and js files one of the tasks done during minification process is removal of comment sections, reducing the variable length removing white spaces etc..,

YUI Compressor (from Yahoo) can be used for minifying the content on the server side before sending the bytes to the client.

All the above features can be integrated in any project using JAWR .

Spriting of the images :

Css files contain image reference through background-urls. Number of requests made by the client depends on the number of images referred by the css. Best way to control these requests is to sprite the images. Spriting is the process of creating a single image which is collage of all the image urls referred in the css. So a single big image will be requested instead of multiple requests and thus reducing total request count. Spriting process can be easily integrated into any project as part of build process. Refer to SmartSprites for more details.

Efficient tools for evaluating performance of a website are available as plugins for firefox browser. These tools evaluate all the requests made during page load. Evaluates and suggests steps to improve performance. These tools will also rate the site in the scale of 0-100. The most useful plugins are yahoo's YSlow and google's PageSpeed.