Prefetching the next page
speculation rules
Chrome109
Edge109
Firefox-
Safari-
Features it needs
- Speculation rulesLimited availability
These scripts watch for links entering the viewport or being hovered, then inject a prefetch tag. Speculation rules say the same thing declaratively in a script tag the browser reads: which links to speculate on, and how eagerly. The browser handles the heuristics, and prerender goes further than any library can, rendering the next page so the click is instant. Chromium only for now.
When this applies
Prefetching or prerendering the page a visitor is likely to open next.
The native approach
<script type="speculationrules">
{
"prerender": [{
"where": { "href_matches": "/articles/*" },
"eagerness": "moderate"
}]
}
</script>When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You ship to Firefox or Safari. Only Chromium has this, from Chrome 109, so the library is still what serves everyone else and this is an enhancement rather than a swap.
- Prerendering would run analytics or side effects for a page nobody visited. A prerendered document runs its scripts, so anything counting a view has to check document.prerendering and wait, which is work the library never made you do.
- The next URL is decided in JavaScript rather than present as a link, such as a router that builds the target from state. Rules match on the document's own hrefs.
- Your pages are personalised or expensive to render, where speculating wrongly costs the server more than the click saves the visitor.
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- an IntersectionObserver over anchors that injects a <link rel=prefetch> when one scrolls into view
- a mouseover or touchstart listener on links that starts fetching the target before the click lands