articles

How to Increase Performance on a Web Site

Reprinted with permission from the STC Intercom magazine - January 2000 Volume 47, Issue 1.

Back in the old days of the Internet, circa 1995, users would wait an eternity for Web sites to download and be thankful for what they received. But today, as Internet users replace their slow modems and connections with faster equipment, they are less likely to wait for high-bandwidth Web sites – ten seconds is the longest most people can pay attention while waiting for a download. So Web designers must reduce the time it takes our Web pages and Web sites to load. Following are a few tips to decrease the bandwidth on your Web site.

Use an HTML editor

One of the reasons for slow download time on a Web site is sloppy HTML. I tell all the students that I mentor in Web design to learn to code, because correctly structured HTML renders pages much faster. Considering the widespread use of WYSIWIG editors (rather than hard coding the HTML), you would think that careless HTML would not be so prevalent. Using an editor makes it easy to catch HTML coding mistakes.

Older versions of Microsoft FrontPage would reformat and rewrite the HTML each time it opened and closed a file. These versions also had an annoying habit of adding code that I did not intend to be there -- and I would have a devil of a time trying to get it out. They also “WebBots’, which are little programs to perform functions such as inserting a date and time stamp. These are two reasons why I also used the HTML view of FrontPage to edit my HTML and catch all the “goodies” that software added. FrontPage 2000 is supposed to correct many of these annoying habits -- I am planning to build two sites in this program, so I’ll report my findings in a later article.

I like Macromedia’s Dreamweaver 2.0 because it does not reformat (or add to) the HTML, so you can use white space, indent text, and user upper- or lowercase letters to make the code more readable. It also highlights the code in yellow when you forget to include an ending tag or when your code is not formatted correctly.

There are many other editors I have not used that may be good. I found a review of Web authoring tools at PC Magazine (www.zdnet.com/pcmag/features/htmlauthor/_intro.htm). Some of these are free to download.

Use an HTML checking program

At least two HTML checking programs are designed to catch HTML mistakes. The ZDNet’s Developer Web site offers a free service called NetMechanic's HTML Check. This program will, among other things, evaluate your code and email you a report of the problems it finds. You can find this tool at www.zdnet.com/devhead/resources/tools/htmlcheck/power.html.

WC3’s HTML Tidy is another tool that can catch coding problems. You can download it from the Web at www.w3.org/People/Raggett/tidy/.

Create liquid pages with tables

Tables can seriously affect how quickly your pages load. Improperly coded table tags cause your tables to appear incorrectly on the page, and complex tables can really slow your download time. This is a big problem because many designers, myself included, rely on tables to create page layouts. But you can reduce the complexity of your tables by breaking up your information into more than one table.

At Thunder Lizard’s Web Design 99 Conference last April, I learned a trick to help load tables faster and make pages easier to view in different monitor sizes. “Liquid” Web pages, which adjust themselves to monitor settings or size, are now all the rage in the Web world. To create a liquid page, simply do not specify the HEIGHT and WIDTH attributes in your main table or in any table tags (<TD> tags). Without HEIGHT or WIDTH attributes, your table will “adjust” to the size of the information in the cell. For example, If I place a graphic in a table, I specify the size attribute in the <IMG> tag, but not in the <TD> tag. This allows the graphic to determine the size of the cell while maintaining the liquidity of the Web page. But be careful – most editors love to add HEIGHT and WIDTH attributes to HTML, so check your code carefully. Check if your tables are liquid – change the size of your browser and see if your table resizes. I have built several sites with this trick, and users found it very helpful.

Create faster graphics

Using graphics is the easiest way to kill a fast page download. But I do have a few tips for creating speedy graphics, which I have listed below:

• Place all images into an image folder to speed up download time.
• Use thumbnail graphics whenever possible.
• Reduce your number of colors in your graphic (and site design). Scaling down to thirty-two, sixteen, even eight colors can really reduce the file size. The ZDNet Developer Web site provides an online service called GIFBot (www.zdnet.com/devhead/resources/tools/gifbot/") that can reduce the size of the graphic and allow you to compare the results. I ran one of my Web site pages – one with many large graphics – through this service, and it worked pretty well.
• Use the interlacing feature in a GIF file to create the illusion of faster loading graphics. With this feature, an image is presented in a browser in several steps. At first the image will be
  blurry, but as more information is downloaded from the server, the image becomes more defined until it is entirely clear. It's important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing only when it is appropriate. Generally, GIF files should be used for logos, line drawings and icons. Avoid using it for photographic images, and graphics that have long stretches of continuous-tone. When you're designing GIF files, minimize the file size by avoiding gradients and turn off anti-aliasing wherever possible.
• Use caching in your favor. Consider your site design and how you can reuse and recycle your graphics (for example, in a navigation system).
• Use text whenever possible. For one of my Web sites, I use text headings with font color to look like graphics.
• Use cascading style sheets (CSS) to create any special effects (For more information on CSS, see ZDNet Developer Web site at www.zdnet.com/devhead/filters/css/ (Scroll down to “CSS/Fonts”). CSS is a form of HTML that provides designers greater control over typography and spacing between elements on a page.
• If possible, avoid using animations or sound on page. But if you must do so, try to reduce the size. Read “GIF 89a: Funky Animation Without Fancy Tools” at www.zdnet.com/devhead/stories/articles/0,4413,1600491,00.html.
• Specify the WIDTH and HEIGHT attributes in your graphics’ <IMG> tags to ensure faster download. Because most browsers determine the page layout before the graphics are downloaded, they can display the text before filling in the graphics. So users read your text while waiting for all graphics to download. Also use ALT attributes for those users who turn off their browser’s graphics.

My friend Ric Faris, of the online publication Web Observer, showed me a trick for reducing the size of color graphics with image-editing software. By converting the graphic from RGB mode to an indexed-color mode and saving it in a GIF format, you’re making the file smaller and faster to download. (GIFs are best suited to images with large areas of color. Don’t use this trick for images with subtle gradations of color, such as photographs, which should be saved as JPEGs.) Here’s how to do it in Adobe Photoshop 5.0:

• Open a color graphic within Photoshop. The graphic should be in RGB color. (If it is not, reset the graphic in this mode: From the Image menu on the toolbar, select Mode, then RGB Color.)
• From the Image menu on the toolbar, select Mode, then Indexed Color.
• An Indexed Color dialog box will open. In the Palette field, select the “Adaptive” option. This creates a palette that uses a representative sample of colors in the image.
• In the Color Depth field of the Indexed Color dialog box, select the desired number of bits/pixels. The larger the number of bits, the clearer the image and the larger the file size, so choose the smallest image size that looks good to you. (If you want to sample different image sizes, simply revert the image to RGB mode.) The other options in the Indexed Color dialog box won’t affect the file size, so you can ignore them.
• Click OK.
• From the File menu on the toolbar, select SaveAs, and save the graphic as a GIF. A dialog box will appear asking you to select the row order. Select the “Interlaced” option so the image displays in increasing detail as it is downloaded.

By following the steps above, you’ve decreased your graphic’s file size while maintaining an image that will display decently on your Web page.

Until the bandwidth problems are solved, Web designers have to deal creatively with the challenges of the Internet. Decreasing the download time of our Web sites is just one of the things we can do to make our users and clients happy. While we would all love to have problem-free sites, there’s nothing better than a great-looking, fast-downloading Web site that your users love.

References

Bailey, Samantha, “Love Your Labels”, Webreview
Dawson, Keith, “HTML Smudging” Tasty Bits from the Technology Front
Dougherty, Alicia “5 Design Tips” ZDNet Developer
Nielsen, Jakob, “The Need for Speed” Alertbox.


Return to top.