Social Psychology Network

Surveys of web users suggest that the two most common complaints are slow access and inability to find relevant information (Huberman, Pirolli, Pitkow, & Lukose, 1998). As suggested in the previous tip, careful file naming and directory organization can go a long way toward facilitating information retrieval and ease of navigation. But what about speed of access? Are there any tricks for reducing the time it takes a web page to load?

Over the next few years, technological improvements will speed up web access considerably, but in the meanwhile, there are several steps you can take to reduce the loading time of your web pages. First, if the home page of your web site incorporates large graphic images, lengthy sound clips, videotapes, or other slow-loading files, consider organizing these elements in such a way that accessing them is optional (e.g., by placing them on separate web pages that are linked to the home page). Most web sites are organized such that the home page is a central "jumping off" place, so a good rule of thumb is to make sure that your home page does not exceed 2-3 screens' worth of material or 10-15 sec of loading time.

Another way to reduce loading time is to use a graphics program to crop, compress, or reduce the graphic images on your web site. Suppose, for example, that you have an image 200 pixels wide, and you would like the image to appear on the web at half its original width (a "pixel," or picture element, is equivalent to a dot of color on the screen). A poor (but very common) method of accomplishing this width reduction is to set the image width equal to 100 pixels within the HTML code:

<IMG WIDTH=100 SRC="image.gif">

The problem with this strategy is that it does not change the file size of the image; consequently, the loading time remains unchanged (the image simply displays at half the width). Instead, you are better off using a graphics program to create a half-size copy of the image, thereby reducing the file size and loading time. Similarly, if you have an image that was originally scanned in order to be printed on a laser printer -- at a resolution of, say, 300 dots per inch (dpi) -- you are best off using a graphics program to reduce the resolution before uploading the image to the web. The reason for reducing the resolution is that contemporary computer monitors usually have a resolution of only 72 pixels per inch. Thus, images with a resolution above 72 dpi are wasted on the web and take an unnecessarily long time to load.

A third way to reduce loading time is to minimize gratuitous animation, images, and JavaScript programs (e.g., programs that create animated e-mail images, rotating bullets, and scrolling messages). Overuse of these elements not only detracts from the appearance of a web page, it adds unnecessarily to the loading time. For sites that contain a large number of images in the form of navigation buttons (e.g., "Home," "Back," "Other Links"), another way to reduce loading time is to use text-based navigation buttons rather than images. To generate a text-based navigation button in HTML, first create a borderless table cell in whatever color you desire, and then place the navigation text (e.g., "Home") inside the cell using a font with a different color.

One final suggestion is to include height and width tags with all images in your HTML files. For example, instead of writing an HTML image statement as:

<IMG SRC="picture.gif">

write it as:

<IMG HEIGHT=XXX WIDTH=YYY SRC="picture.gif" ALT="text">

In the latter statement, XXX equals the image height in pixels and YYY equals the image width in pixels (the ALT tag, which is used to provide a text-based description of the image, will be discussed later). The addition of height and width information will not reduce the size of images or loading time, but it will allow the browser to immediately begin formatting the page and displaying text and tables in their final positions. The benefit to visitors is that they will be able to read the text on your page while large images are loading. The only proviso is that all images must have height and width tags in order for this suggestion to work; if even one image is missing tags, the text and tables may not be displayed properly until all the images have loaded.