Instant Navigations: How to Use the Speculation Rules API for Near-Zero Load Times

Source: Dev.to

Why Page Loads Still Feel Slow

No matter how much you optimise, there’s a hard limit: pages can only start loading after the user clicks.
You’re stuck waiting for DNS lookups, server responses, and rendering – even on a fast site that’s hundreds of milliseconds.

What if the browser could predict where the user is going next and start loading that page before they click?

That’s exactly what Chrome’s Speculation Rules API does. With it you can achieve 0 ms load times – the page just appears.

Two Strategies

Note: This API replaces the old “ tags (deprecated for privacy reasons). The new API is smarter and gives you far more control.

Even a perfect Lighthouse score doesn’t guarantee a fast‑feeling site. Optimised pages still need DNS lookup, TCP handshake, TLS negotiation, server response, and rendering – hundreds of milliseconds minimum.

Speculation rules eliminate perceived wait time by working during the user’s decision‑making.
When someone hovers over a link for 200 ms, you can use that time to pre‑load or pre‑render the destination. By the time they click, the work is already done.

Benefits

• Zero white‑flash between pages
• Instant interactions (JS already parsed & executed)
• Better Core Web Vitals – LCP often hits 0 ms for prerendered pages
• Potential revenue boost – the experience feels magical

Practical Examples

1. Prerender when the user starts clicking (lowest resource waste)

{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/logout" } },
        { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } }
      ]
    },
    "eagerness": "conservative"
  }]
}

2. Prerender on 200 ms hover – balances performance and resource cost

(This is the strategy Google Search uses for results beyond the first two.)

{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/logout" } }
      ]
    },
    "eagerness": "moderate"
  }]
}

3. Two‑tier strategy: eager prefetch on page load + moderate prerender on hover

{
  "prefetch": [{
    "urls": ["/products", "/pricing", "/docs"],
    "eagerness": "eager"
  }],
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}

4. Prefetch external links with privacy protections

{
  "prefetch": [{
    "urls": [
      "https://example.com/article",
      "https://partner-site.com/page"
    ],
    "requires": ["anonymous-client-ip-when-cross-origin"],
    "referrer_policy": "no-referrer"
  }]
}

5. Target links by CSS class

{
  "prerender": [{
    "where": { "selector_matches": ".prerender-this" },
    "eagerness": "eager"
  }],
  "prefetch": [{
    "where": { "selector_matches": ".prefetch-this" },
    "eagerness": "moderate"
  }]
}

Eagerness Settings

The Speculation Rules API is Chromium‑only but works as progressive enhancement – unsupported browsers simply ignore the “ tag.

Browser Support

Resource & Privacy Protections

• Resource limits – Chrome caps concurrent prerenders: up to 50 immediate/eager prefetches (mobile), 10 prerenders, and 2 moderate/conservative prerenders (FIFO). When the limit is hit, older prerenders are cancelled.
• Deferred APIs – Intrusive APIs (camera, microphone, notifications, geolocation) stay dormant until the user actually views the page.
• User settings respect – Prerendering won’t run if the user has Data Saver, Energy Saver, or has disabled “Preload pages” in settings.
• Cross‑origin iframes – Third‑party iframes don’t load during prerender; they wait until activation, preventing tracking and reducing waste.

Final Thoughts

I’m honestly surprised I hadn’t heard about this sooner. Now that all major Chromium browsers support the API, it’s definitely worth using. It’s easy to get caught up in complex performance optimisations and overlook the simpler wins – like proper semantic HTML for SEO or vanilla CSS that outperforms heavy frameworks.

The Speculation Rules API fits right into that category: powerful, straightforward, and built into the platform. I can’t wait to keep experimenting with it!

e how far it can go.

• Prerender pages in Chrome – Complete API reference
• Implementation guide for complex sites – Advanced patterns and best practices
• Debugging speculation rules – DevTools guide
• How Google Search uses speculation rules – Real‑world implementation and results
• MDN: Speculation Rules API – Web standards documentation