[Tech] Insight into Google Instant Previews

Google has launched Instant Previews few days ago – a feature which adds screenshot preview of the page along with the search results. The feature does not seem to add much of value addition to search results (as they claim). Nevertheless, the implementation of the feature is rich enough to add huge value for a web developer. Google has employed some neat techniques to ensure that the performance of the search remains the same with this new feature. If you are a web developer or a person interested in learning cool things, you can continue reading rest of the post. And, if you are frustrated with the previews, you can use this script to turn off the feature.

Techniques involved in Google Instant Previews

JavaScript Compilation. Like any other Google products, Google search also uses a lot of JavaScript. JavaScript is minified and crunched using Google’s Closure Compiler. The JavaScript on the results page is loaded lazily so that it does not interfere with the page load. Also, JavaScript is cached very aggressively on the client-side.

On-demand JSONP.  The result previews are loaded only on-demand whenever the user activates it. The browser needs to make asynchronous call to Google servers to get the previews and render it on the screen. Modern browsers have a restriction on the number of concurrent requests the page can send to any host. To overcome this, Google uses a separate domain for hosting the result previews. (Ex: client1.google.com, client2.google.com). Data can be loaded in different ways using JavaScript:

• Simple AJAX call (XmlHttpRequest – XHR) to the server. XHR gives you good control and error handling becomes easy with it. However, XHR does not allow cross-domain access. Only same-origin requests are permitted (Modern browsers have started to support cross-domain access using cross-origin resource sharing). In the case of Instant Previews, the previews need to be fetched from a different sub-domain “client1.google.com”.
• JSONP. JSONP is another technique where in the requested script returns the desired data as a JSON object wrapped in a JavaScript callback function. Error handling with JSONP is a bit harder to do than XHR but it is not subject to same-origin restrictions. Read this Wiki article to know about the implementation details of JSONP. Google uses this technique to get the result previews. Things to consider while using JSONP:
  1. If you are adding the script tag directly to the page, some of the browsers may show the page loading icon. To avoid that, wrap the DOM call to insert the script in window.setTimeout() – This will be executed in a separate context.
  2. After your requests come back and the processing is done, set the source of the script tag to null and remove the tag. This will prevent the browser from slowing down because of too many script tags. 

Data URIs. The previews shown are not just plain images streamed from the Google server. The data received from the JSONP calls is actually the image data being sent as set of data URIs. (I have used the same technique in VComment – Visual Comment Engine). Data URIs are base64 encodings of image data, that modern browsers can use to display images, instead of loading them from a server as usual. If you have noticed the previews closely, a bounding box will be added to the preview. The usage of data URIs over static images has made this highlighting easier. Data URIs are gzip-compressed to make them comparable in size to the original JPEGs. Data URIs are also aggressively cached on the client-side. 

More information about these techniques can be found here.

Note: This post was originally written in the last week of November 2010. Just realized that it was sitting on my drafts itself.  Well, better late than never. 

-- Varun