Prerendering in Chrome
Tuesday, June 14, 2011
Google.com's new Instant Pages feature, announced earlier today, makes some sites appear to load almost instantly when you click on them from the search results page. The feature is enabled by prerendering, a technology that we built into the upcoming version of Chrome, currently in the Dev channel. You can see Instant Pages in action in this video:
What is prerendering? Sometimes a site may be able to predict with reasonable accuracy which link the user is most likely to click on next--for example, the 'next page' link in a multi-page news article. In those cases, it would be faster and better for the user if the browser could get a head start loading the next page so that when the user clicks the page is already well on its way to being loaded. That's the fundamental idea behind prerendering. The browser fetches all of the sub-resources and does all of the work necessary to display the page. In many cases, the site simply seems to load instantly when the user clicks.
Although Google.com is the most high profile site to use prerendering, it's a technology that is available to any site. Triggering prerendering well, however, is challenging to do correctly and will only be useful to a handful of sites that have a high degree of certainty of where their users will click next. Triggering prerendering for the wrong site could lead to the link the user did click on loading more slowly.
The vast majority of sites will automatically work correctly when a third party like Google.com asks Chrome to prerender them. If you're interested in testing how your page behaves when being prerendered you can use this sample page. If you want your page to behave differently, you can use Chrome's new experimental page visibility API to detect prerendering.
The page visibility API - which is in the early stages of standardization in the webperf working group - can help developers understand the visibility status of their page: whether it's in a foreground tab, a background tab, or being prerendered. This is still an experimental implementation and it may change or even be removed in the future, which is why for the time being we've prefixed the property names with "webkit.” Although the page visibility API is useful for detecting prerendering, it also has many other applications--for example, allowing a site to pause expensive physics calculations when the page isn't visible.
To learn more about the page visibility API and prerendering, check out the Using the Page Visibility API and Web Developers' Guide to Prerendering in Chrome articles.
What is prerendering? Sometimes a site may be able to predict with reasonable accuracy which link the user is most likely to click on next--for example, the 'next page' link in a multi-page news article. In those cases, it would be faster and better for the user if the browser could get a head start loading the next page so that when the user clicks the page is already well on its way to being loaded. That's the fundamental idea behind prerendering. The browser fetches all of the sub-resources and does all of the work necessary to display the page. In many cases, the site simply seems to load instantly when the user clicks.
Although Google.com is the most high profile site to use prerendering, it's a technology that is available to any site. Triggering prerendering well, however, is challenging to do correctly and will only be useful to a handful of sites that have a high degree of certainty of where their users will click next. Triggering prerendering for the wrong site could lead to the link the user did click on loading more slowly.
The vast majority of sites will automatically work correctly when a third party like Google.com asks Chrome to prerender them. If you're interested in testing how your page behaves when being prerendered you can use this sample page. If you want your page to behave differently, you can use Chrome's new experimental page visibility API to detect prerendering.
The page visibility API - which is in the early stages of standardization in the webperf working group - can help developers understand the visibility status of their page: whether it's in a foreground tab, a background tab, or being prerendered. This is still an experimental implementation and it may change or even be removed in the future, which is why for the time being we've prefixed the property names with "webkit.” Although the page visibility API is useful for detecting prerendering, it also has many other applications--for example, allowing a site to pause expensive physics calculations when the page isn't visible.
To learn more about the page visibility API and prerendering, check out the Using the Page Visibility API and Web Developers' Guide to Prerendering in Chrome articles.
