Make page loads feel instant. No framework.

Make page loads feel instant. No framework.
May 01, 2026 · 4 min read · javascript Performance Web Development

Next.js prefetches links. Astro does it. Nuxt does it. You assumed you needed a framework to get that snappy navigation. You do not. The Speculation Rules API lets plain HTML pages prerender the next page before the user even clicks. It lands in Chrome 121 with one JSON script tag.

Drop this in your HTML

Add a single script tag with type="speculationrules". The browser prerenders those URLs in a background tab, ready to swap in the moment the user clicks.

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

That prerenders every URL matching /articles/* when the user hovers or starts to interact. Navigation to those pages becomes essentially zero milliseconds.

Eagerness levels

You control how aggressively the browser speculates with the eagerness field.

javascript 
// conservative — only on mousedown / touchstart
"eagerness": "conservative"

// moderate — on hover (200ms delay)
"eagerness": "moderate"

// eager — prerender all matched links immediately
"eagerness": "eager"

Use conservative for most sites. Use eager only for small sites where you can afford the bandwidth hit of prerending everything upfront.

Prefetch vs prerender. Swap "prerender" for "prefetch" if you only want to download the HTML without executing it. Prefetch is cheaper; prerender is faster. For article-style pages, prerender wins every time.

Why it matters

  • No build step, no framework. Works on any static site, WordPress, Rails app, or hand-written HTML file.
  • Real prerender, not just prefetch. The browser runs the full page including JavaScript before the click, so even JS-heavy pages feel instant.
  • Safe by default. The browser ignores speculation rules on pages with Cache-Control: no-store, so login pages and checkout flows are never accidentally prerendered.

Chrome DevTools shows active speculations under Application > Speculative Loads. Use it to verify your rules are firing before shipping. Firefox and Safari support is in progress; use HTMLScriptElement.supports('speculationrules') to feature-detect cleanly.

Happy coding!
Marko