Designing Bandwidth-sensitive Web applications

Overview
Current web sites improve user experience by using heavy-weight AJAX/ JavaScript libraries,
Style sheets and images. Rich multimedia content using Flash or Silverlight also increases the
per-page payload. Recent Internet statistics also reveal that, the average size of a web page
has increased by a factor of 3 times over the last 2 years. While this is fine for high-speed
broadband internet connections, low speed connections have trouble loading these web
applications. Hence designing a Lite version of the site which excludes the usage of rich
multimedia elements, heavy-weight JavaScript libraries and style sheets, is critical to most
businesses today.
Factors that affect the Page load time from the browser perspective are:

Pipelining
No pipelining means that each request has to be answered and its connection freed up
before the next request can be sent.

No. of outstanding connections

By default, IE allows only two outstanding connections per hostname.

Asymmetric Bandwidth
Ratios of download to upload bandwidth are commonly in the 5:1 to 20:1 range. This means
that serving small objects might mean the page load is bottlenecked on the users'
upload bandwidth.

Solution Approaches
To design a seamless bandwidth sensitive web application, there are three approaches. All the
three involve one common element. Web applications should come with 2 default views
Normal and Lite versions, and the Light versions must be devoid of heavy JavaScript (use
plain HTML elements instead), multimedia elements (No videos, flash objects, and use lower
quality images, or no images at all) and also load a smaller version of the style sheet.
Some best practices while creating Lite versions of HTML pages (not exhaustive)
1. Minify JavaScript and style sheets (Remove indentation, whitespaces, comments etc)
2. Gzip HTML
3. Use smaller images (thumbnails) instead of loading larger versions
4. Use CSS sprites
5. No flash or ActiveX objects
Copyright 2008

Page 1 of 2

The following sections describe the three variations once the application has 2
views, Normal and Lite.

1. Measuring the Free Bandwidth

You can measure the free bandwidth of your users on your site relatively easily, and see if
the free bandwidth of users viewing your pages is substantially below their available
downstream bandwidth. The free bandwidth may vary, as the user may be engaged in
using the bandwidth for some other reasons (like: p2p downloads, You Tube videos, etc.).
Depending on the free bandwidth we will load the appropriate view (basic or standard).

2. Measuring the Bandwidth with Sample Data

And the other way would be to measure the download bandwidth of user by sending a
sample data. In few geographical areas where people still use 56k modems to connect to
the internet, we use this method to store the location's bandwidth permanently on the
server side, and accordingly serve the Lite version of the pages till the user specifically
requests the full, normal version.

3. Allow users to choose manually

In a few situations, it may not be possible to accurately determine if the user is a lowbandwidth user or is simply using up bandwidth in other apps he may have open, so in such
cases we should allow users to choose between Lite View and Normal View.

Recommended Methods

In few geographical locations where internet speeds are low, we can use the second
method: Measuring the Bandwidth with Sample Data. This helps us understand the
limitations of internet connections in that area, and serve our pages accordingly.

However, in many cases where broadband has good penetration, it is recommended a hybrid
approach of methods 1 and 3. The Server will sense the load time, and serve the appropriate
version of the application, and also give users the freedom to override the automatic selection
and individually choose between Lite and Normal views.

Copyright 2008

Page 2 of 2