BADCamp 2013 Mobile Summit
frontend dev @ Four Kitchens
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="//example.com"> <!-- Regular prefetch of an image --> <link rel="prefetch" href="//example.com/path/to/img.jpg">
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!
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">
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.
Steve Souders has a prebrowsing test suite.
You can add your results to Browserscope.
Google Instant uses prerender on the first result in many cases.
chris ❀ fourkitchens.com