Last Updated: February 25, 2016
·
3.052K
· eallam

Speed up your site with Chrome Prerender

Ever notice how fast Chrome is at rendering the top result of a Google search or omnibox suggestion? That's because Chrome will automatically prerender the page it thinks your about to visit. Prerendering is really cool: Chrome actually renders the page in a hidden tab, and then when you click on the link it just makes that hidden tab visible. Google made a video to show the difference prerendering can make here.

We can also take advantage of this feature with our own sites pretty easily using the link tag. For example, on codeschool.com, we tell Chrome to prerender the http://www.codeschool.com/enroll page by putting a link tag in the header, like this:

<link href='http://codeschool.dev/enroll' rel='prerender'>

If you want to see it in action, head over to codeschool.com and then open up chrome://net-internals/#prerender in another tab and you should see something like this:

prerender

Now if you click on the Enroll link in the top-right corner, the next page should load almost instantly.

There are a couple limitations, like only being able to prerender one page at a time, but this is a pretty good win without much work on our part. Read more about it here