Bandwidth Optimization

don't let your website crash at that crucial point

Imagine an online contest taking website, or railway ticketing website, as soon as the clock strikes, there are hundreds or thousands of visitors thronging their bandwidths. Such website often get crashed or hanged. They need to make the most of the bandwidth alloted. Bandwidth optimization has grown into an essential topic for Web developers around the world. It's of vital importance to commercial websites especially those which have timed events. There are several examples where this aspect requires a good deal of thought.

Let's look at a closer picture. Imagine data coming out of the server, when a number of users come to the site at one time. The hundreds of HTTP-request made to the server are queued. While the server is a single computer(if we ignore a cloud platform where the request is redirected to another server in place of being queued) . It can handle a limited number of requests at a time. Several requests get timed out either from client or server side resulting in a small percentage of successful requests. The number of requests that a server handles at a time is the bandwidth. This is different from the one which is expressed as the amount of total data which the server provides in a given time often expressed as GB per month, but is generally unlimited if you are ready to spend a little. Such crowded scenario can be avoided by using certain bandwidth optimization techniques. I know a few of them so sharing with you. Don't let your website crash at crucial moments.

1. Using image sprites Image sprites is a technique where a number of images are clubbed into one single image or a image and it's on-hover image are clubbed together. Such techniques are generally in use for toolbar icons or even those which are to be loaded again and again.

2. Compress images Images can be hugely compressed to reduce it's size and scrap all unwanted hidden data from the image. For example, in Photoshop you can “save for web” instead of normal save. Similarly, large images can be substituted for SVG vector graphics. A cleverly made vector graphics can be made very small in size, though this is not always feasible. Use a compressed JPEG image whenever possible.
   Use polyclip.js for adding alpha channel to JPEG images. It'a a useful javascript library developed by Zoltan "Du Lac" Hawryluk using HTML5.

3. Cache images Images often tend to be bandwidth extensive resource. It is best if you ask the user to cache it in the browser. This can be achieved by javascript and is recommended when an image is to be loaded in almost every page.

4. Minification The script files can be minified to a large extent and it's an obvious first step towards decreasing the total size transferred to the client for a complete page loading. Mnification is the process of compressing script. Minificaton finds out the repeating group of words in file and tries to reduce them to numbers. It also removes all unwanted spaces and trailing tabs to make up a small script file.

5. Clubbing together the imported files Every web page page is accompanied with a host of supporting files, the stylesheets and script files. All these files are requested from the server in separate HTTP-requests. These requests often increases the loading time. If there are more than three or four such files they can be clubbed as single stylesheet and single script file. The backend can also be programmed to bundle all these files together before sending to the client.

6. Avoiding Flash I am discouraging Flash but Flash is actually a very high bandwidth consumer. Using Flash content increases the loading time on the client side as well. With the advent of HTML5, SVG etc. (I am not very sure how WebGL ranks in this respect) , it is recommended to avoid flash wherever possible.
7. Moving to a cloud platform/higher bandwidth At the end, when all the above means fail to make your website stand against a wave of traffic, it is always advisable to shift to a better host providing a wider bandwidth. You are lucky enough to get such huge traffic go ahead and spend that extra dollar to get a next generation cloud platform.

“When traffic comes grab it with both hands”

The trick is to reduce the number of HTTP-requests made to the server and compressing a complete page into the smallest possible size. There are many other methods that I don't know and would love to hear from you. Please mention those methods in the comments.