From the archive4 sections · 2 min readBy Dezső Mező · Published .mdWebPerformanceCWVChromiumSEO
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.
01What 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.
02The 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.
03Real numbers
- Nav LCP · 1.2s -> 0.05s on prerendered target.
- Nav INP · 180ms -> 35ms.
- Prerender-hit rate in production · ~75% on moderate eagerness.
04One 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.
What to take away
- The Speculation Rules API (Chromium) prerenders navigation targets on hover or list. Near-instant nav, measurable LCP / INP win, zero JS-bundle cost. The production-safe config we default to, the one gotcha worth knowing.
More from the lab
Browse all entries- Core Web Vitals on Next.js: from 4.5s LCP to 0.9s in 3 weeks
- AI Search: 2026 Guide to Generative Engine Optimization
The AI-search visibility checklist we run on this site
Core Web Vitals on a real Next.js site
Want this looked at on your own system?Start a conversation
