Design Your Web Pages for Fast Loading

n/a

As they watch page after slow-loading page gradually appear on their computer screens, some folks have started to refer to this medium as the World Wide Wait. There is no good reason that your Web site should exacerbate this problem when it is so easy to optimize your pages so that they load quickly.

Make Your Pages Small
Not small in dimension, but small in the number of kilobytes (K) of information they contain. The size of a web page is the sum of the page's HTML code and all the scripts, text and graphics that go on the page. Research shows that the optimum load time for a Web page is one second, but Web users will tolerate load times of 10 and even as many as 15 seconds. In order to load within 15 seconds over a typical modem connection, this means that any one page's total size—HTML, text, and graphics—should be less than 30K. If your pages are larger than this, you will lose customers who don't feel like waiting for your pages to load.

According to a recent survey, the average page on the Web now is 60K (up from 44K in an earlier survey). The good news is that half of the Web sites surveyed met the 30K-per-page criterion. It is not difficult to keep your pages under 30K—if you avoid unnecessary and/or unnecessarily large graphics and create a site design that specifies reasonably sized blocks of content on each page.

For examples of how to keep your page size small (but still attractive and functional), check out the major search sites (e.g., Yahoo! and HotBot) and the big e-commerce sites (e.g., Amazon.com and Dell) and note how quickly they load. Then check out your competitors, sites and see how quickly they load.

Making your site load faster than your competitors' is a first step toward dominating your market.
The very nature of the Internet makes small, fast-loading pages even more important. Your customers' browsers are at the end of a long line of potential bottlenecks. Any and all of the following factors can affect the download time of your page:

• The performance of the Web server your customers are getting your page from
• The speed and reliability of that server's connection to the Internet
• The amount of traffic on the Internet when your customers request the page
• The speed and reliability of your customers' connection to the Internet
• The power of the computer their browser is running on
 

Unnecessarily large Web pages just add another potential snag to this list.

Use Tables and Frames Wisely
Most Web pages use tables to create appealing and useful page layouts. Clean, simple HTML coding and imaginative layout can speed the loading of the content that appears in the tables on your pages. Browsers load the layout of each table before loading the content into it. If you put all the content on your page into one table, then your customers will see only a blank page until the layout of the page is completed. Your customers may get impatient and leave while the page finishes loading, or they may think there is something wrong with your site or their computer. You can prevent this problem by using a layout composed of several different tables. That way, instead of a blank page your customers will see, for example, quick-loading header and navigation tables while the (usually bigger) content table loads. Webmonkey has a page that shows you how to do this.

You can further streamline your page-load times by using the WIDTH attributes in your <TABLE> and <TD> tags. Specifying the width of all your tables and each of their cells helps the browser render the tables more quickly. Be careful if you "nest" tables (that is, put a table inside of another table). This adds complexity to the layout, which may bog down your customers' browsers.

Using frames for your pages is generally not a good idea. The Web is a hypertext medium, but frames can quickly undo the hypertextuality that makes the Web go round. Frames-based sites typically abandon the page metaphor that makes the Web work, creating all sorts of navigation problems and logical conundrums for customers (e.g., "Why does my 'back' button work this way on non-frames pages and that way on frames pages?"). When a site is built entirely within framed pages, customers lose the ability to bookmark pages for later reference. This is because the display they are looking at no longer has a unique URL associated with it. In addition, frames-based sites seem to suffer from many more display problems than table-based sites.

Use Text Instead of Graphics Whenever Possible
One picture may be worth a thousand words, but on the Web you might want to use the words instead of the picture. The 7K of space that 1,000 words take up is enough room for only one or two small web graphics. If a piece of content such as a navigation menu choice or a headline can be portrayed with words, it is generally a good idea to do so (and it is relatively easy to do so in a graphically pleasing fashion by combining different font faces and colors with background colors).

One notable exception to this rule is when you need to control the look of your logo or another image that contributes to your brand identity. Another exception is when the same graphic will be used on most pages in your site. In this case, the image will be in your customers' browser's caches, and therefore won't be downloaded for each page.

Many graphic designers dislike the lack of typographic precision that HTML entails and try to regain control by rendering type with web graphics. This can make it difficult to keep your pages in the 30K range. If your designer tries to convince you that the word "catalog" needs to be portrayed with a 1.1K graphic, ask whether they could make a 0.01K text representation work as well. Whenever you use Web graphics, be sure to include the ALT, HEIGHT and WIDTH attributes in your <IMG> tag.

Use Browser Gadgets and Enhancements Sparingly
In general, it is a good idea to stay away from the "bleeding edge" of Web-browsing gadgetry. The number of your customers who will benefit from gizmos such as RealMedia or Flash plug-ins and Java applets is still relatively small. And while they offer a lot of promise to Web developers, cascading style sheets, dynamic HTML and similar advances are supported only by the latest browsers. Furthermore, as long as the percentage of browsers that supports any of these enhancements is less than 100 percent, you will want to provide a lower-tech alternative for your trailing-edge customers. You can do your customers a big favor by doing your cool stuff (e.g., dynamically generated pages out of a database) on your server and giving your customers clean, simple, fast-loading HTML pages.

The Bottom Line
Don't exacerbate the World Wide Wait. By optimizing your pages so that they load quickly you make it easier for your customers to shop at your site, and you reduce the risk that they will leave your site entirely rather than waiting for your pages to load.