Speculation Rules API Prefetching Cuts Mobile Load Times

The Speculation Rules API is the quiet performance win most teams haven't shipped yet. While everyone argues over hydration strategies and bundle splitting, Chrome, Edge, Opera, and Brave have shipped a native way to make next-page navigations feel instant. No service workers. No custom prefetch logic. No guessing which link a user might click. Just a JSON blob that tells the browser: "Fetch this next."

What Changed in 2026

Browser support crossed 78% global share this year. That's not "experimental" anymore—it's baseline. The API lets you declaratively define prefetch and prerender rules in a <script type="speculationrules"> block. The browser handles the rest: timing, priority, memory limits, and cleanup when users don't navigate.

html

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/dashboard", "/settings", "/billing"]
    }
  ],
  "prerender": [
    {
      "source": "list",
      "urls": ["/checkout"]
    }
  ]
}
</script>

💡

TipPrerendering renders the full page in a hidden tab. Prefetching only downloads HTML. Use prerender for high-confidence next steps (checkout, login success). Use prefetch for everything else.

Mobile Impact Is Real

On 4G and mid-tier Android devices, speculative loading cuts LCP by 400-800ms on average. The browser starts fetching while the user reads, scrolls, or hesitates. By the time they tap, the HTML is cached—sometimes fully rendered. No spinner. No skeleton screens. Just paint.

Metric	Without Speculation	With Speculation
LCP (median, 4G)	2.8s	1.9s
CLS	0.12	0.03
TTFB (perceived)	1.1s	0.2s
JS bundle parse	blocking	background

Rules That Don't Waste Bytes

Don't prefetch everything. The API supports document rules (CSS selectors) and eagerness settings so you only speculate on likely clicks:

html

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

ℹ️

NoteEagerness options: immediate (hover/touchstart), moderate (hover 200ms), conservative (click). Moderate is the sweet spot for most content sites.

Guardrails That Prevent Footguns

The browser enforces hard limits: max 50MB prerender memory, 10 concurrent prerenders, no cross-origin prerenders without explicit opt-in. It also respects Save-Data headers, low-memory devices, and user preferences. You don't need to build your own budget tracker.

"
We dropped 15KB of custom prefetch code and got better coverage. The browser just knows when to back off.
— Senior Engineer, E-commerce Platform

Implementation Checklist

Ship this week:

1. Add a speculationrules script to your base template 2. Start with prefetch + moderate eagerness on internal links 3. Add prerender for checkout, auth callbacks, search results 4. Monitor speculationrules in DevTools Network panel 5. Track navigation.type === "prerender" in analytics

✦

⚠️

WarningDon't prerender pages with side effects (POST handlers, analytics firehoses, cart mutations). Use the <code>Speculation-Rules</code> HTTP header to move rules to the edge and avoid render-blocking scripts.

The Speculation Rules API isn't a silver bullet. But it's the first prefetching approach that works without framework buy-in, respects user constraints, and ships in every major Chromium browser today. Add the JSON. Measure the delta. Move on.