This document is a supplement to
Editing for Clear Communication
No portion may be reused without the author's permission.
Table of Contents
Further Reading: "Web Site Speed Tweaks," Builder.com
Jakob Nielsen, "The Need for Speed," Alertbox, 1 March 1997
J. Scott Hamlin,"Current and Cool: This month's best Web tricks," adobe.mag,
To learn more about
Loading TimeWant to get loaded in a hurry? Visitors to your Web site do at least when it comes to loading your pages. Busy people are not likely to wait around long for pages to come up on their machines when there are millions of other Web sites beckoning.
When a Web surfer attempts to visit a page, a request is sent to the computer on which that page lives. The basic page is sent back to the surfer's computer, then additional requests are made for graphics, sound files and other items. A single page could require a dozen or more downloads from the host computer, with large graphics, sound and video files taking a minute or more each to load.
That's slower than most visitors will tolerate. Jakob Nielsen, former chief Web usability expert for Sun Microsystems, reports that
Research on a wide variety of hypertext systems has shown that users need response times of less than one second when moving from one page to another if they are to navigate freely through an information space.Nielsen acknowledges that the days of Web pages routinely loading in under a second lie far in the future, but in the meantime he suggests that a realistic goal is "to get pages to users in no more than ten seconds, since that's the limit of people's ability to keep their attention focused while waiting."
As more Web users sign on for higher-bandwidth connections, Web publishers won't have to be quite as concerned about this issue. But in the meantime, it's sensible to assume that many surfers still are connecting to the Internet with 28.8 connections, over which even simple pages can seem to take an eternity to download.
Given that limitation, savvy Web producers employ a bag of tricks to make pages load quickly:
1) Keep file sizes as small as possible: It's better to have small graphics on a fast-loading page than large graphics on a slow-loading page. Limiting the number of colors used for simple logos and other graphics can keep file size small. If you have graphics that you just have to show off in a large size, include a small thumbnail version on your page with a link that interested visitors can click to view a larger image. Image-editing and Web publishing programs (such as Adobe ImageReady and Macromedia Dreamweaver, respectively) can help by indicating how long individual graphics and pages will take to download at varying connection speeds.
2) Use splash pages: Consider a splash page. These are pages that typically have only graphical content. They flash a logo or other image to the visitor, then automatically cycle to another page or do so after the viewer clicks on the page. Here's how Ferrari uses a splash page.
3) Use low resolution images: Another option is to use a fairly large graphic file, but include a low-resolution version, too. When you loaded this page, a small black-and-white image of the logo loaded quickly, followed by the slower full-color version. It's a simple matter to create and code low-res images.
4) Use progressive GIFs and JPEGs: These provide another way to get an image up on a visitor's monitor quickly. The images load in several passes, with different portions of the images filled in on each pass. These can be created in popular image editing programs. I've used a progressive GIF to load the image on my home page.
5) Use the same images on each page: On multiple page sites, you can speed up loading of pages after the first if you use the same images on each page. That way, viewers' computers don't have to request new images for each page; the images are called up from storage on their own computers. In this document, the logo at the top and the orange background bar are the same on every page.
6) Make graphics, sounds and videos optional: Not every visitor will want to hear your personal sound greeting, watch your family movies or see your children's latest refrigerator art and many will be irked if they have to wait for those items to load. So offer links, instead, letting visitors pick and choose what they want and speeding up initial download time for everyone.
7) Break big graphics into little ones: One way to get large images onto a page without making the viewer wait long is by using HTML tables. With that feature, a large graphic is diced into several smaller pieces that can be downloaded at the same time.
8) Preload graphics: You can speed up loading of subsequent pages by preloading graphics on your opening page. To do so, just include the HTML code for the images at the bottom of the first page, with a width and height of 1; for example,
9) Specify width and height of all images: Don't forget to specify the width and height of other graphics, too. Some browsers will not display a page until every element is loaded unless those dimensions are specified; then the page will come up much more quickly, with empty boxes waiting for late-arriving graphics.
Back to Jakob Nielsen for the final thought: "Webpages have to be designed with speed in mind. In fact, speed must be the overriding design criterion." No matter how good your content, if it doesn't blaze onto your visitors' screens, they may never see it. In the world of Web publishing, "Better late than never" just doesn't apply.