Introduction

Problems Using the Web (3,291 subjects)
Problem           Pct. of Cases (%)
Slow Ads                       62.3
Speed                          61.4
Broken Links                   57.1
Register                       49.7
Graphics                       48.5
Find New Information           45.4
Paying for Content             45.3
Script Error                   42.6
Junk                           41.1

• To simply hit the STOP button and leave the site.
• Not to come back after all those slow sessions.

Jakob Nielsen claims in [9] that the response time is determined by the weakest link in the chain from server to the browser:The

• throughput of the server.
• server's connection to the the Internet.
• Internet itself.
• user's connection to the Internet.
• rendering speed of the user's browser and computer.

Although most of the designers have been arguing that the powerful computers and broad band Internet access will be available to most of the users as the technology improves, that goal has not been reached yet. There are many places around the world that still do not have fast Internet connection, not even the Internet. Even in the United States, the majority of the Internet users are still using slow connections. In [9], as shown in the graph on the left, it was said that the first six surveys held by Georgia Tech GVU Web Survey Group between 1995-1997 show that nearly 75 percent of the users in the USA have been connecting to the Internet using a modem, which is 56K or lower. In other words, only 1 out of 4 people is using a fast connection to access the Internet. As claimed in [9], the ICONOCAST newsletter for August 17, 2000 reported that 93% of the home users have been connecting to the Internet by dial-up connections while only 7% of them have been using high speed connection such as DSL or cable modem.

Since most of the users have slow connection to the Internet, it is necessary to design the pages accordingly. The size, the content and the layout of the pages play an important role on providing services to users with slow connections. Especially, the business website developers should pay attention to good web design in order to reach a large group of people. Unfortunately, many major web sites do not pay sufficient attention to users with slow connections. It seems that most of the pages over the Web were designed for perfect conditions, which may not be reached soon.

This paper shows designers of web pages can make effective and universally usable pages (not just for users with fast connections) and lists specific guidelines to achieve this.
 

Recommendations

Designing fast pages include making

• Fast-loading pages
• Fast-displaying pages
• Fast-navigating pages

For making fast loading and fast displaying pages, the designer should keep the size of the files as small as possible. Images and graphics help make more attractive and visually appealing pages but they take lots of space and may increase the loading time significantly. ATW [15] proposes the following limitations about total page sizes (both text and graphics):

• Pages between 0-10K: Exemplary.
• Pages between 10-20K: Well-optimized.
• Pages between 20-40K: Merely adequate.
• Pages between 40-60K: Earn a dubious designator.
• Pages over 60K:  Unacceptable.

To achieve fast navigation through the site, the designer should consider the needs and the interests of the possible users carefully. It may help to use a well-structured and well-organized scheme throughout the site in order to prevent users' confusion. Good navigational aids such as site maps or navigation menus could help users to find the information they are looking for more quickly and easily.

When designing your pages, you will most probably use a fast Internet connection and that fact may deceive you about the actual loading time of your pages under real world situations. Remember that what may seem acceptably fast for you on your computer may seem painfully slow on a less powerful computer. Thus, the final thing you can do is to test your pages using an Internet connection no faster than 57.6 modem (slower connections will give a better idea). If the loading times of your pages seem very high, revise your pages and try to make them work better under slow connections. It may be useful to remember that most of the users will connect to those pages with a slow Internet connection.

Guidelines

1. Reduce the size of the pages

• Keep the size of your page as small as possible.
• Do not embed files into your pages. If you have to do so, try to keep the size of the embedded files as small as possible.

Putting them on the bottom of the page is also useful for viewing the rest of the page while the embedded files are loaded.
• Eliminate everything that doesn't show on the surface of the page [6].
• Eliminate multiple spaces, returns and tabs in the HTML code to reduce the size of the page because multiple spaces are treated as one space in HTML language [6].
• Be careful when using HTML editors to avoid unneeded duplicate code.
• If you know how to, edit your HTML code to reduce the size of your files.
• Avoid using too many color, font style and size changes in your HTML code. It will require more HTML formatting and more time to layout the page during display.
• Make your pages cache-friendly. This can be achieved by using the same file for every link you have in your page. In that case, the users take the file from the server the first time but from the cache on later requests.
• Do not make your pages too large or too small. Large pages take a lot of time to load and small pages take a lot of clicking and reconnection time to the server to get the subsequent pages.
• Use cascading style sheets to improve load time . However, web pages should also be readable without requiring style sheets [16].
• They reduce/eliminate the need for much of the embedded formatting in many HTML documents
• Formatting tags for an entire Web site can be read once but applied to all subsequent pages on the site.

2. Avoid CGI, SSI, Java applets and plug-ins as much as possible

• Avoid CGI and SSI codes on pages that may be static pages [6]. Static pages are much faster than the pages with dynamic content.
• Try to put all SSI or CGI codes to the bottom of your page so that the rest of the page is visible while loading them.
• Avoid SSI counters since they slow the loading time.
• Try to avoid dependency on plug-ins. Most of the users do not have all plug-ins in their systems and they slow the loading of pages, therefore the required plug-ins may make the users frustrated and stop navigating through your pages.

3. Use images and graphics carefully

• Use more text and less images on the top of the page so that the users see at least something before the whole page is displayed.
• Include a text-only version of your pages for the users who either have a slow connection or turned off graphics/image loads.

Summarize the content of each graph and chart for those who do not want to fait for the images.
• Use the same image multiple times instead of using different images for same-purpose images.
• Avoid using too many images or big image files. Look for the graphics on your pages that you can replace with regular texts without losing much. For example, large "Welcome" or "Contact Us" images do not benefit much to you and they should be replaced by regular texts. Smaller images lead to less traffic across the Internet, less work for the server and faster load time by the users [15].
• Use <HR> instead of using a separator bar graphics.
• Use recognizable and smaller icons.
• Use text based navigation menus instead of image maps.
• Use regular texts instead of pictures of words.
• If you are interested in an image based design, use CSS (cascading style sheets) or Dynamic HTML to create the same effects with a lower bandwidth [2].
• Use tools to compress your GIF and JPEG images such as GifBot [2].
• Include the HEIGHT and WIDTH code for all images so that the rest of the page is visible while these images are loaded.
• Use ALT attributes for images so that the user can have an idea about the image to be loaded.
• Avoid animated GIFs as much as possible. They are irritating and a burden for users with slow connections.

Instead, use low-bandwidth interactive animation or graphics by taking advantage of programs such as Macromedia Flash or Shockwave or Microsoft's Liquid Motion [2].
However, keep in mind that your page should also be visible to those who do not have those plug-ins. Designers should keep in mind that there is a trade-off between the advantages of using these software and requirement of plug-ins.
• If your system includes image maps, consider using the LOWSRC attribute to immediately load in a black and white or other, more quickly drawn version of the graphic [1].
• Using scripts in the background to preload the images or checking type of browser and connection speed in order to point the user to a mirrored site or less graphical intensive site (i.e. multiple versions of same web site) may be a good idea. However, designers should avoid scripts that have a strong negative impact on the loading time of the pages.

4. Use frames and tables reasonably

• Avoid using frames [19].
• They must be completely loaded before the whole page is displayed.
• They are less effective since they consume much of the space for viewing and require more effort to print them (they should be printed one by one by the users).
• They make pages difficult to access by bookmark or by direct reference to the URL.
• They prevent search engines from finding information.
• Avoid using full-page table formatting since the computer seems to stall as it is waiting for the rest of page to be loaded.

If you want to use tables in your pages, try to break long tables into smaller ones so that some of the page can be seen before the whole page is loaded.

5. Help the users to navigate through the pages easily

• Do not assume that you designed your page well structured and well-organized. Do not forget that most of the users have difficulties in finding what they are looking for. Therefore, use site maps to tell where the users are and how they can go to a specific page. Search functions may be more than helpful if the site contains many pages.
• Do not make users jump from pages to pages to find the information they are looking for. Every time they click on a link and view another page, another request is made to your server, which is not good for both of the user and designer.
• If your page includes links to downloadable files such as Postscript (.PS) files, audio/video files, etc., make sure that the size of those files does not exceed 300-400K.

If the files take more space than that, try to put a link to a zipped version of one or more than one files. It would be better if the size of the zipped version does not exceed 300-400K.
If you give links to a zip package for downloading, make sure that you have also links to individual files for others who have fast Internet connection.
• Help users know how much space the file they are downloading takes and how long it will take to download it, by explicitly saying it.

6. Test your pages using a slow connection

• Test your pages using an Internet connection no faster than 57.6 modem (slower connections will give a better idea).

If the loading times of your pages are very high, revise your pages.

Sample Websites

• Time Magazine.
• CNN.
• Nba.com.
• Nearly all of the Turkish newspapers
• Hurriyet
• Sabah
• Star
• Most of the free e-mail sites such as Hotmail.

Conclusions

The main rule is to keep the size of the pages as small as possible and the loading time as fast as possible until everybody in the world has a fast Internet connection. This can be achieved by following the specific guidelines described in this paper. The list may not be complete but it reflects the least doable at this moment.

Do not forget that even if you have fast Internet connection here today, you may not have that chance  when you move to another part of the world. Universal usability is for everyone!
 

Websites and Resources

[2] Brownell, Jonathan. "On Bandwidth", November 1998.
Available at http://www.wpdfd.com/editorial/wpd1198.htm#comment.

[3] Georgia Tech Tenth GVU WWW Survey, October 1998.
Available at http://www.gvu.gatech.edu/user_surveys/survey-1998-10/graphs/use/q11.htm

[4] IBM. "Web Accessibility Checklist", April 30, 2001.
Available at http://www-3.ibm.com/able/accessweb.html.

[5] Karp, Tony. "The Art and Zen of the Web Sites", March 21, 1999.
Available at http://www.tlc-systems.com/webtips.shtml.

[6] Kelly, Charles. "Guidelines for Designing a Good Web Site for ESL Students", The Internet TESL Journal, Vol. VI, No. 3, March 2000.
Available at http://www.aitech.ac.jp/~iteslj/Articles/Kelly-Guidelines.html.

[7] Kelly, Charles. "Guidelines for Writers of MIDI File Web Pages", February 17, 1999.
Available at http://www.aitech.ac.jp/~ckelly/SMFguidelines.html.

[8] Nielsen, Jakob. "The Alertbox: Current Issues on Web Usability", April 29, 2001.
Available at http://www.useit.com/alertbox/.

[9] Nielsen, Jakob. "The Need for Speed", March 1, 1997.
Available at http://www.useit.com/alertbox/9703a.html.

[10] Nielsen, Jakob. "Bandwidth Needs", November 1995.
Available at http://www.useit.com/alertbox/9511.html.

[11] Nielsen, Jakob. "Multimedia Guidelines", December 1995.
Available at http://www.useit.com/alertbox/9512.html.

[12] Scheer, Ron. " Say What You Mean on the Web: Make Your Web Site Easy to Use", November 5, 2000.
Available at http://www.ronscheer.com/html/easy.html.

[13] Steel, Warren. "Hints for Web Authors", March 6, 2000.
Available at http://www.mcsr.olemiss.edu/~mudws/webhints.html.

[14] Sullivan, Terry. "All Things on the Web", May 28, 1999.
Available at http://www.pantos.org/atw/.

[15] Sullivan, Terry. "All Things on the Web: Site Optimization Strategies", August 28, 1996.
Available at http://www.pantos.org/atw/35305.html.

[16] Sullivan, Terry. "All Things on the Web: Seconds, Not Minutes", April 22, 1997.
Available at http://www.pantos.org/atw/35542.html.

[17] Taylor, Dave. " Intuitive Systems - Rules for Cool Web Pages", 1997.
Available at http://www.intuitive.com/articles/design-guide.html.

[18] Walker, David. "Broadband is No Answer for the Page Designers", July 11, 2000.
Available at http://it.mycareer.com.au/columns/webmechanic/20000711/A63488-2000Jul10.html.

[19] Williams, Mark I. and Hee, Charlotte. "BaBar Web Authorship Guidelines and Tips", March 5, 2000.
Available at http://www.slac.stanford.edu/BFROOT/www/Computing/WebTeamPages/NewWeb/guidelines.html.

[20] W3C. " Web Content Accessibility Guidelines 1.0", May 5, 1999.
Available at http://www.w3.org/TR/WAI-WEBCONTENT/.

(All of the websites in the references section were accessible on May 3, 2001)