Speculation Rules: Prefetch First, Prerender With Care

• Start with prefetch for a small set of likely same-origin navigations; it costs less than a full prerender.
• Use moderate or conservative eagerness when user intent matters. Immediate rules can waste bandwidth and server work.
• Measure activation and cancellation, then exclude sign-out, cart, admin and other state-changing routes.

A fast next page feels better than a fast loading screen. The Speculation Rules API lets a browser prepare a likely navigation before a click. It can fetch the next document, or load and render the page out of sight.

That power needs a narrow rollout. Guess too widely. The site then spends data, memory and server capacity on pages nobody opens. Run code too early. A hidden prerender may trigger work that should wait for a real view.

Prefetch and prerender are different bets

Prefetch downloads a document. It keeps that file ready for navigation. Prerender goes further: it loads and renders the page in a hidden context. Activation can then feel instant.

Chrome presents prefetch as a useful first step. Prerender can save more visible time. It also uses more memory and CPU. Start with the cheaper bet, measure it, then promote only routes that earn the extra work.

A safe first rule

<script type="speculationrules">
{
  "prefetch": [{
    "where": {
      "and": [
        { "href_matches": "/articles/*" },
        { "not": { "selector_matches": ".no-prefetch" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

This document rule watches links to article pages. On desktop, moderate eagerness can respond to a short hover or pointer action. Chrome has also changed mobile heuristics over time, so treat the live platform guide as the source of truth.

Exclude routes that change state

Never start with a broad rule for every internal link. Exclude sign-out, delete, purchase, cart, account, admin and one-time token URLs. A GET request should be safe. Yet real applications still attach side effects to page loads.

Delay analytics, timers and other activation-only work while document.prerendering is true. Listen for the prerenderingchange event, then start that work after activation. The server can also inspect the Sec-Purpose request header.

Choose eagerness by confidence

Browser support and behavior differ. An unsupported browser ignores the rule, so ordinary navigation remains the fallback. Do not block page links behind a feature check.

Measure the navigation, not just the lab score

Track activation and cancellation. Also track added origin traffic. Compare real navigation time for eligible pages against a holdout group. A faster synthetic page load does not prove the guesses are useful.

Activation changes the signal. Afterward, PerformanceNavigationTiming.activationStart is non-zero for a prerendered page. Chrome DevTools also has a Speculative loads view for rule status and failure reasons.

Keep Core Web Vitals in the review, but do not expect a prerender to fix a slow page. It can move work earlier. It does not remove heavy JavaScript, poor images or layout shifts. Use the image format guide to reduce avoidable media cost, and test state changes with the same care used in the browser-agent safety check.

A rollout in four passes

1. List candidates. Pick one or two common next pages with safe GET behavior.
2. Prefetch on intent. Use moderate or conservative eagerness and record activation.
3. Promote carefully. Prerender only a route with a strong hit rate and no hidden side effects.
4. Set a budget. Watch data, memory, origin requests and error rates after each change.

Chrome places limits on active speculations and may disable them for Save-Data, Energy Saver, memory pressure, background tabs or a disabled preload setting. Your design should remain correct when no speculation runs.

Frequently asked questions

Does the API help a single-page application?

It targets full document navigation, not in-app route changes. It can prepare the application from a previous page, but an SPA needs its own data-prefetch plan inside the app.

Should I prerender cross-origin pages?

Start same-origin. Same-site cross-origin prerendering needs an opt-in response header, and other cross-origin cases have tighter limits. Confirm the current browser rules before expanding scope.

Can I add rules with JavaScript?

Yes. Create a script element with type speculationrules and set its text content. Adding the element through innerHTML does not register it.

What is the first success metric?

Use activation rate beside real navigation time. A rule that prepares many pages but activates few of them may cost more than it saves.

Sources

Chrome for Developers: Prefetch and prerender pages · Chrome for Developers: Implementation guide · WICG: Speculation Rules draft. Browser behavior changes; verify the current documentation and test the target versions you support.