InfoTales

A web page have multiple objects like images, css, JavaScript and flash etc. Browser have to send one http request to the server for each object. Each request adds a round trip to the server. Server have to receive and process each request and send the response.

For enhancing web application performance the rule is simple, reduce http requests. We will discuss methods to do it, in detail but first lets look why we should reduce http requests?

How reducing http requests can help in web application performance?

Web browsers only allow limited number of concurrent connections per domain, more requests means that requests have to be queued one after an other. Web page is not considered completed unless all objects are downloaded. Additionally each request have its own overhead of send information to server and wait for server response. Most of the times each request will also contain cookies, which is addition overhead. See the left image for a page having long waterfall of http requests for images etc.

Now compared to a page having less objects, you can see a small amount of http requests and faster page completion. Reducing http requests can significantly reduce the response time for user and will make web application faster.

How to reduce http requests

Normally there are 3 types of objects are used in a web page. These are image, css and JavaScript files. Different techniques can be used to reduce requests.

Combining Images

Best way to reduce requests for images is to use sprite image. Sprite image contains all images need in a single image. You will need some css skills to use sprite images to give look like a normal images. You can do further self study on sprite images and how to use it.

See an example sprite from Google home page, which contains all 45 icons combined in a single image. Imagine only one request has be made instead of making 45 request in queue mode.

Combining CSS files

If a page is having more than 1 css files, these files should be combined into 1 file. You can put code of one css into the other file to reduce extra request.
Imagine two files files 1.css and 2.css are called from page like
<link rel="stylesheet" href="style/1.css">" type="text/css" media="all" />
<link rel="stylesheet" href="style/2.css">" type="text/css" media="all" />
You can put code of 2.css at the end of 1.css and remove the call for 2.css from code.

Combining JS files

If a page is having more than 1 JavaScript files, these files should be combined into 1 file. You can put code of one JS into the other file to reduce extra request.
Imagine two files files one.js and two.js are called from page like
<script type="text/javascript" src="js/one.js"></script>
<script type="text/javascript" src="js/two.js"></script>
You can put code of two.js at the end of one.js and remove the call for two.js from code.

Using browser cache for performance

Another effective way to reduce http requests is to cache the static contents in browser. This gives advantage when visitor visits the page again. On next visit all images and files are loaded from local cache and no http requests are sent. This give very fast experience to user.
Ideally no images, css and js file request should be made when page is viewed 2nd time. See two graphs for first and 2nd view of page.

Repeat View Graph: The js and image request are for Google analytics only as these are not controllable by us, other than this only one request is sent for the whole page.

Please read our post Web Application Performance: HTTP Features for Performance to see how to cache images, css and js files.