Skip to content

Speculation Rules make multi-page sites feel instant

A block of JSON tells the browser which links to prerender. On a server-rendered site it closes most of the perceived gap with a single-page app.

Source: MDN

The Speculation Rules API lets a page tell the browser which navigations are likely, so it can prefetch or fully prerender them ahead of the click.

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

eagerness is the dial: conservative acts on pointer-down, moderate on hover, eager as soon as the rule is parsed. Moderate is the sensible default — a hover is a strong signal and gives you a couple of hundred milliseconds of head start.

Why it matters: this is the cheapest large perceived-performance win available to a server-rendered site. No router, no client-side navigation, no hydration. Pair it with cross-document view transitions and a plain Astro or Laravel site feels like an app.

The caveat: a prerendered page runs its JavaScript and fires analytics. Exclude anything with a side effect — logout links, one-click actions, anything behind a POST-shaped GET — and check your analytics handles the Prerender API’s visibility states, or your pageview numbers will quietly inflate.

Share

Related reading

More from The Wire

All briefs