Page Weight - " Don't make me wait "

By Vaishali Singh
Posted Thursday, September 30, 2004

Ever Wondered What Does $$$ Going Down the Drain Sound Like?

How many users is your web site losing each day? By displaying a spinning, churning, cranking, "loading ... please wait" message, it could be plenty.

According to study by Zona Research, '$25 billion is lost each year due to slow-loading Websites, one third of online shoppers waiting for web pages to download will "bailout" after only eight seconds.'

Those are pretty serious numbers people!

Weighing the Web Pages / Time for a Diet?
I am sure you've been counting your calories, so why not count your bytes too...

The only way you can do that is by weighing your website. For a quick page tune-up visit WebSiteGarage, which will compute total page weight and check how fast your page loads under six modem speeds. Do remember that page weight includes all files that make up a page (HTML, images, Scripts, CSS, flash etc).

Ideal Web Page Standards:
So now you know that your homepage weighs say x number of kilobytes, then what? How do you know whether you need to knock off the flabs or live with it?

Jupiter Media Metrix, a well-known web research firm, recommends that webpages should weigh no more than 40KB to 50KB, which take about 8 to 10 seconds for your page to appear over a 56-kbps modem connection and -- about the limit of most people's patience.

Coolhomepages recommends about 75K max. (Users with too much time on their hands will note that CHP's home page is about 95K - but our users are mostly very web-savvy folks with higher speed connections than most, so we tell ourselves that its not a terrible thing...)

Any slower, and you risk losing customers, as they give up in disgust and click away to another site before yours has even finished loading. You might know it's "worth it" to wait...your visitors don't - and they usually don't care.

Add to that, the fact that an increasing number of people are browsing the Web using very low-bandwidth connections, and you've got an even more urgent need to keep your web pages small and lightweight.

Set Your Own Standards:
The first step to reducing page weight is to analyze the size and necessity of all elements on the page. So don't let the 'Standards' hold you back.

You are the designer and the best judge so, don't just ask yourself "How fast should your web page load?" but ask "How fast does this page need to be?" The best way to set reasonable guidelines is by comparing your website to that of your competitors and other like-sites.

And once you are done with that, set your own standards and 'Stick To It' (a li'l bi(y)te here and there is ok, we all cheat on our diets...).

Losing customers to competitors / Customer Bailout - Prevention:
According to Donna Auguste, Freshwater Software's CEO and President, consistency, uptime, trust and speed are the most important qualities for the success of an e-Business website.

Consistency: Site consistency breeds consumer consistency as it instills a degree of comfort and a feeling of experience in navigation.
Uptime: Web sites must be up and running 24 x 7.

Trust: Trust is the basis of any successful business - or e-Business - relationship. Trust results from a combination of consistency, 24 x 7 uptime, proper security methods, adequate customer service, and prompt product delivery time. Once customers trust a site, they are likely to return and refer friends and family to the site throughout the year.
Speed: A fast site retains the consumer and it also helps companies develop a strong brand image. Users typically don't notice if a site loads quickly, but they nearly always notice when a site loads slowly.

One sure way to prevent 'Customer Bailout' is designing a lightweight site, or at least, homepage.

Graphics:

Remove unnecessary graphics.

Optimize and compress all images. Creating light graphics using web palette and optimizing images

Reduce the dimensions (height and width) of images.

Reuse graphics. This will reduce load time since the image is only downloaded from the server once and then pulled from cache each additional time it is displayed on the site.

Preloading images is a good way to insure the smooth functionality of mouseover effects. It minimizes that awkward delay that viewers might otherwise experience while waiting for necessary images to load. An easy way to preload images is with Javascript.

Optimize GIF Animations.

Clean up your HTML

If you use a visual HTML editor, remove any extraneous code.

Remove unnecessary comments.

Minimize the size of the HEAD section.

Even text can add up, so keep pages reasonably short.

Crunch your pages with an HTML optimizer / Html code cleaners like the Absolute HTML Compressor, a free product available at (http://www.serpik.com/ahc/).

When you create a page with tables, keep in mind that the more tables that are within tables, the slower the page will load, a table with multiple rows loads more quickly than if you write each row as a separate table.

Frames, by their very nature, take a bit more time for the browser to load. Especially the first time the frameset is loaded. If you use a framed site, then make sure that each frame in the frameset is small and loads quickly. Top 6 ways to remove unnecessary functionality:

Scripting should be viewed with the same degree of scrutiny as graphics.

Avoid using Java applets as they take quite some time to load.

Evaluate all scripts and remove any that are unnecessary for functionality and any feature that could be just as easily accomplished with plain old HTML.

Whenever possible, delay script loads until after the page loads.

Evaluate the use of audio and multimedia and eliminate whenever possible.

Optimize Flash.

Evaluate the speed and necessity of banner or news feeds.

Either eliminate the wait or make your pages worth it.

Avoid "splash" pages if possible.
Don't make your visitors jump through hurdles to get to your information but if you feel you can't live with out a splash page, make it a visually appealing at the same time interesting and fast loading. A good site for inspiration and ideas for Splash Pages is (http://splash.firmlist.com/) has a collection of splash pages submitted by various designers.

Flash and Preloaders - information while the movie loads
The preloader can be finely tuned to engage the visitor, bringing him/her smoothly into the main movie. This can be accomplished in any number of ways:

Progress bar - let the user know how close they are to seeing your page

Design - if your website uses a particular theme, utilize a version of the same in your preloader.

Color and Font - similar color and font choices tie things together.

Sound - sound files must be very small in order to keep things simple. One way of doing this is keeping preload sound quality low, saving higher quality for later. Use tiny files; convert stereo to mono.

The Bottom Line:

For every tick of the clock over a certain point, you're losing a segment of your potential visitors.

Try to keep image and file size to a minimum in order to speed download time. A page should be designed (whenever possible) to display in stages so that something appears almost immediately to engage your site visitor and encourage them to wait for more. Each element on the page should have a purpose. When a large graphic is unavoidable, let your visitors know.

A page should weigh as little as possible while still achieving its purpose. In your efforts to make your pages as small as possible, don't forget that visual appeal is also a consideration. Text is quick to load and necessary for content but few linger on a text-only site. So strive to find the happy medium.

About the Author
None