Principia Hypertextica · A Mathematics Educator's View of Web Design

       -----
intro  speed  accessibility  validity  navigability  typesetting  links
       -----

Speed

Quick-loading web pages impress me. When I encounter them I know that the author has recognized that most people who use the Internet have slow connections limited by current telephone wire technology. Indeed, some people have nicknamed the World Wide Web the "World Wide Wait" because of the frustration involved in viewing pages with material that takes a long time to be rendered on screen. For sheer speed, nothing beats pages that are composed almost entirely of text.

• Begin your page with text rather than images, so visitors know they have arrived at the right place.
• Don't put too much text on one page. Use a series of smaller pages if your content can be divided into logical pieces. Smaller pages are easy to navigate through and allow users to print only the content that interests them.
• Use text-based navigation items. Many web authors use GIF images of buttons with words on them or image maps with various hyperlinked regions as their principal navigation device. Although this undeniably gives a web page a certain "look," this strategy isn't useful for people who browse with image loading turned off. I prefer hyperlinked text, because it loads faster and appears regardless of whether users are surfing with images on or off.
• Don't put too much text in one cell of a table. The text will not appear until the entire contents of the table have been laid out by the browser.
• Break large tables into several separate tables if you want the material to appear on screen more quickly. If tables are placed consecutively, the early rows will appear while the later rows are being rendered. Few readers will suspect that the material is in more than one table. This strategy will not work if your column widths have to match, however.
• Avoid nested tables unless they are absolutely necessary for your material.

Nothing encourages me to hit the "back" button of my browser more rapidly than a page that uses images that take a long time to load. But designers know that visual elements can help communicate ideas and guide a reader, lending variety and visual interest to a document. An important goal, then, is to use images wisely.

• Reduce the dimensions of images as much as possible. Not only do smaller images take less time to download, but they will be easier to see without scrolling on small windows.
• Include height and width attributes in image tags. This is a very important rule. A web browser can lay out a page much faster if it knows the dimensions it must reserve for an image. You should give these dimensions in absolute pixels, as shown below. Quotation marks are not required for digits.

  <img src="image.gif" width=30 height=50 alt="book cover">
   

• Don't use large images scaled down via percentages for width and height, because this is not supported by all browsers, and when it is, the amount of time to load the image will be the same as if the full-size image were being presented. Build smaller versions of the images instead.
• Use thumbnail images as links to larger images. If users are intrigued by a small image, they can visit the larger image. I like to use thumbnails that are not just tiny versions of the full image but instead are small significant portions. For example, I created these three thumbnails for images I donated to the Mentos Gallery site. The surprise comes from what is not revealed in the smaller images.

    

• Use animated images sparingly. Sometimes an animation provides a crucial piece of information, as on the opening page of my Color Cube web site, where slices of a cube along its main diagonal are presented in sequence. Too often, though, animated images are distracting. Remember that some browsers are incapable of showing animated images, in which case only the first or last frame is presented.
• Reduce the palette size of GIF images. Image quality is often nearly unaffected when you limit the number of colors in a GIF image, and the loading time of the image file can be greatly reduced by this method. The GIF Wizard online utility will do this for you automatically. You tell it the address of the image you wish to reduce, and it offers you a variety of versions with different numbers of colors.
• Reuse images on several pages when appropriate. Because images are usually kept in the memory cache of the browser, images will appear very quickly on subsequent pages. Reusing images can help a suite of web pages seem connected visually.

There are a few other ways of increasing the speed performance of your web pages, related to HTML coding details invisible to most users.

• Use a trailing / character at the end of hyperlinks when you are linking to a subdirectory rather than a specific document. This saves time and reduces web traffic, because the browser won't try to look for a document when it should look for a directory.

  Wrong: <a href="http://forum.swarthmore.edu/mathed">Visit the Math Forum</a>

  Right: <a href="http://forum.swarthmore.edu/mathed/">Visit the Math Forum</a>

• Include a <link rel=next href="next-document.html"> tag nested in the <head> block of your document, indicating the most probable next page a visitor might link to. Some web browsers, such as WebTV, will load the next page invisibly and will be able to serve it almost immediately if it is selected.

       -----
intro  speed  accessibility  validity  navigability  typesetting  links
       -----

http://world.std.com/~wij/web-design/speed.html
revised 26 June 1997
HTML 3.2 validated

William I. Johnston Home Page

wij@world.std.com