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.