Introduction
These guidelines should help you design and build websites that are fast, easy to use and work over low bandwidth connections.
The Parameters
We need to make pages load fast, but how fast?
Forty years of research into Human Computer Interaction has found acceptable response times of computer systems, based on the limits of human attention. Jakob Nielsen's on-line article "Response Times"[1] gives a good introduction. Research has found that users will abandon web pages that take longer than 10 seconds to load. However, if useful data starts to appear within 2 seconds, they are prepared to wait up to 30 seconds for the page to finish loading[2].
In summary the golden rules are:
- pages must load within 10 seconds
- incrementally displayed pages must show useful content within 2 seconds and complete loading within 30 seconds.
Page loading speed is determined by the size of the page, the number and size of external files it references (JavaScript, style sheets, images and multimedia), and two properties of the user's Internet connection (bandwidth and latency).
Internet connections vary around the world. In Kenya, at the time of writing, all international connections are routed through high latency satellite links. This means that the minimum page loading time in Kenya is about two seconds - making it easier to fulfill the first rule than the second.
How large can pages be and still load within 10 seconds?
The quick answer is 25kB.
The size depends on the available bandwidth. It is hard to make a good estimate of available bandwidth. We chose to base our estimates on African Universities because there are recent surveys of their available bandwidth. Also a number of initiatives supply educational information to these universities (the African Digital Library, AGORA, HINARI, JSTOR and PERI) which are affected by a lack of bandwidth.
According to the African Tertiary Institutions Connectivity Survey (ATICS 2006)[3] the average bandwidth available to an African university is 1254kbps. On average, there are about 600 connected computers in each university. Assuming that 1 in 20 of these computers is using the Internet at any one time (based on ADSL contention ratios), this would give each user about 40kbps on average.
However most universities do not have a Committed Information Rate so their true bandwidth is roughly half of the stated bandwidth they have bought. Many developing world institutions are not implementing effective bandwidth management practices which further reduces available bandwidth[4].
We arrive at a figure of 20kbps as a sensible upper limit on bandwidth available to the user, which is consistent with our experience.
Page Size Limits
Taking into consideration the desired response times at 20kbps gives us the following upper limits on page size:
| Page Type | Size |
|---|---|
| non-incrementally loading page (10 seconds) | 25kB |
| incrementally loading page (30 seconds) | 75kB with useful content within first 5kB |
These limits are for the total page including images, external JavaScript files and external CSS files. Sharing images, script files and CSS files between pages is encouraged, as it allows them to be cached by the user's browser and reduces the loading time of subsequent pages. They should still be counted in the page size because they will slow down each user's first page view of your site, affecting their first impressions.
The Web Page Speed Report[5] advises:
Size Indicators
Any object over 75kB, such as an image or PDF document, could take upwards of 30 seconds to load. Usability research suggests that users will often abandon processes that take more than 30 seconds without feedback. All links to objects over 75kB should, at the very least, be clearly labeled with the size of the object, for example:
Report on PDF Optimisation (237 kB)
Accessibility
Websites should cater for access by people with disabilities. Designing for accessibility and designing for low bandwidth can be very similar, but please note that we have not attempted to include guidelines for accessibility within our low bandwidth guidelines. The WebAIM project[7] provides guidelines on designing for accessibility.
Summary
The biggest single factor in website usability is speed of response which depends on page size. In developing countries many large sites are so slow they are unusable. Assuming 20kbps as an upper limit on bandwidth gives the following maximum page sizes:
| Page Type | Size |
|---|---|
| normal web page | 25kB maximum |
| incrementally loading page | 75kB maximum |
Footnotes
[#1] Jakob Nielsen "Response Times: The Three Important Limits", http://www.useit.com/papers/responsetime.html
[#2] Andrew King "Speed Up Your Site: Web
Site Optimization", New Riders Publishing 2003
[#3] African Tertiary Institutions
Connectivity Survey (ATICS 2006), downloaded 15/07/2007 from:
http://www.gesci.org/files/Connectivity%20in%20African%20tertiary%20institutions.pdf
(399kB)
[#4] http://www.aptivate.org/attach/Projects.BMOPositionPaper/AptivateBMOPositionPaper.pdf (133kB)
[#5] http://www.websiteoptimization.com/services/analyze/wso.php
[#6] W3C, HTML 4.01 Specification: W3C
Recommendation 24 December 1999, http://www.w3.org/TR/html4/intro/intro.html