« Domain Name Gaming: Tricking Engines and Annoying Searchers | Google Chrome: Shiny and Soon Forgotten »
Optimizing Your Site for Speed and Crawl-ability, Part One: Images
In today’s world of cable, DSL, and T1 lines, it’s easy to forget about your page load times. Many of us don’t even notice page load times unless they become excessive. This is the wrong attitude for a few reasons.
First, about ten percent of Internet users don’t have broadband access. They’ve either chosen not to have it, or it’s not available to them. While the Internet is often about playing to the many rather than the few, 1/10 of the total audience is still significant.
Secondly, time is money. Studies have shown that if you can’t catch your users’ attention in about 8 seconds, they’re gone. The less of that time you spend loading a page, the more time your site will have to impress the viewer.
Thirdly, the practices that cause a page to load slowly are often the same ones that can impede your SEO campaign and present issues to the search engines when they are indexing your site.
Over the next few weeks, we are going to take a look at some of the best practices to consider when designing your site to speed up load times, improve the overall user experience, and make it easier to crawl.
Up first:
Image Optimization
As designers, we like images. They’re eye-catching. They allow us more precise control over how things look, and they can be easier to create than writing the proper code to lay something out. However, they’re also the public enemy number one when it comes to page load times. Following these five simple rules will help you get the most from your images.
1) Don’t use images if you don’t have to
HTML and CSS have come a long way in terms of control and look. Many things that we could only previously accomplish with images can now be done with plain text. Text loads many times faster than images, and it is all crawl-able by search engines. With every image you use, ask yourself “Do I really NEED this image?” and “Can I accomplish the same thing another way?”
You might be surprised how often an alternative is viable, and you’ll reap both SEO benefits and faster load times.
2) Use less images, even if they’re bigger
Did you know that every image you use requires a unique request to your server to load it? The less requests your server has to answer, the faster your page will be.
Look through your pages and find images that are near each other, and combine them into one larger image. Two 10 kilobyte images will load slower than one 20 kilobyte image because the server only has to answer one request in the second case. Also, it can require less code on your page, because you’ll need less table cells and other code, and only one line to include the image.
As with all tools, though, you want to use this cautiously. Once an image reaches a certain size, it will appear slower to your users. There’s no hard and fast rule for what’s “too big” so just use good judgment.
3) Reuse images whenever possible
This one might seem self-evident but it bears repeating: If you have to use an image, reuse it wherever possible.
Once an image is loaded into your browser, it’s stored in your web cache. That means the next time it’ll load faster and won’t have to download. Therefore reusing images allows you to get more mileage out of the images you do have.
4) Don’t use HTML to resize images
When an image is bigger than needed, some sites simply resize it in the HTML code. Never, ever do this. First, the images never look quite right. HTML is a text markup tool, not an image editor. As such, it does a poor job stretching or compressing images. Secondly, it doesn’t matter how small you make an image in HTML, it still has to load the full file.
Always use an image editor to properly resize your images. They’ll look better and load faster.
5) Optimize the type and color palette of the images you do use
When it comes to images, every kilobyte counts. Use an image optimizing tool to strip any unneeded information from it. Dynamic Drive provides this free and remarkably handy tool that allows you to enter the URL of your image, and it will show you how it will look with a different color palette or file type, and allow you to download them there. It’s remarkably easy, and you’ll be surprised how much bandwidth you’re wasting.
When you’re redesigning your site, keep these tips in mind. Your users will appreciate it. By using a little more of your time, you’ll be saving a lot of theirs.
Visit our search engine marketing forum.
Want to know more about online videos?
Stop by our Internet video marketing forum.
Comments
2 Comments so far2 Responses to “Optimizing Your Site for Speed and Crawl-ability, Part One: Images”
Great points in here Tom. Some of these are tactics that I’ve seen even experienced designers fail to use. Its amazing how much a few simple tweaks can make such a difference.
Tom, this insider knowledge is really practical. I imagine it will benefit a lot of SEO readers who are less tech-savvy. I appreciate the easy, clear 5-step reference.