Ahh, the Web…center of information and cultural exchange, place of boundless commercial possibility, source of unlimited
Star Wars trivia. Now that there are 56k modems and high-speed connections, there’s no stopping intrepid surfers from seeing all these wonders. Right?
Not quite. If you’re a Web designer, it’s best you face the facts: unless your site is primarily composed of photographs of Pamela Anderson, few people are going to wait long to see what you have to offer.
Sure, you may design for a fast intranet or for a high-end audience that never takes PowerBooks out on the road. If so, God bless you. The rest of us unlucky saps live in a different world: we have readers that still use 14.4 and 28.8 modems, that don’t think any site is worth waiting for more than 30 seconds, and that are just plain impatient. We must create fast-downloading sites, lean sitessites that encourage those restless surfers to stop and come on in.
Most HTML veterans have a favorite optimization trick, but just like their audiences, Web designers can be impatient too. In the spirit of efficiency, I’ve saved you from all that reading and asking around. Here are 20 tips that will help you make your pages as fast as they can be.
An Optimization Checklist:
Crop your images tightly. If you crave white space, use bandwidth-friendly HTML instead: if the graphic is in a table, for example, use the
tags. You can use the
attributes in the
tag to create white space around the table itself.
Size your images right. Never use
attributes to shrink a graphic when you could use a smaller graphic with a smaller file size instead.
Think twice before using graphics to display text. If speed is your top priority, plain text is the better choice.
Use the right graphic file format for your images. GIF files are best suited to display text and line drawings with areas of solid color; JPEG files are better for photographs and illustrations with subtle color changes.
Create GIF graphics with as few (browser-safe) colors as possible. The more colors, the bigger the file size. Software products such as Adobe ImageReady (
), Macromedia Fireworks (
), and Equilibrium’s DeBabelizer (
), as well as Photoshop plug-ins, such as BoxTop Software’s (
) PhotoGIF, can help you reduce the number of colors in already existing graphics and preview the results.
Avoid anti-aliasing text whenever possible. Anti-aliasing smoothes the edges of lines, but in the process it adds colors. Try turning anti-aliasing off to see if your text looks good enough. Small text10 point or lessalways looks better aliased.
To keep GIF files small, take advantage of the way they compress data whenever you can. GIF compression records image changes row by row. For example, a GIF image of the flag of Yugoslavia (which is made up of three horizontal stripes), would be fairly svelte. The GIF would record the color information as “blue,” “white,” “red,” and note how many pixels wide each row was. A GIF image of the French flag would be much bigger, as the notation for
would have to include the information “blue” “white” “red” as well as how many pixels each color took up. By the same token, this means GIF images with lots of noise or fine detail will be bigger.
Get rid of superfluous images, especially animations. Do you really need those pulsating “new” buttons, a mailbox icon, a counter, or all those graphic dividers?
Don’t link to graphics at distant locations. There’s no reason to throw yourself on the mercy of server connections and Internet traffic this way.
Recycle graphics as much as possible throughout your site. Netscape and Internet Explorer
, or save in memory, recently displayed images on the viewer’s computer, which means these graphics won’t have to download again.
Slice up images to take advantage of caching. If you have a large graphic (such as a logo banner or a navigation bar) that contains a small piece that changes from page to page, cut up the logo so that you’ll only have to swap out that piece. Recently displayed images are already cached on the viewer’s computer, so only the new piece must be downloaded.
attributes to tell the browser how big your images are, especially if they’re in a table. Browsers will not draw a table until they understand its structure, which means unless the browsers know how much space the graphics take up, viewers won’t see anything until
the graphics are downloaded.
Always use the
attribute to tell the browser how wide your tables are. If the browser knows how big a table is, it will go ahead and flow text around it while the table finishes rendering.
Check your math. Make sure that table cell
attributes add up to the
of the entire table they’re in. Otherwise, you’ll confuse the browser and slow things down.
Whenever possible, use several simple tables instead of one complex one. This way, your viewers will have
to look at as the tables appear, one by one.
Try not to nest tables (put a table within a table within a table). The browser has to think a lotslowly working from the inside outbefore it can display these. Only nest tables if the alternative is one giant complex table that will be even harder for the browser to calculate.
Don’t go nuts with links. Lots of text adds to download time too. For an example of what I mean by “going nuts,” see the new, but not completely improved, ICQ site (
, or translated, by the viewer’s computer and may affect page loading times.
Consider how fast your pages
as well as how big their total file sizes are. Although progressive JPEG and interlaced GIF graphics can have slightly larger file sizes, they may be appropriate if you want your viewers to see something right away.
Before uploading your pages, consider eliminating all extraneous tabs, carriage returns, and spaces. Although the browser will ignore these characters, they do add to your total file size.
‘s Senior Associate Editor SCHOLLE SAWYER wants to know your favorite tips for making your sites lean and mean. Email her at