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)

Navigation timing for this page load (performance.getEntriesByType('navigation')[0]):

Timing comparison: normal navigation vs prerendered navigation (ms, lower is better)

without prerender
with prerender
TTFB
LCP
load time
metric without prerender with prerender saving
TTFB
LCP
Load time

Click "Use real timing" to read actual PerformanceNavigationTiming, or "Simulate" for a realistic comparison.

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;

see also