Prerender in Chrome for instant page loads

In January Ilya Grigorik published a mind-blowing article containing a preview chapter from his book High-Performance Browser Networking. The article, entitled “High Performance Networking in Google Chrome,” details all of the enhancements Google engineers have baked into Chromium to make it feel so fast. The enhancements apply to any build of Chrome, including mobile versions.

Preemptive Action

Network latency is a reality for any computer connected to the web, so one of the main points is that Chrome tries to intelligently guess what you’ll do next in order to pre-empt your actions. When this predictive behavior is correct, things appear to have happened instantaneously even though they happened at the speed of the network.

Although there are many features discussed, one of the simple enhancements highlighted is Chrome’s ability to prerender pages. The syntax is dead simple, although Ilya notes that Chrome does not guarantee this behavior in all situations. Regardless, this technique is a great way to speed up your main traffic funnels.

The article also stresses that if you misuse these tags, you incur huge performance penalties on users (the exact opposite of what we want!) so they are meant to be used carefully and only after confirming their usefulness by collecting analytics data. Do not just slap these tags onto all of your sites or you will slow them down.

When do I use this?

The short answer is: use it when you have data to confirm that it will be helpful. Check your analytics and look for funnels where a large percentage of traffic goes from one page to another. An easy place to start in Google analytics is Audience » Visitors Flow. That’s where the screenshot below came from.

Unfortunately you can’t use prerender for session-based funnels like shopping carts, where one page depends on information from the previous page. But for sites that feature one prominent CTA, such as a download page, this is a great enhancement.

Google themselves use prerendering for the top search result when you use the Google Instant version of their search engine. When you scan the results then end up clicking the first one, sometimes the page loads surprisingly fast. That’s prerender at work.

An example on Pressflow.org

Pressflow.org is a simple informational site with just a few pages. When this article came out, I looked at our analytics and decided it would be a great site to test this type of performance enhancement.

Looking at the following screenshot, you can see that an overwhelming majority of our traffic hits the homepage, then hits FAQs, then maybe goes elsewhere. Look at the proportion of traffic leading to the 1st Interaction column, where most traffic is clearly proceeding from the homepage to /faq versus the handful of hits leading to other pages:

Since this traffic pattern is a prime candidate for a prerender tag, I added one line of code to the homepage of the site:

<link rel="prerender" href="http://pressflow.org/faq" />

This tag suggests that Chrome should prerender the FAQs page before the user requests it, causing the FAQs to load instantaneously from the user’s perspective. Notice I used the word suggests because in Ilya’s article he makes it clear that the tag’s presence does not guarantee the page will prerender. There are other factors involved.

Assuming a prerender does occur, it still loads the page like any other, requesting uncached files at the speed of the network, assembling the page, executing JavaScript, and so forth. But it happens in the background, so when a user finally clicks FAQs, boom. The page is ready.

Of course, this process only works if you can serve pages pretty quick so it helps that our example site serves anonymous page loads from Varnish instead of Apache/PHP. But all of this added together makes for an instantaneous feel as you browse to FAQs.

More goodies

There are more tags that carry out other tasks such as DNS prefetching, which has been codified into a web standard and implemented in many browsers. The Chrome-specific ones seem valuable enough that it probably won’t be too long until they are also adopted by other browsers. Just remember to test, test, test, and only implement when you have data that says you should.

I encourage you to read the entire preview chapter on Ilya’s website and perhaps even buy his book.

Update 2013-07-18: IE11 will also support prerender and prefetch using the same syntax. Hooray! Read more details on MSDN. Thanks to webperf guru @guypod for the tip.

Update 2013-12-05: IE11 blog contains another update on Page Prediction, their term for prerender.

Update 2015-07-22: This behavior is inching towards standardization. Check out the Working Draft for Preloading which was published yesterday.