Optimize your site
On this page ...
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. (See
his "Top 10 Guidelines for Home Page Usability")
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.
- Check several different times so you get a good average.
- Throw out the fastest and slowest speeds.
- 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
