Skip to content

The Speculation Rules API is probably the biggest quiet win of 2024-26 web performance. Add a small JSON block to your HTML, Chromium prerenders the next-likely page. When the user clicks, the navigation is near-instant. And it costs zero JS bundle size.

What it does

Two modes: 'prerender' (full render into a hidden tab) and 'prefetch' (fetch only). Prerender is more aggressive · the page is live when clicked. Prefetch is cheaper · the HTML is warm but needs to render on activation.

The config we ship

<script type='speculationrules'>
{
  'prerender': [{
    'source': 'document',
    'where': { 'href_matches': '/*' },
    'eagerness': 'moderate'
  }],
  'prefetch': [{
    'source': 'list',
    'urls': ['/blog', '/services', '/projects']
  }]
}
</script>

Eagerness 'moderate' triggers on hover (200ms pre-click). 'Eager' triggers immediately on list. 'Conservative' only on mouse-down. Moderate is the right default · it feels instant without blowing the per-origin prerender budget.

Real numbers

  • Nav LCP · 1.2s -> 0.05s on prerendered target.
  • Nav INP · 180ms -> 35ms.
  • Prerender-hit rate in production · ~75% on moderate eagerness.

One gotcha

Prerender runs client-side JS immediately · including analytics. GA4, Segment, and Amplitude all dedupe, but some older trackers double-count. Add the 'prerendering' check to your analytics init if you use anything custom.

Ship it. 20 lines of config, 200ms-600ms INP win on nav, 0 JS bundle cost. We now default to this on every Next.js site we build.

ShareXLinkedIn#
Dezso Mezo

By

Dezso Mezo

Founder, DField Solutions

I've shipped production products from fintech to creator-tooling · for startups and enterprises, from Budapest to San Francisco.

Keep reading

RELATED PROJECTS

Would rather build together?

Let's talk about your project. 30 minutes, no strings.

Let's talk