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. 

 

When developing this website and measuring the performance using YSlow (a great tool for measuring the performance), I was thinking how to setup the CDN (Content Delivery Network) for my site, as YSlow was always showing a Grade ‘F’ on this item. My belief was CDN is something that is only affordable by the BIG BOYS like GOOGLE, YAHOO, MICROSOFT etc. But out of curiosity, I started searching on GOOGLE and come across the very nice post by Andreas Krohn, where he showed how you can setup your own CDN using GOOGLE APP Engine. As it is the only free service available right now, I decide to give it a try and believe me, in about 20 minutes I have my own CDN ready to use in Google. Even though the free service google is offering now has some limitations ( no of hits and limitation on file size), but it is more than enough for me at this stage and should be enough for us mere mortals running small sites or Blog.

All of you might know what a CDN is but for those who don't know, CDN stands for Content Delivery Network and it is all about deploying the same content across different servers located on different geographical location so that the content can be served to the client from the server which is closer to the client location. For example, if you are browsing from Bangladesh, it make sense to serve you from any server located within south asia region other than serving you from any distant server.  It cut down the download time of those content and increase the performance of the site. But there is an ongoing debate about application hosted on Google App Engine. There is no clear indication whether application hosted on Google App Engine are deployed  on Google CDN or not? However, after deploying the static content of tariqulazam.info on Google App Engine, i use the ping command for tariqulazamcdn.appspot.com and got 66.102.11.141 as the IP address. I asked my friends residing in different countries and thats what i got from them

209.85.227.141 from Bangladesh
64.233.169.141 from GAMBIA

So, i am preety confident that those content are deployed on Google CDN. Even if it do not, there is another significant advantage of using a seperate host to serve the static content. By default, browser never download more than 2 files from a single host at a moment. That means using a different host to server static content increase the number of parallel download, hence reduce the total content download time. However, it does not necessarily mean increasing the number of host will reduce the download time dramatically, because there is an overhead involved for DNS Lookup for every individual host. Increased no of host means increased number of DNS Lookup time.

I will not go through the details of how to setup the CDN as Andreas Krohn did a great job explaining the process in details. So just drop in his post and make your own CDN.

Lets introduce another Performance point ‘Expires Header’ for static content. I have my site hosted at GoDaddy and built using ASP.NET and running on IIS 7.0 and before implementing the CDN I have used my web.config to add expires header to the static content and that was giving me a Grade ‘A’ in YSlow. But after I moved all my static contents to Google CDN, YSlow is giving me ‘F’ on this. My Final grade remains the same after and before the CDN. Then I google a solution for ‘Adding expires header for static content in Google App Engine’. I got some and decided to give them a try. But again frustrated to see that most of them are using Python to accomplish this. I know 0% of python and not interested to learn at this moment.

I then turned my focus on the python application configuration file (app.yaml) just to see whether it has got any declarative solution and as a relief It really has. All you have to do just add the default_expiration in the app.yaml file. I have put a value of one year for my static content.

default_expiration: “365d”

After this I have got two ‘A’ grade in CDN and Expires Header and It also feels that my site is performing faster. My whole site performance is now over 95 out of 100.  Leave any message or comment if you have any problem installing CDN on your own. I will share in future articles what I have done to make it better. Stay tuned.