Performance

Have you ever been to a restaurant where the service was so bad or so over-taxed by the crowd that you didn't want to stay no matter how good the food was? How about a simple meal that should have taken 20 minutes to get to your table but it took 30 and you've only got a basket of bread to show for it so far? You might even consider waiting that long for a meal at the best place in town, but you wouldn't wait even 10 minutes for a Quarter-Pounder at McDonalds. Well, neither will your customers on the Web. You know that feeling you get when you're told by the maitre-d' that it will be a 50 minute wait to get a table? That's how your customers feel when surfing your site at 14.4 and it takes more than a minute to download your homepage. The result is the same, they leave and probably never come back.

Now, while some may be able to get by with the swanky patronage of the "I've got plenty of time to wait" set, I doubt that you and your customers fall into that category. You need to get used to the trade-off between speed and elaboration. Just because it looks great on a T1 line, doesn't mean it's worth waiting for over a 14.4 connection.

The first thing you need to do is determine who your audience is: are they surfing at T1 speed? ISDN? 28.8? 14.4? Less? Yes, many people do. This is even more compounded by online services like America Online, wireless connections, or overseas connections. Looking to attract an international following? Then count on half the performance your domestic customers get. I know this is disappointing and throws a wrench into your plans for an incredible site, but get used to it. You have no recourse until the Net is capable of more bandwidth and until your customers get better wiring.

If your customers are not consumers, then by all means, cater to whatever they can handle. Some companies can get away with an ISDN or T1-rated site since the majority of their customers (if not all) have workstations connected to fast lines. These companies don't have to reach consumers through AOL, so they can (should they desire to) serve a much richer meal with a higher budget because their customers expect it and can afford it. However, if you are trying to sell to "consumers," don't even think about building a site that requires anything more than a 14.4 modem connection.

What does this mean? Well, assume that any total page size (the total size of all elements on a page) equals (roughly) the time in seconds to transmit it across the Net. Now, times do vary greatly due to server loads, network traffic, destination, noise, and about fifteen other issues, but this is a good measure based on timed experience and not simply theoretical calculations. For example, if you homepage adds up to 30K, then you can bet it will take up to 30 seconds on average to download to your customer. Yes, it may take less. Optimum conditions may deliver it in half that time (15 seconds), but you have to be realistic. And if you haven't actually been on a 14.4 connection for awhile and experienced what 30 seconds is like waiting for a page to download, you should. It's worse than waiting through a commercial break for an episode of Star Trek to resume.

You need to count the size of all graphic elements on your page to get a realistic estimate but you can probably ignore the size of the ASCII text file (unless it is a huge list or directory). For the most accurate count, you should count the size as displayed on your server or on your hard drive without any special icons associated with the file.

You can invoke lots of tricks to make graphic files smaller and get the most out of them. These include:

GIF for graphics, JPEG for photographs

Graphic styles of illustration and design (large expanses of colors)

Vertical gradients vs. horizontal gradients

Adaptive color palettes and small color depths

Reuse of graphic elements

Height and Width tags

Interlacing JPEGs

The first four have to do with the files themselves. Choosing a graphic style with less detail will make your graphic files smaller. Styles that are more graphic with simple and broad color will compress much better than detailed, complex imagery. In general, use GIFs for graphic files and JPEG for photographs, but sometimes, the same photographic image can still compress smaller under GIF than JPEG so you need to experiment a bit. Because of the way GIF files compress, horizontal gradients (those that change from left to right) compress worse than those that gradate from top to bottom. Lastly, if you use colors out of the Netscape palette, you will get both better appearance and better performance. Use these colors and save your GIFs with adaptive palettes that are as small as possible (such as 3-bit, 4-bit, and 5-bit palettes). Adobe ImageReady is really good for this.

The last three tricks are easy: reuse graphic elements (referencing the same element in the same directory) as much as possible and the elements won't need to be downloaded again (they will be cached in memory on your audience's computers). Use Netscape's HTML Height and Width tags and your pages will begin to format more quickly, not waiting for the graphic to load fully before downloading text and format. Of course, this doesn't decrease the actual download time, but it does give the illusion of a faster-loading page. Lastly, interlacing images can also give them the impression of a faster load, but I wouldn't recommend interlacing images of people as it makes them appear pretty ghoulish for most of the download.

Remember that not everyone surfs with images on-even though they can. This is because images may make their already slow connection even more unbearable. Your site should work well in text-only mode so that you won't need to build a separate text-only mirror site. To do this, use the HTML Alt tags to label graphics and make text navigation available throughout your site.

While you're at it, be sure to let your audience know what they are getting when they download a sound or video file-or any other large file. Label each with the size of the file (extra credit if you add an estimate of the download time, but this isn't required). Also label with the file format and remember to offer every media file in several versions so that Windows, UNIX, and Macintosh users can all see what you have to share. For example, I recommend sound files in .AU, .WAV, and .AIFF formats (you can also use .MOV which is QuickTime's file format). Video files should be in .MOV (QuickTime), .AVI, and .MPEG formats.

Some developers build several sites that offer different performance, but only the most sophisticated sites switch sites automatically based on the browser and platform of the user requesting pages. You can offer your audience the choice of sites, but if you don't tell them what this means, you might as well be speaking another language.

Now, that wasn't so bad, was it?

To summarize:	Examples:
Fast sites are successful site Determine who your audience is and what speed they surf at Use a graphic style that compresses well Use HTML alt, height, and width tags Use the Netscape palette Reuse graphic files wherever possible Offer media files in multiple formats and always label them with their size	The 5K Contest 5K Contest Calendar Iris Issey Miyake, London AltaVista Yahoo Match.com

 

beginning | << back | next>>

 

back top thoughts | nathan.com

 

Copyright 1994 Nathan Shedroff