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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
