What the Speculation Rules API Does
The Speculation Rules API is a browser-native mechanism that lets you declare which pages should be prefetched or prerendered before the user actually navigates to them. Unlike older approaches like <link rel="prefetch">, Speculation Rules use a JSON-based configuration inside a <script type="speculationrules"> tag, giving you fine-grained control over which URLs to target, what conditions must be met, and how aggressively the browser should act. When a page is prerendered, the browser loads and fully renders it in a hidden tab — meaning the navigation appears instant when the user clicks. For Shopify storefronts where page speed directly correlates with conversion rate, this API represents one of the most impactful performance wins available without touching server infrastructure.
Prefetch vs. Prerender: Choosing the Right Level
Prefetch downloads the HTML document and critical subresources ahead of time but does not execute JavaScript or render the page. Prerender goes further — it fully loads, parses, and renders the page in an invisible browsing context, so the swap is nearly zero-latency. The trade-off is resource cost: prerendering consumes CPU, memory, and bandwidth on the client device, so you should reserve it for high-confidence navigations. On a Shopify collection page, prefetching every product link on hover is reasonable because the cost is modest. Prerendering should target only the most likely next click — perhaps the first product in a curated collection or the checkout page once a customer has items in their cart. Combining both strategies in a single Speculation Rules block lets the browser allocate resources intelligently.
Integrating with Shopify Themes
Adding Speculation Rules to a Shopify Liquid theme is straightforward. You inject a <script type="speculationrules"> block in your theme.liquid layout, typically just before the closing </body> tag. The JSON structure uses document rules with an href matching pattern — for example, prefetching all links under /products/ or /collections/. You can use "where" conditions with CSS selectors to target only links inside your product grid, excluding external links or links to the cart. For stores with large catalogs, a conservative approach is to set the eagerness to "moderate" (prefetch on hover) rather than "eager" (prefetch on viewport entry), which prevents unnecessary requests when a customer is just scrolling through hundreds of products without clicking.
Eagerness Levels and Browser Support
The API defines four eagerness levels: immediate, eager, moderate, and conservative. Immediate triggers prefetch or prerender as soon as the rules are parsed — useful for known next-page scenarios like a paginated checkout flow. Eager fires when a link enters the viewport. Moderate activates on hover with a short dwell threshold, and conservative waits for an actual pointer-down or touch-start event. As of early 2026, Chromium-based browsers (Chrome, Edge, Opera) fully support Speculation Rules including prerender, while Firefox supports prefetch but not prerender. Safari has begun implementing the API behind a flag. For unsupported browsers, the rules are silently ignored — no errors, no broken pages — making this a pure progressive enhancement. You can pair it with a <link rel="prefetch"> fallback inside a <noscript> block or via feature detection for broader coverage.
If you want to add Speculation Rules to your Shopify storefront for near-instant page transitions, or need guidance on tuning eagerness levels for your traffic patterns, feel free to reach out. I am always happy to help merchants unlock browser-native performance gains.