Prerendering in Chrome for Instant Pages and Continued User Experience
Instant Pages is a new feature by Google which enables prerendering, where the browser grabs and caches most (if not all) likely documents required where the user goes next.
In Chrome 13+, Prerendering allows author’s to dictate which assets/resources are most likely to be necessary for the continued ux.
Prerendering is actually an extension of Firefox’s prefetching; Prerendering fetches all of the necessary resources of the next document.
Note: unlike Firefox, Chrome does not support
meta-http and http header triggering methods.
As noted, Firefox supports prefetching
via link element which instructs user agents to begin fetching the top-level resource at the url. There are comments about prefetching‘s weaknesses, but I’m going to chalk that up to the cadre of markup illiterate developers and their awesome enterprise code. When used properly, prefetching can lead to a continued ux too.
How to Trigger Prerendering
Trigger prerendering is apparently not so easy to do; it’s only useful to a site with a high degree of certainty of where their users will click next. Trigger prerendering incorrectly can cause the user’s selection load times to actually increase.
Authors can trigger prerendering by simply dropping an
link rel="prerender" element into the markup and Chrome follows it, like so:
<link rel="prerender" href="http://example.org/index.html" />
Detecting When Your Site is Being Prerendered
even if you do not proactively trigger prerendering yourself, it is still possible that another site will instruct Chrome to prerender your site.
I’m kind of speechless at that statement. How is that possible? Since it is, I’m going to assume “sites” that practice the black arts will be able to sabatoge your determined prerendering strategy by “telling Chrome” to prerender the wrong documents. That is completely speculative and with no proof, however, the documentation’s explanation is so vague, it leaves me to wonder.
Authors can also use Chrome’s Task Manager to detect prerendering:
- From Task Manager, load the desired test page
- Look for Prerender in the Task Manager, which looks like so: