Suggestions
← TIL
~2 min read
#performance#astro#chrome#ux

Instant Navigations with Speculation Rules API in Astro 6

If you still think JavaScript-based prefetching is the boundary of the navigation experience, there's a paradigm shift you need to know about. In 2026, Chromium's native Speculation Rules API is the standard for making subsequent navigations feel virtually instantaneous, drastically reducing perceived latency without clogging the main thread with unnecessary workers.

From Prefetch to Prerender

Unlike traditional <link rel="prefetch"> which only downloads the resource into the cache, the Speculation Rules API allows the browser to actually render the page completely before the user even clicks. When the navigation occurs, the browser simply swaps the current document for the already rendered one.

In Astro 6, you enable this by keeping the experimental flag in your configuration:

astro.config.mjs
export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'viewport'
  },
  experimental: {
    clientPrerender: true 
  }
});

Document Rules: Speculation by Selectors

The real advantage appears when you let the browser determine which routes to pre-render using declarative rules. Using Document Rules allows the browser to identify which links to pre-render based on CSS selectors or URL patterns.

Astro 6 injects these rules automatically, but you can customize them to, for example, ignore any link with the .no-prerender class or routes matching /admin/*.

The Danger of Side Effects

Since the browser executes JS in the background, your analytics might track fake visits. The solution is simple but mandatory:

if (document.prerendering) {
  document.addEventListener('prerenderingchange', initAnalytics, { once: true });
} else {
  initAnalytics();
}

Hugo's Spiky POV

Letting Astro manage prefetches with workers is a solid foundation, but using the Speculation Rules API allows you to leverage native browser capabilities that previously required complex JavaScript solutions. If your audience is on Chrome or Edge, enabling this is a low-cost optimization with a massive impact on perceived UX.

Have you felt the speed difference yet? In one of our implementations, we observed a reduction from ~1.2s to ~320ms in navigation to pre-rendered pages.

Most sites still focus on optimizing resource downloads. The Speculation Rules API changes the game: the best navigation is the one that has already finished rendering before the user even decides to visit it.

Explore our performance architecture focused on Core Web Vitals and perceived UX.

Link copied to clipboard