Design Your Web Pages for Fast Loading
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 soeasy 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) ofinformation they contain. The size of a Web page is the sum of the page's HTML code andall the scripts, text, and graphics that go on the page. Research shows that theoptimum load time for a Web page is one second, but Web users will tolerate load times of10 and even as many as 15 seconds. In order to load within 15 seconds over a typical modemconnection, this means that any one page's total size - HTML, text, andgraphics - should be less than 30K. If your pages are larger than this, youwill 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 60 K (up from 44 K in an earlier survey). The good newsis that half of the Web sites surveyed met the 30K-per-page criterion. It is notdifficult to keep your pages under 30 K - if you avoid unnecessary and/orunnecessarily large graphics and create a sitedesign that specifies reasonably sized blocks of content on each page.
For examples of how to keep your page size small (but still attractive andfunctional), 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 howquickly they load. Making your site load faster than your competitors' is a firststep toward dominating your market.
The very nature of the Internet makes small, fast-loading pages even moreimportant. Your customers' browsers are at the end of a long line of potentialbottlenecks. Any and all of the following factors can affect the download timeof your page:
? The performance of the Web server your customers aregetting your page from
? The speed and reliability of that server's connection tothe Internet
? The amount of traffic on the Internet when your customers request thepage
? The speed and reliability of your customers' connection tothe 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 thatappears 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 seeonly a blank page until the layout of the page is completed. Your customers may getimpatient and leave while the page finishes loading, or they may think there is somethingwrong with your site or their computer. You can prevent this problem by using a layoutcomposed of several different tables. That way, instead of a blank page your customerswill see, for example, quick-loading header and navigation tables while the (usuallybigger) 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 yourtables and each of their cells helps the browser render the tables more quickly. Becareful 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 ahypertext medium, but frames can quickly undo the hypertextuality that makes theWeb go round. Frames-based sites typically abandon the page metaphor that makesthe Web work, creating all sorts of navigation problems and logical conundrums forcustomers (e.g., " Why does my 'back' button work this way on non-frames pages andthat 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 thedisplay 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.For more on this issue see Jakob Nielsen's column on Why Frames Suck (Most of the Time).
Use Text Instead of Graphics Whenever Possible
One picture may be worth a thousand words, but on the Web you might wantto use the words instead of the picture. The 7 K of space that 1,000 words take up isenough room for only one or two small Web graphics. If a piece of content such as anavigation menu choice or a headline can be portrayed with words, it is generally a goodidea to do so (and it is relatively easy to do so in a graphically pleasing fashion bycombining different font faces and colors with background colors).
One notable exception to this rule is when you need to control the look ofyour logo or another image that contributes to your brand identity. Another exception iswhen the same graphic will be used on most pages in your site. In this case, the imagewill be in your customers' browser's caches, and therefore won't be downloaded for eachpage.
Many graphic designers dislike the lack of typographic precision that HTMLentails and try to regain control by rendering type with Web graphics. This can make itdifficult to keep your pages in the 30 K range. If your designer tries to convince you thatthe word " catalog" needs to be portrayed with a 1.1 K graphic, ask whether theycould make a 0.01 K 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.
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 therisk that they will leave your site entirely, rather than waiting for your pages to load.