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="" />

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.

Prerender Documentation

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 detect prerendering via the Page Visibility api and/or test individual pages.

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:
  • Prerender Detection via Chrome Task Manager


Also read...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>