Written by Adrian Holovaty on May 28, 2013

I recently began using a newish HTML5 feature called prerendering in the Soundslice registration process, and I'm very happy with how it's been working.

Prerendering is a way for you (as a web developer) to tell a web page to load (and render!) a second page in the background -- where the second page is one that's highly likely to be visited next.

Here's how it works. Say you have Page A and Page B, where the user always visits them in that order. You can put a bit of code in Page A's markup that says "prerender Page B right now." Thus, when the user visits Page A, her browser will download and render Page B in the background, such that when she clicks through to Page B, it's displayed nearly instantly, because all of the loading and rendering work has already been done. It's so fast it seems magical -- it must be experienced to be believed.

Prerendering is easy to do: just put a line of markup in Page A's <head> , like so:

<link rel="prerender" href="/path/to/page-b/">

Note this apparently only works in Google Chrome at the moment, so the benefit is limited to that browser until other browsers implement it. But it's such an easy change that it's hard to justify not taking the few minutes to do it.

A multi-page form, as in a registration process, is a great use-case for prerendering. When you sign up for a Soundslice account, for example, first you get a form where you specify your username and password. Then, when you submit that, you get a form where you optionally upload an avatar and enter a profile. Then, when you submit that, you get the welcome/tutorial page. This is a very linear thing, where there's a very high probability that a user is visiting those pages directly in succession.

(Comparing the benefits of a single-page mega form vs. multi-page smaller forms is a separate discussion. Let's assume you have at least two pages in your site's registration process.)

In a multi-page registration process like this, prerendering works great -- as long as the pages don't depend on another. If the submitted data in Page A influences the markup of Page B, don't use prerendering between those two pages. (For example, this might be the case if the form on Page A includes a "username" field, and you then display "Welcome, [username]" on Page B.) On Soundslice registration pages, I'm in the clear because the pages don't depend on another.

Finally, there is a small downside to prerendering -- you're making your users load and render that next page whether they end up visiting the page or not. But in a tightly controlled multi-page experience like a registration process, you can be confident that most users will visit that next page. So if your pages don't depend on each other and there's a high probability they'll be visited in succession, I highly recommend this technique.

More info on prerendering: Google whitepaper, Ilya Grigorik article, Chris Ruppel article.