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
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
You can see a detailed explanation of this at
-- Submitted by Ed Edwards <email@example.com>
Other Tips for Speeding up download time
I follow three simple procedures for speeding up download time:
- Use GIFs instead of JPGs when possible because they're smaller;
- ALWAYS use WIDTH and HEIGHT tags, and
- 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 <firstname.lastname@example.org>
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 <email@example.com>
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 <firstname.lastname@example.org>
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 <email@example.com>
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 <firstname.lastname@example.org>
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 <email@example.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
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 <firstname.lastname@example.org>
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
pages are OK without it). Use height/width tags on all imgs (SEEMS faster).
-- Submitted by Dave Aronson <email@example.com>
- Use CSS to unify your style.
- No more font tags, and keep table properties simple.
- 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!
- 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
-- Submitted by Elijah Sarver <firstname.lastname@example.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 <email@example.com>
- Always include correct width and height attributes in img tag. This
is equally true for other multimedia elements that use embed or
- Avoid unnecessary use of multimedia content like Java Applets,
movies, images, animations, and other elements.
- Try to use Jpeg format as it offers great compression facility.
- 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.
- Don't include large images as inline images rather offer 'em as
external images option.
-- Submitted by Zahid Sheikh <firstname.lastname@example.org>
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 <email@example.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 <firstname.lastname@example.org>
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 <email@example.com>
-- Submitted by BAR <FOO>
-- Submitted by BAR <FOO>
- Have all images load from the same directory.
- Always use image width and height attributes so that browser can "reserve" space for the image.
- Use a second image and the lowsrc attribute so graphics appear to load faster. <img src="image-big.gif" lowsrc="image-small.gif">
- Resize graphics in Photoshop or another program. That is, don't use HTML to squeeze a 200x300 picture into a 50x75 space.
- 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.
- Preload images before you need them.
-- Submitted by Gerilyn Brander <firstname.lastname@example.org>