The Speculation Rules API: Pages That Load Before the Click

For years we optimised how fast a page loads by shrinking files, compressing images and setting up CDNs. But what if the page could be ready before the user even clicks? The Speculation Rules API does exactly that: it tells the browser to fetch, or even fully render, the pages a user is likely to visit next in the background. The result is pages that open the moment they are clicked, with near-zero waiting time.

Prefetch vs. Prerender

Speculation Rules work at two levels:

• prefetch: Downloads only the page's HTML document ahead of time. It is cheap; on click there is no wait for the server response, but the page still has to render.
• prerender: Fully loads the page in an invisible tab, fetches its subresources and runs its JavaScript. On click the page appears instantly; LCP drops to almost zero.

How to Use It

Rules are defined in a JSON block added to the page. The most practical approach is "document rules", which act on the links on the page instead of a hard-coded list of URLs:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/en/get-a-quote*" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

The eagerness value decides when the speculation happens. moderate fires on desktop when the user hovers over a link briefly; conservative only kicks in when the click starts (pointerdown). eager and immediate are more aggressive and use more resources.

"The fastest request is the one that finished before the user clicked."

Things to Watch Out For

Prerendering is powerful but not free. Because the browser loads the page as if it had really been opened, a few things matter:

• Analytics: Pages that are prerendered but never opened should not produce fake page views. Common tools like Google Analytics handle this on their own; custom tracking code should check document.prerendering.
• Side effects: Links that change state, such as add to cart, log out or submit, must be excluded from the rules.
• Resource use: The browser throttles speculation in data-saver mode or on low battery on its own, but you should still avoid aggressively prerendering many heavy pages.
• Support: The API currently works in Chromium-based browsers (Chrome, Edge). Other browsers ignore the script block; the site does not break, it just does not get faster.

Using It with Astro

Astro's built-in prefetch feature prefetches links on hover or when they come into view with a single setting, and its experimental clientPrerender option can use Speculation Rules under the hood. Combined with View Transitions, a static site becomes a genuinely "instant" experience.