Instant Previews: Under the hood

Instant Previews, a feature introduced by Google Search, allows users to view a preview of search result pages with the relevant content highlighted by clicking on a magnifying glass icon. The implementation of this feature required significant client-side JavaScript work to ensure it did not slow down the page. Google utilized the Closure Compiler to minimize and optimize JavaScript, deferred script execution, and aggressively cached scripts on the client side. Instant Previews employed JSONP for fetching data, which circumvents same-origin restrictions and allows for aggressive caching by browsers, unlike XmlHttpRequest (XHR). Previews are delivered as data URIs, which are base64-encoded images that can be displayed without additional server requests, with the JSONP response containing both the image data and relevant content. Despite data URIs increasing image size by about 33% due to base64 encoding, gzip-compressed data URIs were found to be comparable in size to original JPEGs. The approach reduces the number of requests and leverages browser caching, ensuring users receive previews quickly, even when reloading or repeating searches.