Make Page Navigations Feel Instant With Speculation Rules

There is a particular feeling a fast site gives you. You click a link and the next page is just there, with no flash of white, no spinner, no perceptible wait. It feels less like loading a web page and more like flipping a tab in a native app. For years that feeling required a single-page-app framework and a lot of client-side machinery. Now you can get most of it on a plain multi-page site with a small block of JSON, using the Speculation Rules API, the navigation-layer cousin of the optimistic UI and smart skeletons that make slow feel fast.

The idea is simple and the payoff is large. Before the user clicks, the browser quietly fetches, and optionally fully renders, the page they are most likely to go to next. When the click finally lands, the work is already done and the navigation resolves in milliseconds. The art is doing this without wasting bandwidth prefetching pages nobody visits, and the API gives you precise controls to thread that needle.

Prefetch versus prerender

The first decision is how aggressive to be, and there are two levels.

Prefetching downloads the key resources for a page but does not render it. When the user navigates, the browser still has to render, but it skips the network round trip, which is usually the slowest part. It is cheap and low-risk.

Prerendering goes further: it downloads the resources and renders the entire page in the background, so when the user navigates the page is displayed instantly, already painted. It is the closest thing to teleportation the web offers, and it costs more, because you are doing the full work of loading a page that may never be visited.

You choose per situation. Prerender the one or two pages a user is overwhelmingly likely to hit next. Prefetch the broader set of plausible destinations. Reserve the heavyweight prerender for high-confidence guesses, and use the lighter prefetch where you are casting a wider net.

The eagerness dial is the whole game

The reason Speculation Rules is safe to use, and not just a bandwidth bonfire, is the eagerness setting. It controls when the browser acts on a rule, and getting it right is the difference between instant navigation and wasted data.

• conservative speculates on pointer or touch down. By the time it fires, the user has essentially committed to the click. Minimal waste, smaller speedup.
• moderate is the sweet spot for most sites. On desktop it speculates when the user holds the pointer over a link for 200 milliseconds, or on pointer-down if that comes first. The hover prefetch pairs naturally with an app shell that prefetches what it can predict so the destination is already primed before the click lands. That hover is a strong signal of intent, and 200 milliseconds is enough lead time to make the eventual click feel instant. On mobile, where there is no hover, it uses viewport heuristics, triggering after the user stops scrolling for links that are prominent and near where they last touched.
• eager and immediate speculate as early as possible, including links not yet near the viewport. Powerful, and easy to overuse, because they will happily prefetch links the user never approaches.

Match the eagerness to the confidence. Use moderate for in-content links across a site, where you cannot predict every destination but a hover is a good tell. Reserve immediate for the rare case where you are nearly certain of the next page, like a single-result search or a linear wizard.

A practical setup

You declare rules in a <script type="speculationrules"> block. A sensible starting point: prerender the highest-intent links on hover, and prefetch a wider set, while excluding anything you must not speculate, like logout, add-to-cart, or any link that mutates state.

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }],
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "conservative"
  }]
}
</script>

The exclusions matter as much as the inclusions. A prerendered page runs its scripts in the background, so prerendering a link that performs an action, signs the user out, posts a form, charges a card, can fire that action before the user ever clicks. The fix is to exclude those URLs from your rules with a not condition, or mark them so they are never speculated. Anything that is not a safe, idempotent GET navigation should be off the list. This is the same instinct that governs how you treat any operation with side effects: a read is safe to do early, a write is not, which is exactly why agent tool calls need to be idempotent before they double-charge a customer, and why verifying a payment webhook before it moves money is non-negotiable.

This pairs with a well-connected site

Speculation Rules rewards a site whose pages are genuinely linked to one another, because the browser can only speculate on links that exist in the content. A site built as a connected graph, where every page offers in-content links to the related pages a visitor would naturally reach for, gives the API a rich set of high-intent targets to pre-load. A site that is a stack of stranded pages reachable only through the top nav gives it very little to work with. Good information architecture and instant navigation reinforce each other: the more naturally your pages connect, the more the browser can make the next click feel free.

That is one reason we treat internal linking and page structure as part of how we build websites, not an afterthought. The links that help a human find their way are the same links that let the browser get ahead of them.

Measure, do not assume

Speculation Rules is a performance optimization, and performance optimizations need verification, not faith. Watch two things. First, your navigation timings, to confirm clicks really are resolving faster for real users, which is where field data tells the truth your Lighthouse score hides. Second, your bandwidth and origin load, because an overly eager configuration can multiply requests for pages that never get visited, which costs you and your hosting without helping anyone. If you see prefetch volume climbing without a matching speedup, dial the eagerness back from eager toward moderate and tighten which links qualify.

There is also a fallback consideration. Not every browser supports the full API, and that is fine, because it degrades gracefully: where Speculation Rules is unsupported, navigation simply works the normal way, no slower than before. You are adding speed for the browsers that can take it, never removing function from the ones that cannot.

Instant by default, wasteful never

The win here is unusual because it is almost free. A small JSON block, the right eagerness setting, and a careful exclusion list turn ordinary clicks into instant navigations for a large share of your users, with no framework, no client-side router, and no rewrite. The discipline is restraint: speculate where intent is real, exclude anything with side effects, and measure that the bandwidth you spend is buying speed people actually feel.

Get it right and your multi-page site picks up the one quality people associate with the most polished apps, the sense that the next page was already waiting. That feeling is not magic. It is a browser doing the work a fraction of a second before the user asks, and a developer who told it exactly when to bother.