Jump to the following topics:

1. Some ideas regarding fast-loading pages.
2. Features which slow the loading of a page. 
3. Tips for reducing the file size of graphics.

Some ideas regarding fast-loading pages.  

1. Our pages need to load quickly. If our visitors have to wait too long for a page, they will click on the Back button, and they will probably never visit us again. Fast-loading pages are a matter of courtesy and business sense.
2. What is a fast speed? Some website designers say that the maximum size of a page should not exceed 50k or 70k (including all text and graphics); generally, we might strive for 20k or less. However, "fast" is a subjective judgment.
   • It is subjective in terms of the amount of time. Some people will leave if they have to wait for more than 20 seconds; other people might wait for 2 minutes or more.
   • It is subjective in terms of the position of the page. People are more impatient when they are waiting for the first page of a website; if they have to wait a long time to come in our front door, they are likely to leave. After we have introduced the people to our site, we have their attention, so they are more willing to wait for slightly longer loads on the interior pages.
   • It is subjective in terms of the importance of the information. Our visitors will wait longer for essential information than for marginally interesting information.
   • It is subjective in terms of our visitors' expectations. If they expect a particular page to load quickly, they will become impatient quickly. Therefore, if we know that a particular link leads to a slow-loading page, the link should mention either the page's file size or the page's estimated download time (at a particular modem-speed, e.g. 28.8k). The link can also describe the content of this big page so that our visitors can decide whether they want to go there at all.
3. The speed will vary. The difference can be due to these factors and others:
   • The internet might have more traffic at this time.
   • Our server might be receiving more hits at this time. And it might be a generally slow server.
   • The visitor's server might have our website in a cache.
   • Our visitors might be using a 14.4k modem (while others are using a T1 line).
4. We can test our speed. We can see how fast the pages load on our computer -- and on other computers, using various modem-speeds, various times of day, etc.

Features which slow the loading of a page. All of these features can be useful on a website, but they cause a page to load more slowly.

1. Excessive amount of information and graphics on a single page. Instead of putting a large report onto a single page, we can divide the report into sections, and put each section onto its own page.
2. Tables. A browser doesn't display a table's contents one-item-at-a-time; instead the browser waits until the entire table is loaded before it displays anything. Therefore, if we have our entire page within a table, our visitor is looking at a blank screen for a longer period of time. The solution is to put some of our text and graphics outside of the table, so that those items will load quickly; our visitors will have something to read while the table loads. (Browsers are even slower when we use a nested table, i.e., a table within another table.)
3. New windows. Sometimes we might write a hypertext link such that it opens a new window of our browser, to display the linked page (in addition to the original window which displays the current page). However, people with a limited amount of RAM will experience a significant slowdown (or even a crash) when the new window opens.
4. Java. Java can cause a 10-second delay in the loading of a page at 28.8k.
5. Plug-ins. The page's loading-time will be slowed by Shockwave, etc.
6. Midi files. These sound files can cause a 10-second delay in the loading of a page.
7. Counters. Counters can cause a delay.
8. Distance from the server to the customer. If our website offers software and other large files to be downloaded, we can speed the downloads by creating "mirror sites." Mirror sites are copies of our site on other servers throughout the world -- so that, for example, a customer in Japan can download our software from a server in Japan instead of downloading it from the United States.

Tips for reducing the file size of graphics. LUGs (Large Useless Graphics) are the main cause of slow loading.

1. We can use only the necessary number of graphics. This includes icons and buttons. The browser has to get each item individually from the server; therefore, ten 10k graphics will take longer to load than one 100k graphic.
2. We can crop the photos, to take out the extraneous parts of them.
3. We can minimize the number of colors. There are various methods for reducing the number:
   • We can select the number of colors in our graphics software. In many cases, 256 colors is sufficient, but we might be able to go even lower, without losing any quality. (Do the color-reduction before you do any anti-aliasing or dithering, to avoid distortions of the image.)
   • We can use solid colors instead of gradients and multi-colored objects (e.g., backgrounds, icons, etc.).
   • We can change a color image to a black-and-white image.
4. We can change the format of the graphics. For example, my original banner was 29k as a bitmap, 13k as a jpg, and 3k as a gif. (The format is indicated by the filename extension, e.g., banner-1.bmp, banner-1.jpg, or banner-1.gif.) Graphics software allows us to change the format easily with the "save as" function.
5. We can re-use graphics throughout the website. When a browser downloads a graphic from a website, it stores that graphic temporarily in its cache. Then, if the same graphic is on another page, the browser pulls up the graphic from the cache -- very quickly -- instead of slowly downloading again it from the website. Therefore, if we use some of the same graphic files on each page, our pages will load more quickly than if we use entirely new graphics files.
6. We can adjust the compression ration. In jpg format, we can select a high compression ratio, which will reduce the file size without causing a significant reduction in the graphic's quality.
7. We can use height and width attributes. These html tags tell the browser how much space it needs to reserve for the graphics; therefore, it can lay out the page, and then start to load the text immediately (so that our visitors can begin to read the text while the graphics load). After we add the attributes, the image tag looks something like this: <IMG SRC="filename.gif" HEIGHT=40 WIDTH=55> . Our graphics software will tell us the height and width of our graphic (in the number of pixels); we simply type in those numbers. Although we can re-size the graphic simply by typing in different numbers (e.g., quadrupling that graphic by typing HEIGHT=80 WIDTH=110), re-sizing slows the time for loading.
8. We can refrain from dithering. Dithering improves the quality of the image, but it enlarges the file size.
9. We can use thumbnails. In some instances, we don't have to display a full-sized graphic on the page; instead we can use a tiny version of the graphic (i.e., a thumbnail). The thumbnail is linked to another page, where our visitors can see the graphic in its normal size.
10. We can offer the options of high-resolution or low-resolution. At a graphics-intensive site, some people might want to see the graphics in their highest quality (i.e., their highest resolution); other people would prefer low-resolution pics which would load more quickly. If we offer this choice, we have to make two versions of our website.
11. We can use smaller tiles for the background. Small tiles load more quickly.
12. We can scan at a low resolution. A computer monitor is only 72 dpi, so there is no reason to scan at a higher resolution.
13. We can use a caption to indicate the subject and size of a photo. People can read the caption, and decide whether they want to wait for the photo to load onto the page.
14. We can use low-source images. With this html code, our visitors do not have to wait for a color photo to load; instead, they receive a quick black-and-white version of the photo, which they can see while the color version slowly loads into the same space. The code looks like this: <img lowsrc="jim1.gif" src="jim2.gif> ; jim1.gif is the black-and-white version.
15. We can use interlaced images. Interlaced images are the ones which appear gradually on a website (rather than all-at-once, after a long wait). This step-by-step rendering allows viewers to imagine what the completed image will look like; if they don't want to see the rest of it, they can stop the loading process.
16. We can use websites which will reduce the size of our graphics. Most of these services are free:
    • Netmechanic. I like this one. I type in the URL of the graphic (e.g., http://www.james-harvey-stout.com/a.gif); then Netmechanic shows me the graphic as a 256-color graphic, etc., down to 2-color -- with the new file size. All for free.
    • GIFWizard.  
    • JPEG Wizard.
    • GIF Lube.