Google's Clever Way of Optimizing SERP Load-Time w/ Single Image

November 20, 2008 5:45pm
Categories: Google

I was impressed when I saw Google's technique for optimizing the load times of their SERPS (Search Engine Results Pages) - They use a single image to replace multiple image graphics.

The average Google SERP contains a variety of graphics, such as the Google logo, the "o" that's used for the 2 thru 10 at the bottom of the page for subsequent pages, the Google Checkout logo for companies advertising that use Google's Checkout service, etc.

Now, normally these would be separate images, but Google has replaced all of them with one single image that contains all of them together in different pages of the image, and then they use CSS to align the background accordingly so that it only shows the right part.

This is genius. It means that only a single HTTP request has to be made to load all of these images, so it saves quite a lot of time downloading. I'm not sure if it's a new thing - but it is to me!

Here's the image/graphic they're using:

Google's Optimized Image
URL: http://www.google.com/images/nav_logo3.png

Trove through the CSS code for a SERP, and you'll see how they're using CSS to do the repositioning. Awesome!

Meistro says: (November 23, 2008 4:23pm)

This is very clever! There's also a nav 2 and 4:

http://www.google.com/images/nav_logo2.png

http://www.google.com/images/nav_logo4.png

Desired Username:
Email: * Never displayed or shared!
Confirm Email:
Password:
Confirm Password:
Note: Comments by new registrants are reviewed prior to being displayed. After a few good comments, your comments will go through immediately.