The Speculation Rules API lets browsers prefetch or prerender likely future navigations to deliver much faster page loads; it’s designed for multi‑page sites and is currently experimental in many browsers.

What the Speculation Rules API is

The Speculation Rules API provides a declarative way to tell the browser which document URLs to prefetch or prerender based on user interactions, lists, or document rules. It aims to replace older, less-safe prerender techniques and to give developers more control over when and how speculation happens.

Why use it

Benefits include faster perceived navigation, reduced latency for common flows, and a more explicit, auditable configuration for speculation behavior. It is particularly useful for multi-page applications (MPAs) where whole-document navigations are common.

Basic syntax and placement

The most common way to register rules is with a JSON block inside a script tag using type="speculationrules". Rules can include lists of URLs, prerender or prefetch actions, and conditions such as user eagerness or source type.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/next-page", "/checkout"]
    }
  ],
  "prefetch": [
    {
      "source": "list",
      "urls": ["/assets/heavy-image.jpg"]
    }
  ]
}
</script>

Programmatic example

You can also register rules dynamically from JavaScript by inserting a <script type="speculationrules"> node or by using document rules for automatic link speculation; the codelab demonstrates debugging and dynamic registration techniques.

// Example: inject rules at runtime
const script = document.createElement('script');
script.type = 'speculationrules';
script.textContent = JSON.stringify({
  "prerender": [{ "source": "list", "urls": ["/next"] }]
});
document.head.appendChild(script);

Debugging and best practices

Use DevTools to inspect speculation activity, start conservatively (prefetch before prerender), and measure cost vs. benefit—prerenders can consume CPU and network resources if overused. DebugBear and Chrome docs provide practical guidance for complex sites and monitoring.

Current support matrix (as of 1/3/2025)