Speculation Rules and Prerendering: Making Pages Feel Instant

Imagine clicking a link and the next page appears instantly. The Speculation Rules API makes this possible by letting a website tell the browser which pages a visitor is likely to open next, so the browser can prefetch or fully prerender them in the background.

How it works

You add a small block of JSON to your page, inside a script tag of type speculationrules, listing URLs or patterns and how eagerly they should be loaded. The browser then decides when to act on them, based on your rules and its own resource limits.

Prefetch vs prerender

• Prefetch: downloads the HTML of the next page ahead of time.
• Prerender: loads and renders the whole page invisibly, so navigation feels immediate.

Choosing eagerness

Options range from conservative (act when the user starts pressing a link) to moderate (when hovering for a moment) to eager and immediate. Start conservatively for most sites.

Cautions

• It is supported in Chromium-based browsers; other browsers ignore it, so it is a progressive enhancement.
• Prerendering can trigger analytics or actions early, so make sure your scripts handle prerendered pages properly.
• Avoid speculating on pages that change state, such as logout or add-to-basket links.
• It uses bandwidth and server resources, so target likely next pages only.

Try it on key journeys

Good candidates are the next article in a series, a product page from a category list or a contact page from the home page. Measure the effect on load times and conversions.