How To Speed Up A Slow Website

Remember the last time you called your cable company or internet service provider?

Chances are you waited on hold listening to elevator music with a repeating loop — “Due to unusually high call volume, we are experiencing longer than normal wait times.“

Ugh. How annoying!!!

But that’s also how people feel what they visit a slow website.

If a web page loads in 3 seconds or less, that’s acceptable. If it takes 5-10 seconds, that’s not acceptable and your visitors are going to bail.

And you’re going to lose potential clients.

Today your visitors expect your site to be fast.

The # 1 Cause Of Slow Websites

There are numerous reasons for a slow-loading web page which include poor web hosting, bloated code, bad design or excessive on-page advertising.

But the most common thing slowing down websites are non-optimized images.

Non-optimized images can easily double or triple page load time.

Here’s how to optimize your website images to dramatically speed up your site …

Digital Images Are Massive

Today’s digital cameras, as well as smartphone cameras, are amazingly powerful. However, those beautiful, high-resolution images result in very large file sizes.

For print media or high-def video production, you’ll need all the data packed in those images.

But for your website, high-resolution straight from your camera are overkill.

To give you a point of reference on image sizes …

• Hi-res images from today’s cameras often have dimensions of 2000-4000 pixels (or more!).
• Image file sizes from today’s cameras are often between 2-10 MEGAbytes each.
• The width of a standard web page is often 960 to 1280 pixels.
• The region on a web page where you read the text (aka “body copy”) is typically between 600-800 pixels wide.
• If you want a webpage to load quickly, the file size of a website image should be less than 500 kilobytes (0.5 megabytes) — preferably less than 250 kilobytes.

When you use a gargantuan image in a region on your website measuring 640 x 360 pixels, for example, your visitor’s web browser has to download that huge image file then down-sample it to get it to fit — and this takes time, even with a fast Internet connection.

The end result is a slow loading webpage. If you have multiple images on a page or in an image gallery that just compounds the problem even further.

Reducing Files Sizes Without Sacrificing Image Quality

If you want a fast-loading webpage, you simply can’t be using monster image files.

So before you upload any images to your website, you need to pre-process those images on your local computer to reduce the file size and lessen the load on your visitor’s web browser. Pre-processing gives you clean, streamlined images for your website that load quickly but still look really good.

Here’s how you do it.

It’s A Simple 3-Step Process

Crop. Resize. Compress.

I’ll use an actual image so you can see how this works. Our sample image is called “Miami cabana”. The original image size is 1698 x 1131 pixels, 2.18 MB. You can see the actual image here. Really nice image, but it’s WAY too big to use on a standard website.

Step #1: Crop. Begin by trimming and cutting out the non-essential parts of your original image. Not only does this reduce the image dimensions, but it can actually enhance your image by only displaying what matters most.

There are times where no cropping is necessary. This “Miami cabana” is a good example. However, as a matter of practice, I do crop the majority of my website images to a standard aspect ratio like 16:9 or 4:3 because it’s what people are used to.

Step # 2: Resize. This is where you can get a major reduction in file size.

You’ll recall that the original image was 1698 x 1131 pixels, 2.18 MB. But watch what happens when we reduce it to a size that would fit on a standard website:

• Resizing the image down to 800 x 533 pixels results in an image size of 276 kB — an 87% reduction from the original. Here’s that image:
  
• Resizing the image down to 600 x 400 pixels results in an image size of 164kB — a 92% reduction from the original. Here’s that image:
  

It still looks pretty good.

Step #3: Compress. Most of the time I stop after step # 2 because the image size has been sufficiently reduced. However, if you want to take it one step further you can compress the image and reduce the file size even further with minimal (if any) reduction in image quality.

There are many pieces of software as well as online resources that do image compression. One that works really well (and doesn’t have a bunch of annoying ads) is tinypng.com. Even though the name implies it only works for .png files, it also works for .jpg files, too.

Here what compression can do:

• Compressing the original “Miami cabana” (with no cropping or resizing) reduces the image file size from 2.18MB down to 54kb —and 97.5% reduction. You can view that compressed image here.
• Compressing our 800 x 533 pixel image from step # 2 above reduces the file size from 276kB to 80.6kB — a 96% decrease from the original. You can view that image here.
• Compressing our 600 x 400 pixel image from step # 2 above reduces the file size from 164kB to 43.7kB — a 98% decrease from the original. You can view that image here:
  

Can you tell any difference from the image displayed in step # 2 above?

Here Are The Tools You’ll Need

Perhaps the best news about image pre-processing is you don’t need to learn any complicated or expensive software.

For Windows users, all you need is Microsoft Paint (it comes free with Windows) for cropping and resizing.

For Mac users, you can use your Mac’s free Preview app. Here’s an excellent tutorial.

No need to use complicated or expensive software like Adobe Photoshop for simple cropping and resizing, unless of course you’re already familiar with it because you use it all the time. Me personally, I use Paint Shop Pro from Corel. I’ve been using it since 1999 and I find it much more user-friendly than Photoshop.

You can also use free (or very inexpensive) image editors like Gimp, PicMonkey or Pixlr. But the free apps mentioned above will work just fine.

A Few Image Pre-Processing Tips

The most important thing is to be organized and have a process. Once you have your little system worked out, image pre-processing goes very quickly.

• Create a simple folder system. Make sure to keep your master image files intact and unaffected. After you’re done editing your image use the “save as” option to save the edited version in a separate folder labeled “Edited for web” or something similar.
• Use a standard naming convention. Your image library will grow rapidly, especially if you’re creating one or more versions of each image. So you’ll want to develop a simple, descriptive naming convention so you can immediately know what the image is without having to open the image file and view it. In our example above, the master images was labeled “miami_cabana_orig.jpg”. The 800 x 533 version was labeled “miami_cabana_800.jpg”. The resized and compressed image was labeled “miami_cabana_800_compress.jpg”.
• Standardize your image sizes. When possible, try and be consistent with your image sizes. This will create symmetry, uniformity and improve the overall aesthetics of your website.
• Save your images as .jpg or .png. These are the 2 most common file formats for images. If your image has a transparent background, you’ll need to use the .png format. The .png might have a tiny bit more image clarity than a .jpg, but most people (myself included) can’t see a difference. All things being equal, a .jpg will usually be a smaller file size than a .png. I actually use both formats, but I tend to use the .png format more.

That’s all there is to it.

Take the time to pre-process your images. It doesn’t take much time or effort, your pages will load faster and fewer website visitors (which might include your next client!) will abandon your site because it’s as slow as molasses in January.