Who wants instant page loads?

BADCamp 2013 Mobile Summit

Chris Ruppel

frontend dev @ Four Kitchens

Four Kitchens
(we're hiring!)

I contribute to open source stuff:

The Network

Our Best friend (and worst enemy)


No matter what we do, the
speed of light always defeats us.

One solution is to intelligently guess
what the user will do next.


Already codified into HTML5,
there is such a thing as prefetching.

    <!-- DNS prefetch, establish a TCP connection -->
    <link rel="dns-prefetch" href="//">

    <!-- Regular prefetch of an image -->
    <link rel="prefetch" href="//">

diagram of page load phases


The next level of prefetching.

With prerender, browsers can fetch entire pages ahead of time, including all CSS/JS and executing them.

You end up with a fully-rendered
page before the user even clicks!

Requesting a prerender

Chrome will prerender automatically
according to some strict guidelines.

You can also request prerenders with a very basic tag:

      <link rel="prerender" href="">

(it also works when you insert the tag into the DOM with JS)

JavaScript API

There is a Page Visibility API in JS.

Verify that the user is actually looking at a prerendered page before logging analytics or other critical tasks.

Videos are handled by the browser. Flash will not instantiate until the prerendered page is visible, and HTML5 video will actually stall a prerender.

Test your browser

Go to chrome://net-internals/#prerender

Test prerender on this simple page

Steve Souders has a prebrowsing test suite.
You can add your results to Browserscope.

Examples has FAQs prerendering

Google Instant uses prerender on the first result in many cases.

Further reading


Contact me:

chris ❀