If a decent fraction of your customers or visitors are using Google Chrome, the latest version (13) has a pretty slick new feature you can take advantage of called prerendering.
What is prerendering?
Prerendering is a more robust form of prefetching (which you can use in Firefox currently). With prefetching, you can instruct the browser to fetch the top-level resource (usually an HTML page) and load it up in the background. The problem with this is that the HTML pages aren't what slow you down: CSS, JS, and especially images are. Prerendering actually renders the entire page in the background, rather than just grabbing the markup, so prerendered pages will load instantly rather than waiting on secondary resources.
How to use prerendering:
Getting going with prerendering is actually incredibly easy, you just have to understand the constraints and when to use it. In order to have Chrome prerender a page, embed the following link somewhere on the page:
There are a few things to note about prerendering:
- Chrome will only prerender one page per instance - not per tab. That means not only can you only have one page prerendered, and you may not get even that if another tab is using it.
- Prerendering occurs after the initial page has finished loading (so blocking scripts may prevent it from happening)
- If the user doesn't click the link in 30 seconds, Chrome dumps the prerendered page. This one is kind of a bummer, as pages that require some decent comprehension or reading won't benefit. The documentation suggests this may change in the future.
We've already deployed an update for Notable that includes prerendering on the marketing site — if you go from the homepage through the tour (which based on our analytics we determined to be the most likely path) you should see some significant speed improvements in Chrome 13.
Get to it!
If you want to learn more about this feature, check out the very helpful Google White Paper on prerendering — is has a more complete list of the constraints as well as more thorough explanations of what the browser does for certain edge cases. There's definitely a lot of potential here, and we'll be investigating how we can take advantage of it in our apps and other properties.
