Prerender
Who wants instant page loads?
BADCamp 2013 Mobile Summit
Chris Ruppel
frontend dev @ Four Kitchens
(we're hiring!)
I contribute to open source stuff:
The Network
Our Best friend (and worst enemy)
Latency
No matter what we do, the
speed of light always defeats us.
One solution is to intelligently guess
what the user will do next.
Prefetching
Already codified into HTML5,
there is such a thing as prefetching.
<!-- DNS prefetch, establish a TCP connection -->
<link rel="dns-prefetch" href="//example.com">
<!-- Regular prefetch of an image -->
<link rel="prefetch" href="//example.com/path/to/img.jpg">
Prerender
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="http://example.com/path">(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
Pressflow.org has FAQs prerendering
Google Instant uses prerender on the first result in many cases.
Further reading
Questions?
Contact me:
chris ❀ fourkitchens.com