An important thing to consider when building and maintaining your web site is how much data you’re sending to your viewers when they load a page. Sure, things aren’t as bad as they used to be back in the days when everyone had dial-up, but bloated web sites still cause grimaces. Those extra seconds your web site takes to load mean user frustration, and slow page loads can even hurt you when the search engines come around.

This article will give you some good, basic rules-of-thumb to get your site loading quickly and keep both your customers and the search engines happy.

Web-size Your Images

Images are a major factor in page load speed. Luckily there are a few ways you can speed up loading those pesky images.

Often, the photos and images you want to include on your pages will be bigger than is optimal for web viewing. Say you’re taking photos with a digital camera, for example. The more megapixels your camera has, the bigger those images are. That’s great for making sharp prints, but when you try to put a photo that’s bigger than your screen on a web site, there’s going to be trouble.

If you’re using HTML to build your website, a common work-around is to simply use the width and height attributes to make your image smaller, like this:

<img src="reallybigimage.jpg" width="100" height="100" />

You can also run into this problem with web page editing software, like Adobe Dreamweaver, by inserting the large image and then scaling it down.

But wait! The problem with this is that even when it’s only 100 pixels by 100 pixels, as in our example above, the web browser still has to load that HUGE image every time it displays the page.

It’s important to resize your images and save new versions that are suitable for viewing on a web page. There are a huge number of free programs that can do this, including ones that come pre-installed on your computer: Preview on the Mac, or Windows Live Photo Gallery on PC.

Figure out how big those images need to be, and scale them right down. Then, you can also save a larger version, maybe 800 pixels wide or whatever you like, and link to that image from the smaller one. Users that really want to see a larger version of that image can click on it to load the larger version, and those who don’t want to zoom in don’t have as much data to download.

Using Adobe Contribute to Resize Images

When using Adobe Contribute, it’s very easy to resize your images on the page you’re working on. Simply select the image you want to resize, and type in some smaller values in the Image Editing Toolbar. This will resize your image and save a copy that uploads when you publish the page. The original source image stays intact on your hard drive.

Note: If you use the “Image Properties” dialog box to resize your image, it doesn’t actually resize but simply loads the larger image like I mention above. Stick to the Image Editing Toolbar!

Compress Your Images

Image compression is another technique you can use to lighten your load when it comes to showing images on your site.

When you’re saving the images above, you’ll probably see some options related to “image quality”. Try playing around with this setting, as each image is different. Too much, and the images look blurry and gross. Too little, and your images are far “heavier” than they need to be. With some experimentation, you can find the sweet spot for compressing each image.

The Fancy Stuff

Things like embedded Flash and QuickTime movies can really bog down computers trying to load your pages. Avoid them when you can. When you can’t, try putting them on a separate page, so users who want to load that content and don’t mind waiting a minute or two for it to download can click a link.

An exception to this is YouTube videos. In addition to being generally well compressed, by default YouTube videos don’t load until you press the “play” button, so you can get away with putting them on any page you wish. Again though, make sure they aren’t set to autoplay! Not only does that slow down your page, but it’s also kind of annoying.

Split Up Your Content Into Multiple Pages

If you have a ton of content on some of your pages, it may be wise to break it up into smaller pages and link between the two. Your content will be clearer and more focused, which is great for users and the search engines love it too.

However, it is important not to abuse this. We’ve all been to those news blogs where they split each post up into 4 pages. Frustrating right? If you have a huge amount of content on your pages and you’re seeing long load times and lots of scrolling, you would be wise to break up your content. Otherwise, leave well enough alone. You still want people to be able to get the information they’re looking for as easily as possible. Don’t put any extra clicks between them and the content unless you have to.

A Faster Web Awaits.

Though it might take a little more work to make sure your pages are loading as fast as possible, it’s really not that hard. Put in the effort; your users and the search engines will be much happier. Make sure your site doesn’t just look snappy, but IS snappy.

Has this post inspired you to slim down your web site? Do you have other techniques that could help other readers cut down on loading times? Let us know what you’re thinking in the comments!