Communications & Technology

Optimize Your Web Site

Images | Tables | Reduce the load | Keep Flash small | 

Reduce the HEAD | Check download times | References

According to a Web usability study by the Georgia Institute of Technology, Net users rate slow-loading pages as the biggest problem online.

Jacob Nielsen, a usability expert, really knocks factors that slow down the visitor getting the information they seek. He suggests preferring useful over pretty. And he cautions against using clever new code over a fast, simpler variety.  These considerations affect how "fast" your site is perceived by visitors.  As more sites get "faster", the more visitors come to expect that. 

Images

• Right-size. Always down-size the image for its final on-screen size.  Don't insert a large image, then reduce the image to be the dimensions you want.  Why?  The large image is a larger file size, so it slows down the page display time.  Don't make a visitor wait unnecessarily.

• Optimize. Use GIF type images for images that have 256 colors or less.  Use JPEG type image format for picture-type images. Avoid the PNG file type for Web use.  It has nice features for use as a "working file" type in an image editor, but is nearly always larger than a GIF or JPEG type format. A free online GIF optimizer is GIFworks.

• Specify.  Always specify the actual image size! This lets the Web browser display the page faster. It also avoids a really horrible look - a squirming Web page that shifts around as it loads in the visitor's browser.

• Compress. Use compression on JPEG type files.  Balance compression amount with picture quality. Reduce the number of colors stored in a GIF file. Don't use more that you need. One tip, though -- a GIF file changes size based on "base 2" number of total colors (2, 4, 8, 16. 32, 64, 128, or 256). So a GIF 34 colors is the same file size as the same one with 64 color palette.  Make your color number changes in GIFs based on these color number jumps.

• Compress - advanced. With some graphics editors or special utilities, you can save a JPEG format image as "Baseline optimized", which yields a slightly smaller image file size. Some editors also let you apply different compression to different areas of an image -- weighted compression.  This lets you have higher quality for the critical areas and yet gives lower file sizes.

• Progress.  You can save images as "progressive" ones.  Such images load in "stages" -- first a fuzzy images, then more and more detailed until the final image is in place in the browser.  Some people shun progressive images for two reasons:
  (1) They are usually a bit larger in file size.
  (2) They take longer for the final image to display. 
  So why should you consider using them? Visitors get to see them start displaying.  At that point, the visitor can move on to reading text, etc. until the image is all in place.  Visitors get an impression of a faster display because they can start reading the page faster.

• Stillness! Avoid animated images unless there is a serious, overwhelming reason to use them.  Animated images carry two big negatives:
  (1) The take longer to display in a browser because they are actually several images rolled up into one, displaying one after the other.
  (2) Animated images can often work against you -- they distract the viewer's eye and can actually pull their eyes away from the real content of the page.

Tables

• If you have a fixed table (vs. sized by percentage), add a Cascading Style Sheet (CSS-1) style:
  table {layout: fixed}  in the "HEAD" area or 
  <TABLE style="layout: fixed"> as an inline style.

• Avoid nested tables, if possible, in order to avoid a download speed hit. Use separate tables instead of one chopped up into nameplate area, navigation area, plus content.  Why? Display speed. Let visitors see your content as soon as possible.  You can use CSS positioning instead  using tables to position elements on the Web page.

• Use CSS. This adds speed due to reducing needed code. You can gain up to 5 seconds on a 10K page. Just  using page CSS styles on your text, instead of <FONT> tags, saves a significant percentage of size.

Reduce the load

• Make any JavaScript load as late in the page as possible. Why>? A <SCRIPT> tag makes  the HTML parser come to a halt while it processes the script code. So aim to let the pages text and content load as early possible before the script has to be processed.

• Optimize any scripts. Abbreviate names of variables and functions. Look for similar, smaller, and better pre-made code at script Web sites.

• Avoid Java applets whenever possible! Why? Initializing Java applets really slows down  performance.

Keep Flash small

Here's a Webmonkey checklist: 

• Avoid it whenever there's a reasonable alternative using HTML and JavaScript. 

• Use symbols and key frames strategically. 

• Minimize use of bitmap images, sounds, and video. 

• Re-use bitmap images, sounds and video rather than using many unique ones. 

• Use compression settings for individual images and sounds 

• When possible compress individual images and sounds using a program like ImageReady or Fireworks. 

• Simplify vector images using the Modify -> Optimize menu.

• Pace the download so that everything doesn't have to load all at once. 

• If you can't do anything else, add a Flash preloader and display a "loading" message. 

Streamline the HEAD

• In the <head> section of the HTML code, delete any META keyword/author/description content not really needed.

• A short <head> ensures that the first data the user's browser gets contains some "real" content --  immediately! 

• Use utilities like VSE Web Site Turbo to reduce average download time 20 to 50%, based on content.

Check download times

The time that many Web page editors shows for a given communications speed is a rough estimate.  It's wise to check the actual download times of pages once they are online.  

1. Check several different times so you get a good average.

2. Throw out the fastest and slowest speeds.

3. Average the rest. 

This process gives you a decent idea of actual download speeds for that page.  Remember -- 10 seconds is a "danger zone".  Keep page download times lower than that whenever possible. If you have a long, slow page and can't reduce the size any other way, look for ways to break up the content into a few separate pages. This page takes about 3 seconds at 56K or about 5 seconds at 28.8K.

References

WebMonkey tutorial - details on optimizing your Web site
http://hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial2.html

Web page graphics

This page was part of 2004 Annual Training for the
Atlanta-Emory and Atlanta-Decatur-Oxford Districts.

This page was last edited 01/13/2005 11:42 PM