Performance Tips

Overview:

Bandwidth and speed will not change significantly anytime soon.

Your audience will set your performance parameters:

• Count on 28.8 for consumers
• Count on 14.4 or less for international connections.
• Only count on higher-bandwidth for high-end, technologically savvy users or those on an intranet.

No-brainers:

Create the illusion of better performance by doing these things...

• Use HEIGHT, and WIDTH tags--especially for tables.
• Use ALT tags for everything for text-only navigation.
• Use simple, non-nested tables wherever possible.
• Reuse graphic files wherever possible (and at different sizes).
• Design for a collaged-graphic appearance.
• Offer media files in multiple formats and label them with their sizes, estimated download time (usually at 28.8), and the operating system they will work on (instead or in addition to the file format).
• Interlace JPEGs if they're not people.
• Preload graphic files--especially JavaScript rollovers. example code

Style, Color and File Formats:

• Use the right file formats for the right type of image:
• GIFs for graphics--especially large expanses of color, and
• JPEGs for photographs. Note: JPEGs tend to create havoc and higher contrast than desired at visual edges in a photograph.
• Some photographic styles (blurs and smooth areas) compress better than others.
• Vertical gradients vs. horizontal gradients
• Adaptive color palettes, small color depths, and the Netscape palette.
• Don't forget to think creatively...
• Design pages to make use of white space as a design element so that you can get away with smaller graphics.
• Explore using Dynamic Fonts or TrueDoc fonts so you can use fewer graphics (text can be ASCII). example
• A few smaller graphic files tend to look faster when loading than one larger one.
• Many times, a few larger files will require fewer server connections and transfer faster than many smaller ones. This is a careful balance you must strike with the tip immeidately preceeding this one.
• Use several tables instead of one large one since they are easier to calculate for the browser and will display faster in small chunks since all tables must wait to render until they are fully caluclated.

Animation:

Your Options:

• QuickTime (using Media Layers)
• Animated GIFs (streaming media)
• Shockwave
• Flash (most available for newer browsers)
• Java
• JavaScript
• Anything else

Engineering:

Use fast serers configured for a lot of traffic whereve possible.

Locate your servers at Network Access Points (NAPs).

Use mirror servers around the world to balance the load on the servers.

Secure Server conncetions (SSL) take longer to process (due to the encryption). Use these only when necessary and user fewer graphic and other files where possible to reduce this processing.

You must find a balance between loading the page with code to detech plug-ins and transfer different versions of files (less upkeep) or requiring the server to do this (faster download but will increase the server's load).

Tools:

• Photoshop (but not the GIF89 Plug-in)
• Transparency 1.0 (to strip file data)
• deBabelizer (if you can stand the interface)
• Adobe ImageReady

next >>