v144 · performance · demo
Timing Dashboard
The performance payoff of prerendering, measured live. This page embeds a <script type="speculationrules"> block and records real navigation timing for TTFB, LCP, and total load time — with and without prerender active. The gap between the two bars is your prerender dividend.
The
until action for prerender is behind a flag in Chrome 144. Enable chrome://flags/#enable-experimental-web-platform-features. Prerender itself (without until) ships fully in Chrome 109+. This demo uses standard prerender + prerenderingchange / document.prerendering APIs.
Speculation Rules API: checking…
Prerender state: checking…
speculation rules injected into page
browser warming target URL
prerender ready (activate on navigate)
without prerender
with prerender
TTFB
LCP
load time
| metric | without prerender | with prerender | saving |
|---|---|---|---|
| TTFB | — | — | — |
| LCP | — | — | — |
| Load time | — | — | — |
the API
<!-- Embed speculation rules to prerender a page immediately -->
<script type="speculationrules">
{
"prerender": [{
"urls": ["/checkout/confirm"],
"eagerness": "immediate"
}]
}
</script>
// Check if the current page is being prerendered
if (document.prerendering) {
document.addEventListener('prerenderingchange', () => {
// Page has been activated — record timing
const nav = performance.getEntriesByType('navigation')[0];
console.log('TTFB after activation:', nav.responseStart);
});
}
// Read navigation timing to measure the prerender dividend
const nav = performance.getEntriesByType('navigation')[0];
const ttfb = nav.responseStart;
const loadTime = nav.loadEventEnd - nav.startTime;
// activationStart is set on prerendered pages; compare to 0 for normal pages
const activationStart = nav.activationStart ?? 0;