How-To Increase the Speed of your Business Website
by Carrie Stappenbacher

OUTLINE
· Introduction
· Images - file types
· Scaling and Cropping
· HTML tricks with images
· Condensed coding
· Flash and other doo-dads - when and when not to use them
· Testing your site - a final and important step

INTRODUCTION
As the famous conceptual metaphor says, "time is money." The Internet, like any other aspect of life, adheres to this concept - as time increases, money decreases. Whether or not a user visits your site is directly related to how long it takes for your home page to load.
Unlike television and other forms of media, the web is highly user-driven. Advertisements on TV cannot be skipped, but on the Internet users choose the companies they would like more information about. That's why it's important that your website be the one they visit - and that is only going to happen with minimal wait time.
After 5 seconds, users get aggravated and push the "back" button, leaving your site and whatever information it might have provided them in the dust.
Of course, you also want your site to LOOK memorable and nobody remembers a straight text page. But, as everyone knows with images and other forms of media, loading time increases. How to find a happy medium? Read on.

IMAGES - FILE TYPES
One of the biggest time-consumers is an image, especially when it is not optimized for the type of graphic that is being displayed. If nothing else, memorize this one phrase:
"JPEGs for photos, GIFs for logos."
Though your graphics program might have many types of file formats for your images, the web loves these two types in particular because they greatly compress the image size. Even with the above phrase, it would be nice to know WHY we use JPEGs for photos and GIFs for logos, wouldn't it?
JPEGs are called a "lossy" compression because information about the image is deleted in the process of making the file smaller. It groups areas of similar colors together and saves it as one part of the file. When you save or export an image as a JPEG, you have a choice on the image quality you would like. For our website purposes, medium or low quality is key. High quality is reserved for print media.

GIF files, on the other hand, contain a palette with a limited number of colors. The fewer colors the palette needs to correctly render the picture, the smaller your file will be. That's why it's great for logos (which are most often black and one other color), or images with a lot of solid areas, like cartoons or clip art. GIF files do, however try to compensate and blend colors using dithering - which makes for larger file sizes.
For example, this photograph of a rainbow from Tony Stone . Saved at the highest quality jpeg, its size is 6.896k, which would take 3 seconds to load on a 28.8 connection. Only the highest quality gif file (128 colors, dithered) can make a comparable picture, at 6 seconds on a 28.8 modem - with double the file size of the jpeg at 15.35k!
Also here for demonstration is the lowest quality gif file - 32 colors with no dithering. Notice how the colors do not blend at all - in fact they appear to be banded. That's because only 32 colors are defining the photograph. Since dithering is turned off, the edges remain defined. Even with this poor quality, it is still larger than the highest quality jpg, at 7.458k!

Just remember that one rule: "JPEGs for photos, GIFs for logos" and you'll be on your way to very compressed graphics.

SCALING AND CROPPING
If you've ever worked at a newspaper, or even on your high school yearbook, for that matter, you have heard of cropping and scaling. You can decrease file size dramatically in photographs by cutting out unnecessary background space (this is cropping).
Scaling, on the other hand, is shrinking or enlarging your graphic. Does it need to take up a whole page, or can it be a tiny version of the original? Graphics that are greatly scaled down (called thumbnails) are often linked to bigger, more detailed versions of the same image.
How to scale and crop? Scaling is easy - in most graphics programs it is in the IMAGE menu -> image size. You can then adjust the height and width of your image by percentage or pixel size. Note here you can also change the resolution of your graphic.
Resolution is how many pixels (tiny dots) per inch define your image. Low resolutions appear grainy, while higher appears smoother. Since computer monitors can display nothing larger than 72 pixels/inch, always go that size or smaller.
Cropping is no harder - using a selection tool (you'll probably want the rectangle tool), box in the part of the image you want to keep, go to the image menu and choose crop, and the unwanted part of your image will be deleted.
Cropping is good if you would like to single one person out in a group photograph - or leave something out (like an ugly background or an ex-lover!).

HTML TRICKS WITH IMAGES
Do you have a graphic that is repeated several times on the same page, such as a bullet defining items of a list? Get psyched, because it only needs to download once, even if it is displayed 20 times on your page! Repeating an image also keeps the look of your site unified, creating a sleeker look.
Have you ever had to wait for an image to load before being able to read the text? Irritating, isn't it? The trick behind this lies in the IMG tag in the HTML code - the WIDTH and HEIGHT attributes. With these values, the browser creates a frame for the image to load in and can continue loading the page's text.
Also note that you can make images larger or smaller by adjusting the WIDTH and HEIGHT values. (Beware: small images scaled larger become grainy, large images reduced make for unnecessary extra loading time)
Another big no-no: linking to images on servers different than your own. Not only is this bad netiquette (servers can get overloaded if many people link to images), it increases your loading time as well.
Each connection to an outside server takes 2 seconds - nearly an eternity as far as we're concerned! So, do the right thing - download pictures and save them to your own server.

YOUR HTML CODE
Although text is small and takes a relatively small amount of time to load, it still should be a consideration in increasing the speed of your website. Every character is 8 bits, and believe it or not, the bits add up quickly.
Also take into consideration the fact that the characters displayed in your browser are not the only ones in your HTML file - there may be thousands of markup characters (those that make up HTML tags) lurking, quite unnecessarily, in your file.
Having:

at the beginning of every paragraph or in every table cell quickly adds extra characters. Please be aware that interface-based website editors such as Dreamweaver, GoLive, and FrontPage (also called WYSIWYG - What You See is What you Get editors) are prone to doing this type of coding.
Another part of your HTML code that can get long is link addresses - take a look at the URLs search engines generate and you'll understand what I mean. On one site it is stated, "AltaVista wasted 4 KB of HTML just to make those "1 2 3 ... 20" links to additional results pages (at the bottom of every results page), mostly because long URLs for queries and button images were repeated 20 times in a row." 4 KB!! Don't be a victim!!
Though it may take some time and effort, it is valuable to learn CSS - Cascading Style Sheets. These prevent "superfluous code" because you can define properties for certain types or groups of data. It's easy to understand CSS if you think of a style sheet as a set of rules that are applied to certain parts of your website.
For example, on a product display page you might have a list of items. Each price can be displayed in green text, descriptions in black, titles in orange - with without typing in or defining the text properties each and every time - making your HTML file shorter, and loading time faster! If you have one style sheet for your entire website, the properties will have to load only once instead of countless times on each page.
CSS also helps in quick remodels of your site. It's easy to change the entire look of your site in seconds. Maybe for Valentine's Day our inventory page could be remodeled to display prices in magenta instead of green.
To do this, the price property in the style sheet would be changed, and the change instantly applied to every price. No more altering each and every FONT tag. The effort is well worth it!!

FLASH AND OTHER DOO-DADS
"I know what will make users remember my site -- I'll have a really cool Flash introduction with awesome animated GIFs! They'll never forget me then!"
Unless your company makes movies, produces cartoons, or is involved in another type of fine art, Flash introductions are a bad idea. Just consider it - users wait an extra five seconds (or more!) to see your company's logo rotate and bounce around the screen to shareware music files.
It may have been impressive a few years ago, but now users want to get to the real substance - what your company does, how much services cost - you know, the good stuff. Remember, in most cases, you're selling a product or service, not a logo.
When is it OK to use Flash?
· In product demos.
· Virtual Tours or anything that needs a spatial feeling
· Games, art, movie clips
· Banner Ads

TESTING YOUR SITE
You've got your GIFs and JPEGs straight. You've cropped, scaled, and CSS'ed your little heart out - and things are looking good. On your computer, at least - but there are many ways visitors will be visiting your site.
If possible, test your site with different connection speeds, with different browsers, on different computers. What seems to be loading quickly on the office T3 connection may be painfully slow on your 56k modem at home. There are an infinite number of ways to get on the Internet. You might have a user who is still on a 386 with a 14.4-baud modem.
A vision-impaired user would have a utility that reads what is on the page to them. Bill Gates might even be viewing your website on a 22-inch monitor, or it might be displayed on a projection screen at a conference! These seem to be extreme cases, but they are certainly possible.

A good way to find bugs your site quickly and easily is through online utilities. Though they aren't perfect, they do check the HTML for any mistakes (though they may not catch your redundant code!), and make warnings if your image files are too large for the average web user. "http://www.netmechanic.com/cobrands/zd_dev/" has a quick and easy to use utility that checks both this and other goodies like browser compatibility and even your spelling!
Be sure to have others use your site, and observe their way of thinking. A variety of users - your 10-year-old son or daughter, a non-technical staff member, and your techie co-worker will all be good candidates with very different views.

Although having your company logo as a link to the home page might make sense to you, it might not be obvious to every user. Usability also affects the speed of your site - if users have to spend 10 minutes trying to find the phone number of your office, it's likely they won't be back again. Keeping your website easy to navigate and fast-loading is one of the keys to having a successful online business.