The Speculation Rules API
Navigate the Aether store and see how the browser can silently prerender and prefetch pages before you even click — making navigation feel instant.
How does it work?
Standard Navigation
The browser only fetches a page after you click a link. The full network round-trip happens during navigation — you see a blank screen or loading spinner.
- 1User clicks a link
- 2Browser sends HTTP request
- 3Server responds with HTML
- 4Browser parses & renders the page
- 5Page is visible (latency felt)
Speculative Navigation
You declare rules in JSON and the browser speculatively fetches or renders pages in the background while the user is still on the current page.
- 1Rules declared in
<script type="speculationrules"> - 2Browser fetches & renders pages silently
- 3User clicks a link
- 4Browser swaps in the pre-rendered page
- 5Page is instantly visible
The Code
This is the actual <script type="speculationrules">
injected by this demo when you toggle speculation ON. Inspect the page's
<head> to see it live.
<script type="speculationrules"> { // Prerender: browser fetches AND fully renders these pages // in a hidden tab. Navigation is instant — zero latency. "prerender": [ { "source": "list", "urls": ["page-a.html", "page-b.html"], "eagerness": "eager" } ], // Prefetch: browser downloads the HTML only. // Saves 1 network round-trip but still parses on navigate. "prefetch": [ { "source": "list", "urls": ["page-c.html"], "eagerness": "eager" } ] } </script>
Prefetch vs Prerender
| Feature | Prefetch | Prerender |
|---|---|---|
| What it does | Downloads HTML only | Downloads + fully renders page |
| JS executed? | No | Yes |
| Navigation speed | Fast (no network) | Instant (already rendered) |
| Resource cost | Low (HTML only) | Higher (full page resources) |
| transferSize on load | 0 bytes (served from cache) | activationStart > 0 |
Try it yourself
Toggle the switch in the top-right to turn speculation rules on/off, then navigate to the pages below and check the timing panel on each page. Watch the glowing badges appear on the nav links when pages are pre-loaded.
Shop
Pre-rendered — should open instantly with near-zero activation time.
Features
Pre-rendered — full render happens in background tab before click.
Our Story
Prefetched — HTML is cached, parse & render still occurs on click.
News
Excluded from all rules — full cold fetch every time. Use this as the baseline for comparison.
Eagerness Levels
Open Chrome DevTools and go to Application → Speculation Rules to see which pages are being pre-rendered or prefetched in real time. You can also check the Network tab to see the early fetches triggered by the rules.