It's About Time!

by Joe Gillespie — Oct 1, 2001

by Joe Gillespie

Time plays strange tricks.

How is it that some Web pages seem to load almost instantly and others take an age?

It could be something to do with the page file size and the amount of data that has to be downloaded from the server to your computer, or it might be that the designer has not managed the downloading efficiently.

From my dim and distant schooldays, I remember one particular day. It was my birthday. I'd been given some birthday money and there was a model airplane that I really wanted in a store downtown. It was a particularly boring science class where the teacher was marking papers from some other class and told us to revise and tidy-up our lab notes. I sat and watched the hands on the electric wall clock make their regular spasmodic twitches for two very long hours. Time never flowed so slowly!

Now that I'm a bit older, days just fly by and months meld into years, yet time always seems to pass more slowly if I'm bored or waiting for some specific event.

If you have a lean and mean Web page, passage of time is not going to be a problem. As the file size gets bigger, the download time is obviousely going to take longer.

I used to work to a rule of thumb that the total size of a Web page should be less than 25k, but with so many different delivery speeds around today, it's not the file size that counts, it's the download time on the slowest modem. Now, 56k is not the slowest modem, but it is the most common and the best benchmark. Even under ideal conditions, 56K modems never reach that speed – and ideal conditions are pretty rare too!

Modern cable and DSL connections gives some Web users greater bandwidth capabilities which means that pages load a lot faster but some designers seem to think that high speed connections are an open invitation to increase the sizes of their pages.

The worst offenders for slow downloading times on regular Web pages are large images. Even this small image is the equivalent to 1000 words of text (6k).

Scarf

Your first line of attack in the assault on file sizes is to make sure your graphics are optimised. Are your GIF images saved at the lowest possible bit depth? For instance, a typical line of single coloured, anti-aliased type requires 8 colours (3-bits) to blend from foreground to background. Anything more than that is an unnecessary waste. Non-anti-aliased type only needs two colours (1-bit) and has a smaller file size.

Another interesting technique is to break GIF images up into alternate rows of image and blank. This almost halves the file size as the blank horizontal lines compress very efficiently. See the example on this month's new style home page.

JPEGs are always a trade-off of quality against file size, but you have to do this by trial and error as each image will have its own optimal compression value on the threshold of unacceptablity. You can only really judge this if you have a direct side-by-side comparison of "before" and "after".

A couple of years ago, I wrote an article which compared the file sizes of various popular graphics packages and there was quite a marked difference in their efficiency at compressing both GIFs and JPEGs. All those programs have changed now so it wouldn't be fair to quote old test results. All that I will say is that you shouldn't take it for granted that your expensive image editor is giving you the smallest file sizes. For instance, any GIF image I drop onto BoxTop Software's SuperGIF is reduced in size by a significant amount.

Sometimes, even after careful file size optimisation, the page is still unavoidably "heavy" and will download slowly. Slow Web pages alienate surfers! What else can you do?

Accepting that time seems to pass more slowly when someone is bored, the trick is to stop them from getting bored by masking the passage of time. There are several ways to do this on a Web page.

Pre-Caching

The first time an image is requested from the server, it has to download over the internet connection and is then stored in the browser's cache folder on the user's disk drive. Subsequent usages of the same image are retrieved from this temporary storage on the hard disk and displayed very quickly. If you can trick the browser into downloading the image onto the hard disk before it is actually needed, then it jumps straight onto the screen when it is required.

Divers cached link

This is the actual image displayed at 20% of its full size, so it is already in your browser's cache and when you click on it, will open very quickly.

Divers link picture

This is the same image but with a different filename, is not cached and will only download when you click on the thumbnail.

Pre-caching images can be done with JavaScript in just the same way that you preload rollovers but an even simpler way is to place the image on a prior page but at a tiny size – 1 x 1 pixel works great. Of course, the 1 x 1 pixel image will be visible on the page so you have to disguise it as best you can by hiding it amongst a load of other stuff – like a period at the end of a sentence.

Of course, you can't pre-cache the images on the first page of your site, or where you can't control the order that people view the pages, but you can make sure that the first page is relatively light and keep all the bigger stuff until later so that you can download them behind the scenes.

On the left are links to are two largish images. One has been pre-cached without you having been aware of it and the other hasn't. They are idential JPEG images so that they give a fair comparison. As they are saved with different filenames, they are treated as separate files.

The original image is nearly 47K but is set to display at 20% in the browser using its height and width attributes. The "thumbnail" requires the full image to be downloaded into the browser's cache before you can see it on this page but, because it is way down here, you didn't see that happen.

This second is a separate 5k miniature version of the full image but requires the full version to be downloaded from the server when it is clicked. As you actually see this happening, the waiting time is very obvious.

Distraction

A conjurer or stage magician uses sleight-of-hand to draw attention away from that card that he is slipping into his inside pocket. By drawing people's attention to something else, you can create the illusion of making time disappear. The most effective way to do this is to give them something to read while the graphics are downloading – just like the magazines in a dentist's waiting room.

First, make sure that your <IMG> tags have correct Height and Width attributes. If the browser knows the size of the graphics, it can display the text right away and build the page around the placeholders while the images are still downloading. If you can arrange for the loading images to be somewhere further down the page and out of sight, then better still.

Progressively rendered images also provide good distraction. Instead of loading top-down, they load at a low resolution and then gradually resolve into their intended state.

Another useful technique is to use a <low src> image – a very low resolution placeholder that is replaced by the full resolution picture when it has downloaded. At the point where the reader has enough visual information to recognise what is going on in the picture, they have effectively stopped waiting, even though the image is incomplete.

The "progress bar" displayed during time-consuming tasks in applications is a clever means of masking waiting time. Not only does it provide a degree of distraction, it gives you an idea of how much longer you have to wait.

You can't really use a progress bar in HTML pages, but you can use something similar for Flash movies.

Flash is designed to keep file sizes down, but even so, there are too many movies that have no, or poor, download management. The worst thing you can do is have a flashing message saying "Downloading... please wait..." This empahasises the fact that time is passing rather than hiding it. To make matters even worse, you don't know how long the wait is going to be and giving a readout of the amount of data downloaded doesn't help if you don't know what the total size is. Countdowns are better than countups in this respect but there are better ways to hide waiting time.

Instead of having to download the whole file before it starts playing, use natural breaks to download new data.

It's all about space and time.

Give the reader something to keep them occupied - some text to read, an interesting image to dwell on, some animated feats of derring-do to keep them amused. They should never be aware that they are waiting for something to download – and you should never explicitly point it out to them!

It is better to read the magazines in the dentist's waiting room than to do nothing and have somebody remind you every five minutes that the dentist isn't ready for you yet.

Remember that although a second is a precise measurement of time, our perception of passing time is far from exact.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float