"Life in the Fast Lane: Optimizing Web Site Efficiency"

"Your page is SO SLOW!" These are five words that send a chill through anyone responsible for a Web site. Too often, a webmaster's response might be: "but it loads fine on my Pentium MMX workstation running Windows NT and connecting on the corporate T3 line!"

As well it might, but while more and more Web surfers are using higher-speed connections in the workplace, many still connect to the Internet at home via a dial-up account with a 28.8 kbps modem. And a few seconds of loading time on a T1 or T3 connection can take minutes over a standard phone line.

The Web has become so sophisticated, so quickly, that it's easy to forget that the majority of people still connect to it with the same technology they did two or three years ago. But even if your audience still logs on at 14.4 kbps, efficient Web site design isn't about designing for the lowest common denominator: HTML was designed as a universal standard, and the best pages work across all platforms. "Keep it simple" is still the best policy, but a few rules of thumb can result in a very sophisticated site, yet easy to load, Web site. Just remember that a lot of people are using older versions of Web browsers that may not support some functions -- be sure to test your pages on different browser versions.

State of the Art

The Internet explosion has created a demand for PCs, and manufacturers have met that demand with faster processors and expanded memory. Similarly, many Web sites have upgraded to high-end, multi-processor servers to handle increased traffic. Web software is also faster and more flexible than ever before, thanks to plug-ins and applets, as well as HTML itself. Most dial-up Internet users, however, experience the Web today as racecar drivers on a single-lane dirt road.

So why the delays? Some blame belongs with the phone companies -- plain old telephone service hasn't changed, and even high-speed connections like T1s and T3s can be outrun by high-end Web sites. But remember, if visitors to your site complain about download time, check the hardware--the most efficient Web site can still seem sluggish if the machine it's running on is behind the curve. Ideally, your site should be sending data as fast as your speediest visitors can grab it.

Given the processor speed of both PCs and Web servers, it will take a serious increase in connection bandwidth to even catch up. Until then, keep in mind the relatively slow speed of the Net when designing your pages. Though you may be tempted to pack all your information into just one or two pages, remember that the more information a single page contains, the longer it will take your audience to see it -- no matter how fast their connection.

Know the Code

HTML (HyperText Markup Language) is the stuff many Web sites are made of, but you'll soon find its impact on load time is minimal. Like most computing standards, HTML is pretty unforgiving: an error in syntax won't make an image load more slowly -- it simply won't load it at all. And although HTML code doesn't create many delays or problems in itself, if used properly it can aid overall efficiency.

One of HTML's most powerful design features is the <table> tag. By defining the width and height of tables, and the rows and cells they contain, Web designers can fashion anything from columns and margins to a grid of interlocking images. But tables have drawbacks: the code used to create them is trickier than most HTML, and a single misplaced tag can cause the entire table -- even the entire page -- to fail. Many designers place the contents of an entire page into a single large table, forgetting that a table won't appear in a browser window until all the information it contains is loaded. A table with 10 images and several paragraphs of text could take a while to appear on a slower connection, leaving your visitor staring at a blank browser.

An <img> tag is used to reference image files within a page, but it can do more than simply point to the file's location. Always specify the height and width attributes of an image in the <img> tag. If you don't, the browser can't determine the space needed for an image and won't display any of your page until the image is loaded. If there are twenty such undefined images in your page, your audience will be waiting a while to see anything. Another <img> attribute is ALT, which on newer browsers will display a text description of the image while it is loading.

If you're concerned your page may have HTML errors, there are several Web sites that will analyze the code of any URL and generate an error report. Try searching Yahoo! or another search engine for "HTML analyzers."

One Site's Makeover

Women's Wire Networks in San Mateo, Calif., recently redesigned the Beatrice Web Guide site to convey more information "above the fold" -- in Web terms, the area immediately visible in a browser window before scrolling down. Lourdes Livingston, Beatrice's art director, worked with the editorial and engineering departments to organize the elements that needed to be highlighted, attempting to focus the visitor's attention from the first page to the depth of information within the site.

"We wanted to present the information in columns, in an organized way, but still keep an element of fun," says Livingston. To do this, the Beatrice team kept the basic page layout, using HTML tables to create the columns, but switched to smaller icons (reusing several throughout the page, including the menu bar), which allows more text to appear at the top of the page in a faster manner. Some images, such as the "Search B" icon, were replaced with text to further compress the page, and consequently improve access speed.

Livingston also took the opportunity to add new elements to the Beatrice site, such as the tiled background image in the left margin and JavaScript "rollovers," which change icons from one image to another when the cursor moves over them. From concept to implementation, the redesign process took about a month and, says Livingston, gave the site "a feeling of being free-form, but [it is] actually much more controlled in its layout."

Image Is Everything

The Beatrice site's use of smaller icons was key in the efficiency of their redesign. Graphic images are by far the most common cause of slow-to-download Web sites. Some Web pages feature several images totaling over a hundred kilobytes, while the HTML document itself is only a fraction of that size.

Generally, images should be saved in one of two formats: GIFs for non-photographic images or small photographs under 100 x 100 pixels, and JPEGs for larger photographic images. While there are many tricks to making graphic files look good on the Web, your main objective should be to keep the file size as small as possible.

Lee Moyer, a freelance art director and illustrator based in Washington, DC, calls HTML "easily the most constrained design field I've ever worked in." Moyer typically avoids using images larger than 35K, often using image compression software such as DeBabelizer to optimize the files. For GIFs, created from an index of 256 colors or fewer, DeBabelizer will analyze an image and select an appropriate color palette. The fewer colors used in a GIF, the faster it will load. Moyer also suggests using a single image file for repeating elements, and using HTML instead of images for typography. "I would much rather use a large system font with a specified default font than some big graphic of words," he says.

Larger images can be constructed by saving sections of the image as separate files and arranging them in an HTML table. Not only will the smaller images load faster, but if you're designing a graphical site map, you can assign each cell/image a separate link.

Image maps, another way linking to multiple pages from a single image, can use the <usemap> HTML tag to create a client-side image map, with the coordinates of each link specified in the HTML code itself, instead of pulled from a separate file on the Web server.

Of Back-Ends and Plug-Ins

Over the last few years, Web site designers have stayed on the cutting-edge by using multimedia plug-ins or Java applets, and adding audio, video and even interactive games to their Web pages. However, if load-time is a concern for your audience, your best bet is to limit your use of most plug-ins. They can be impressive, and in some cases even improve load-time (an animation in Shockwave will often load faster than a GIF animation), but their performance depends on the speed of the server, which can make them seem unusable if site traffic is heavy.

Many sites have added back-end applications to tie into database servers. A visitor's input is conveyed to the database through the HTML front-end, and live, "dynamic" data -- anything from a list of products to survey results -- is generated in response. This back-end is typically created using CGI (Common Gateway Interface) routines, although some products are now built in Java. While this is an issue for an engineer more than a designer, work with your engineering team to create HTML templates that display the dynamic data attractively and concisely. Your biggest efficiency issues will be the database server's processor speed, connection to the Internet and the efficiency of the database software. Be sure to impress upon your IS support the need for efficiency.

Although commonly used today, you may find that the newest generation of Web technology exceeds your needs. If so, don't feel behind the curve. As Lee Moyer says, "If new technology is tested, I use it. If it isn't, I let someone else use it. When I see that all major browsers can use it without crashing, then I'll go ahead and learn it." In other words, use your time and resources efficiently, and your site will follow.

Sean G. Thomas, Sean Thomas, Sean Garrett Thomas