Lose the Loading Time and Keep the Visitor

Tweet

Slow sites drive visitors away. It’s that simple. Not yours, you say? Think it’s "worth the wait"?

Sorry to break it to you pumpkin, it’s not.You’re on your way home. You have two choices. You can either take the route that is the shortest in terms of distance but has many stoplights, or you can take the route that’s a little longer distance-wise, but has no stoplights. Which do you choose?

I choose #2, and so do many web surfers. Why? Because it’s better to keep moving. I want to look. I want to read. I want to buy. I *don’t* want to wait 67 seconds for a page to download because the site designer thought it would be a good idea to use a picture of his pet ferret in a snappy little beret as an image map.

We all know graphics slow a site down, so is it possible to keep visitors from mousing away without publishing a text-only site?

Sure. It’s simply a matter of balancing aesthetic appeal and load time. I’d like to discuss a couple of ways to do just that. Before we get started, though, do me a favor and take a trip to Web Site Garage and get a free Tune Up on a page you’d like to speed up. Be sure and write down the load times for your page under the various modem speeds because you’ll use these later as a benchmark to gauge the effectiveness of your changes. Oh, and don’t forget to make a backup copy of your page (and images) "as is", in case you aren’t happy with the changes and want to restore it to its original condition. Once you’ve done those things, we’re ready to tackle two methods to trim load times: reduce the number of images on your page(s) and reduce the size of the remaining images.

Reduce the Number of Images on Your Page(s)

Take a cold, objective look at your site. Try to view it through a visitor’s eyes. Which graphics are necessary and which are superfluous? Can you manipulate the text with HTML (bold, italic, font face) as opposed to using a text graphic? Can a clickable image be replaced with a text link?

Cutting expendable graphics can greatly speed page load time. Assess each graphic one-by-one to determine if it should stay or go; keep only those that are essential.

Use Flash animation wisely. No doubt about it, Flash movies are extremely cool – when done well. "Because it looks cool", however, isn’t a reason to add something to your site. I can think of few things more annoying than a Flash intro with no purpose. You’ve seen this, haven’t you? You hit a site’s home page and you’re faced with an inane text message like, "Welcome to my Site!", which you’re expected to watch as it dances, twists, morphs, and otherwise makes a horse’s you-know-what out of itself. A well-done intro has a distinct message/purpose, it looks outstanding, and the visitor is given the option to skip it altogether – that’s important.

Reduce the Size of the Remaining Images


Smaller images load faster. After you’ve pared down your images to the essentials, it’s time to reduce the size (byte-wise) of what remains. Y

ou can do this in two ways:
1. Reduce image dimensions (Width x Height in pixels).
2. "Optimize" the image.

Reducing the dimensions of an image isn’t always a viable option. The layout of your page may depend on a particular image being a specific size (the way the page appears, though, is of course relative to screen resolution). If you can safely shrink your image dimensions, do so, and then optimize. If you cannot change the dimensions of the images, optimize only.

"Optimizing" an image means reducing the file size of the image. This is accomplished primarily by removing extraneous colors from the image. For example, a GIF saved at 256 colors can usually be reduced to 128, 64, or 32 colors – sometimes even less – without compromising image quality. This can *drastically* reduce the file size of an image which, in turn, (often) shaves seconds off load time.

NetMechanic , MediaBuilder, and Spinwave all offer free image optimization. Once you’ve pruned the extra images and optimized the "keepers", upload your lighter page and go back to Web Site Garage and run the Tune Up again. Hopefully, you’ve gained a notable improvement in page load time – or at least it’s dropped to a more acceptable number. My front page went from a load time of 22.05 seconds to 14.55 seconds on a 33.6, simply from image optimization. Still a little slow, but hey, a 7.5 second savings isn’t too shabby!

Ensuring your site loads as quickly as possible is part of being a good webmaster/site designer. A quality site from a surfer’s point of view will turn more visitors into customers.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments