HWG-News Tips Early August 2000

Speeding Up Download Time

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 7 August 2000 newsletter, for the following category:

Speeding Up Download Time

Many people consider frames to be the worst idea in the history of HTML, while others applaud the benefits they can provide. How can you utilize the power of frames while still keeping your site accessible, searchable, bookmarkable, and error-free?

This issue's winner!

The biggest foot-draggers in site loading are graphic files. There are two principal ways to counter those delays. The first is to reduce palette size. The second, and perhaps more significant, is to create a uniform site palette. Designers tend to look at an 800kb photo and blame the sloth of the entire page on that single source. Unfair and untrue. Through most graphic programs a surprisingly thin palette can be created for all of the type, line-art, ect. images that will comprise the rest of the "art" on a page. That palette can then be further reduced for individual images by prunning the extraneous colors and forcing the "close" ones to conform. The browser will not have to create an individual palette for each item and all subsequent images will be quicker. All of this can be done without loss to the aesthetics of the page or the individual pieces. What little tedium is involved will be justified by a lean, agressively loading, cleaner product.

You can see a detailed explanation of this at http://dcmaps.com/dcm/tutor/tutor01.htm

-- Submitted by Ed Edwards <eedwards@netkonnect.net>

Other Tips for Speeding up download time

I follow three simple procedures for speeding up download time:

1. Use GIFs instead of JPGs when possible because they're smaller;
2. ALWAYS use WIDTH and HEIGHT tags, and
3. if the image is particularly large, break it into segments and load the segments into a  table with the table tag having BORDER=0, CELLPADDING=0 and CELLSPACING=0 and the TD tags using HSPACE=0 and VSPACE=0 -

-- Submitted by Mike Calo <navpooh@erols.com>

When using images on a site, always use the WIDTH and HEIGHT attributes. The browser can then leave a placeholder for the image and display the rest of the page while the image is still being downloaded. The user can begin reading what's on the site quickly without having to wait for all the images to download and display first.

-- Submitted by Janet M. Russeau <Janet.Russeau@La-Z-Boy.com>

This tip doesn't actually make a page load faster, however it does make it appear in the browser faster. When using tables to format a page, break large tables into smaller ones whenever possible.  It has minimal affect on appearance but does increase the speed. Also use embedded tables sparingly as they tend to slow things down dramatically.

-- Submitted by Bob Kenkel <bkenkel@whatsshowing.on.ca>

Ensure that the code is tidy so that the code is syntactically correct with the HTML standard. Correct code will always load faster than 'will do' code in which some browsers allow slack coding to load. Also ensure that each webpage is focused to deliver a single message. If several related messages are required, have them on separate pages with links to the next page and try and keep page content to be on a single page (without any scrollbars). Finally, if you know the download is going to be SLOW, TELL the users and keep them informed of what is happening!

I could go on but rules don't permit me! I have a QA checliist of over 30 performance/style checks which I perform with my team following our experience over a number of projects. As with any code you can always tweak it to make it faster!

-- Submitted by Anthony Harrison <anthony.harrison@btinternet.com>

The main thing for faster dowloads from the 'net is the estate agents' keyword.. 'location, location, location..' the worst thing you can do is find a slow server to host your site on. Another cute trick to use is to decide on a limit for HTML and GIF/JPG files and stick to it, try to use compression on images, and use links to other pages in a sequence if there is more than Xkb amount of information, e.g. 'Next -->' or 'More Information-->'

-- Submitted by John Denton <john@mavica.freeserve.co.uk>

A few tips on download speed:

• Images are the main factor. Use something like Imageready or Fireworks to optimize them. 
• Put height and width tags in your HTML for your images.  It makes no difference to the actual download, but improves PERCIEVED download time as the browser renders everything before it's finished downloading.
• Don't forget that preloaded images such as mouseovers dramatically add to your overall size, avoid them, or keep them very small.
• Don't do anything in an image that you could do in just HTML.
• Consider using an embedded vector image (such as a Flash file) for simple artwork.

-- Submitted by Matt Burgess <matt@cybergroups.net>

The most effective trick I use to keep the download times on my sites quick, is to take full advantage of cache.  I will simply make sure that every image on my site that is the same, even if it is a small part, are the exact same file.  This way the browser will automatically take the image from its previously downloaded cache file and therefore download the new graphics on the page that much quicker.

-- Submitted by James MacAvoy <jamie@macavoy.com>

It should by now, be second nature to include "width" & "height" attributes in all image tags. Without a doubt this is highly useful as it allows Browsers to allocate space, continue loading/displaying the page text, then come back and start downloading the images. Reusing the same graphics (whenever possible) has also proven effective for increasing page download time.

The next most useful method is to create "Tables" within "TD's" and again, allow the Browser to allocate space "immediately." Not to over due it with lots of Tables, but the whole page should not have more that a total of 3 large, and 1 or 2 small, Tables. Any more than that and a redesign would probably be required. And only use Percentages in TD (Percentages should never be used in Table attributes), whenever there is no other way.

-- Submitted by Rob Atkinson <robatkinson@nucleus.com>

Obviously, keep pages short, and graphic-light.  Also:  Handcraft your code; if not, closely review WYSIWYG editor output (usually quite bloated).  Write concisely.  Position with tables and center tags rather than nbsp's.  If indenting, use only one space per level.  Reuse whenever possible; this includes reusing graphics, using style sheets to apply large combinations of tags, and using JavaScript to apply large repeated chunks (note you now depend on users having JavaScript available and enabled; make sure your pages are OK without it).  Use height/width tags on all imgs (SEEMS faster).

-- Submitted by Dave Aronson <postmaster@airnsun.dcfido.org>

1. Use CSS to unify your style.
2. No more font tags, and keep table properties simple.
3. Write xHTML. It may require some extra characters: " />" instead of ">" but it is worth it when you move to pure XML or something else in the future. Who do you really want to save time for? Yourself too silly!
4. Reducing downlod size can be mostly done in images. Most of them serve no purpose, and their html code takes up a chunk. Re-design your sites to minimize on http connections/number of items, and you will be a happy camper.

-- Submitted by Elijah Sarver <anrkngl@lowmagnet.org>

One way to speed up downloads is to see if the browser that the person is using supports gzip encoding. If so, you can gzip a page, the graphics, etc.. and send it along to the browser to be unzipped. There have been reports of this speeding up transmission on slow connections by as much as 10 times.

-- Submitted by Allen <allentheengineer@earthlink.net>

1. Always include correct width and height attributes in img tag. This is equally true for other multimedia elements that use embed or object tags.
2. Avoid unnecessary use of multimedia content like Java Applets, movies, images, animations, and other elements.
3. Try to use Jpeg format as it offers great compression facility.
4. Stick to a size range for every page that is easy to download. It may be set by doing little research. It would also help you in giving a similar look to all the pages of your site.
5. Don't include large images as inline images rather offer 'em as external images option.

-- Submitted by Zahid Sheikh <zsheikh@gem.net.pk>

Instead of using simple graphic files, utilize the power of style sheets to create banner-looking text and eliminate the need for downloading large graphic files. Another poor use of graphics is background images. I can't tell you the number of times I've seen someone use a solid color graphic file as a background image when the background color can be specified and eliminate the need for another graphics download. Finally, use tables sparingly. One large table filled with html code will give the web surfer a blank page while the whole document loads. If necessary to use tables for most, if not all of the document, break it up into multiple tables to shorten loading time.

-- Submitted by Howard Merrill <hmmd@erols.com>

Divide long tables. Browsers wait to have the whole table before showing it so they can calculate the column width. If you divide in sets of rows then the client will be able to start looking at the first set while the rest of the table is coming. This actually doesn't speed up the whole download but avoids the long wait in front of a blank window.

-- Submitted by Juan Lanus <jlanus@interar.com.ar>

Two important points in writing efficient pages which load quickly: file size and layout information.
1) Always optimize graphics (I like SpinWave's crunchers), and eliminate unnecessary html code such as excess table and font code generated by wysiwyg editors. Use graphics intelligently, e.g., avoid using graphics for plain text. Consider using tables creatively to mimic graphic buttons.
2) Use height and width attributes to reserve space for graphics (this will also allow visitors to read text while the graphics load), and use width attributes in tables to speed up table display.

-- Submitted by Carlton Higginbotham <carlton@bassocantante.com>

-- Submitted by BAR <FOO>

-- Submitted by BAR <FOO>

1. Have all images load from the same directory.
2. Always use image width and height attributes so that browser can "reserve" space for the image.
3. Use a second image and the lowsrc attribute so graphics appear to load faster. <img src="image-big.gif" lowsrc="image-small.gif">
4. Resize graphics in Photoshop or another program. That is, don't use HTML to squeeze a 200x300 picture into a 50x75 space.
5. Optimize images. Sometimes, breaking an image into multiple pieces (as if you were creating an image map) saves overall size. Try GIFBot at http://netmechanic.com/accelerate.htm.
6. Preload images before you need them.
   -- Submitted by Gerilyn Brander <gerib@plmtechnologies.com>