advertise
« Facebook's New Real-time Messaging System: HBase to Store 135+ Billion Messages a Month | Main | Strategy: Biggest Performance Impact is to Reduce the Number of HTTP Requests »
Monday
Nov152010

How Google's Instant Previews Reduces HTTP Requests

In a strange case of synchronicity, Google just published Instant Previews: Under the hood, a very well written blog post by Matías Pelenur of the Instant Previews team, giving some fascinating inside details on how Google implemented Instant Previews. It's syncronicty because I had just posted Strategy: Biggest Performance Impact Is To Reduce The Number Of HTTP Requests and one of the major ideas behind the design Instant Previews is to reduce the number of HTTP requests through a few well chosen tricks. Cosmic!

Some of what Google does to reduce HTTP requests:

  • Data URIs, which are are base64 encodings of image data, are used instead of static images that are served from the server. This means the whole preview can be pieced together from image slices in one request as both the data and the image are returned in the same request. Google found that even though base64 encoding adds about 33% to the size of the image, tests showed that gzip-compressed data URIs are comparable in size to the original JPEGs.
  • Using JSONP and data URIs reduces the number of requests made, but they are also cacheable by the browser, which should make page refreshes instantaneous. Obviously caching also reduces the number of HTTP requests.

Reader Comments (3)

flickr photo unavailable fyi.

November 15, 2010 | Unregistered Commenterahmet alp balkan

Thanks ahmet. It was a casualty of flickr wars.

November 15, 2010 | Registered CommenterTodd Hoff

please change 'synchronity" to "sychronicity"

November 17, 2010 | Unregistered Commenterbob

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>