The idea behind reducing the number of Http Request is to optimize the total content download time and it could save up to several seconds based on the number of individual files are being requested by the browser. The end user experience could be unpleasant if a website takes a long time to download all the requested resources like JavaScript, css file and images. The experience could be even worse if the network latency is higher. In this article, I will try to figure out how to minimize the number of http request. Let's start with something very easy.
Combine JavaScript and Css file
I remember when I started working as a developer back in 2002, I used to have js file with one function inside it which was definitely not a good idea at all. Rather than creating many tiny JavaScript, it is advisable to merge them in to one JavaScript file. That not always possible but you should try to combine them in to as few files as possible. The same rule applies for css file as well. if your website has master page and you can separate the common JavaScript and css used by almost every pages of your site, its desirable to put the common JavaScript and css in to seperate files and reference them in the master page. For example, one of your website pages got some very tiny amount of javascript and css which is used only on that page, in that case i will suggest to include them in the page itself rather than on a different file.
Use CSS Sprites
Although CSS Sprites is not new but i think very few of us use them in our day to day development. In fact is not necessary or suitable in many scenarios but if you can use them wisely it can help you to reduce the number of Http Request to a great extent hence the server load. For those not aware about CSS Sprites, it is just combining multiple images into one single image, so that all the images can be downloaded in a single request rather than sending multiple request for individual images. I am not going to tell you details about CSS Sprites in this article, there are lots of articles you will find, Google is your friend.
Lets talk about some usage scenario now. First of all, it is very useful if your website has multiple background images For example, I have got several background images in my website and I have created one file for all of them later I use background-position in my css to show different background. Secondly, its very common to use different images to create a hover effect. This could be easily accomplished by using CSS Sprites as well. Recently I have come across an interesting article where they have used the CSS Sprites technique to position the image element. Have a look at this article here.
Embed image in to CSS file
Embedding image into css file is another very useful technique and it can be used in conjunction with CSS Sprites for best performance. The idea behind this is to convert the images into a base64 string and use the string as the image source rather than specifying the url of that image. You will find a lots of online tools to convert image to base64 string. Traditionally in our css file we reference the images like the following
background-image: url("images/bg.gif");
but once converted into a base64 string it will look like
background-image:url(data:image/gif;base64,R0lGODlhCAD0AdUAAP////7+/vn5+f39/fz8/Pj4..........);
I have discarded some of the base64 string here. you have to write the css in the following format
url(data:[Content-Type];base64,[base64 string]);
Here are the screen shots of Fiddler (Http debugging tool) when using this two different approaches. I have also attached a sample ASP.NET website project here. Download and try to run to see the effects on your own.
Figure 1: Three requests made when image is not embedded into css file.
Figure 2: Two requests when image is embedded into css file.
I hope that helps. Feel free to leave any comment or suggestion.