<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang Howto #10: Load time of a page prerendered by Google Chrome</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
<link rel="prerender" href="howto-10-page%232.html">
</head>
<body>
<span style="float:right;"><a href="../">all docs</a> | <a href="index.html">index</a></span>
<h1>boomerang howto #10:<br>load time of a page prerendered by Google Chrome</h1>
<p>
This use case is based on Google Chrome's <a href="http://code.google.com/chrome/whitepapers/prerender.html">prerender</a>
capabilities introduced with Chrome 13. The code to include on a page is the same regardless
of whether you use prerender or not, so this howto will not cover that. However, to enable
prerendering of a particular page, you include that page's URL as a link element in the current
document. For example, we include this code in the HEAD of the current page:
</p>
<pre>
<link rel="prerender" href="howto-10-page%232.html">
</pre>
<p>
This tells Chrome to prefetch <code>howto-10-page#2.html</code> and all its assets, and to
start rendering it in the background, invisible to the user. When the user eventually clicks
on a link to that document, it should show up immediately.
</p>
<p>
As performance concious engineers, however, we'd like to know how long it all took. In
particular, the numbers we care about are:
</p>
<ol>
<li>Time from click to display</li>
<li>Time from fetchStart/navigationStart to prerender finish</li>
<li>Time from fetchStart/navigationStart to display</li>
<li>Time from prerender finish to display</li>
</ol>
<p>
Let's hope you've spent enough time reading this page to allow page#2's rendering to complete.
</p>
<p>
Go to <a href="howto-10-page%232.html">Page #2</a> now to see the results of the page load test.
</p>
<p class="perma-link">
The latest code and docs is available on <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a>
</p>
<p id="results">
</p>
<script src="../../boomerang.js" type="text/javascript"></script>
<script src="howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
BW: {
enabled: false
},
RT: {
cookie: 'HOWTO-RT'
}
});
</script>
</body>
</html>
<!--
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Copyrights licensed under the BSD License. See the accompanying LICENSE.txt file for terms.
-->