Optimize your pages – Part 1

At the Web 2.0 Summit in November 2006, Marissa Mayer of Google gave a talk on an internal study which indicated that a half-second delay in terms of page loading can cause up to a 20% drop in site traffic (a more in-depth description of her presentation can be found here for those interested). Since then, there’s been a swarm of development over tools related to trimming down websites, and subsequently decreasing load times, all without taking away from the desired user experience.

The most typical causes of higher load times are large, uncompressed images. The great thing about this is that it’s very simple to fix without detracting from the overall appearance of your site, provided you follow a few simple rules.
The first one will often throw those new to building websites for a loop – don’t resize your images in HTML and CSS. It’s a common misconception that this doesn’t harm anything; after all, you resize pictures outside your browser, why shouldn’t it work inside the browser?

The difference here is that the browser has to do extra work to resize your images. It’s not a pure image manipulation program that can devote most of it’s resources to image processing. When your browser has to resize an image, it temporarily stops loading the page to handle that operation. Now, imagine you’ve got more than 10 images on a page – doesn’t seem so hot, now, does it?

So, since you shouldn’t resize in HTML and CSS, your next best bet is to do the work yourself. One of the most common tools for this kind of operation is Adobe Photoshop, however it’s priced in the range of $500+. There are a few reasonable alternatives, though – Gimp (Multi-Platform, free), Paint.NET (Windows, free), or Acorn (Mac, free) are all capable of resizing images without distorting them, ensuring the best possible quality.

Once you’ve resized an image, it’s important to save it in a web-friendly format (PNG is highly recommended), and to make sure it has a decent compression level on it. The editors above will let you muck around with the various compression levels so you can judge for yourself what level of compression you’re fine with. If you want to see the benefit, compare your optimized image file size to the unoptimized image file size – in some cases, the difference can be as much as 5kb.

That doesn’t seem like a lot by itself, but for a page where you have 5 images displayed that aren’t already optimized, the optimized versions can yield savings of up to 20kb, which results in faster load times all around. In the recent redesign of Webs.com, we managed to cut page size down by about 100kb using the above techniques, and this instantly led to faster load times around the site.

By taking these steps when building your site, you’re working towards ensuring that any user who visits your site will end up coming back. Always look for ways to optimize your load times!

Leave a Comment


Layout Style

Header Style

Accent Color