Achieving 0ms Perceived Navigation in Vite & React 19 with W3C Speculation Rules

Beyond Traditional Client-Side Routing

In standard React Single Page Applications (SPAs), internal page transitions require executing JavaScript route matchers, loading code-split chunks, and updating DOM nodes. While fast, transitions still incur 50–150ms of main thread delay and can trigger Interaction to Next Paint (INP) degradations.

The Power of the W3C Speculation Rules API

The modern W3C Speculation Rules API introduces declarative background prerendering at the browser engine level. Unlike legacy <link rel="prerender">, speculation rules allow structured JSON configurations specifying match patterns, exclusion rules, and eagerness levels:

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

With "eagerness": "moderate", Chromium browsers detect when a user hovers or moves their cursor toward an internal link and silently render the destination page in an offscreen process.

Synergy with React 19 Static Site Generation (SSG)

Speculation rules deliver maximum impact when paired with pre-rendered static HTML routes. Because every route on this site is pre-rendered at build time with full HTML, CSS, and hydration scripts: 1. The background browser process receives instant 200 OK responses from the edge CDN. 2. The page is completely painted before the user clicks. 3. Upon clicking, the browser swaps the background document into view instantly, achieving a true 0ms perceived navigation duration.

Core Web Vitals Impact and Safety Rules

1. Guarding Analytics & Side-Effects: Use document.prerendering checks in analytics scripts to avoid logging phantom pageviews before user activation.
2. Preserving BFCache: Avoid unload and beforeunload event listeners, ensuring that both Forward-Back Cache (BFCache) and speculative prerendering operate at peak efficiency.
3. Granular Asset Exclusion: Always exclude heavy asset downloads, audio streams, and API routes from speculation rules matching.

Experience this instant navigation architecture live in our Developer Arcade and explore our interactive 2.5D retro portfolio at the OpenWorld Portfolio Project Page.