Speculation Rules API: Instant Page Loads for Ecommerce

TL;DR: The Speculation Rules API lets browsers prefetch or fully prerender the next page a shopper is likely to visit, so the click feels instant. It ships in Chrome and Edge, safely does nothing in other browsers, and can be added to a Shopify theme in minutes. Start with prefetch at moderate eagerness, exclude cart, checkout, and account URLs, then upgrade high-intent paths like collection to product navigation to prerender. Pair it with fast first loads for the biggest revenue impact.

Table of contents

• What Is the Speculation Rules API?
• Why Instant Page Loads Matter for Ecommerce Revenue
• Prefetch vs Prerender: Choosing the Right Mode
• How to Implement Speculation Rules on a Shopify Store
• Eagerness Levels, Limits, and Browser Support
• Pitfalls to Avoid: Analytics, Server Load, and Stateful Pages
• Frequently Asked Questions

Most speed work in ecommerce focuses on the first page a visitor lands on. That makes sense: first impressions decide bounce rate. But the majority of a shopping session happens after that first load, as shoppers move from collection to product page to another product page. The Speculation Rules API is a browser feature built for exactly that second half of the journey. It lets your storefront tell the browser which pages a shopper will probably visit next, so the browser can download or even fully build those pages in the background. When the shopper clicks, the page appears immediately. For stores that have already tuned their landing pages, this is one of the largest remaining speed wins available, and it costs nothing but a small block of JSON in your theme.

What Is the Speculation Rules API?

The Speculation Rules API is a web standard, documented on MDN, that lets a page declare which future navigations the browser should speculatively load. You express those instructions as JSON inside a script tag with the type "speculationrules". The browser reads the rules and decides, based on your configured eagerness and its own resource checks, when to act on them.

It replaces the old link rel="prerender" hint, which had been quietly downgraded for years and never delivered a true prerender. The modern API is far more capable. A prerendered page loads its subresources, runs its JavaScript, and sits ready in memory. Activation is essentially a tab swap rather than a page load.

Two properties make the API practical for large catalogs. First, document rules with a "where" clause let you match links by URL pattern or CSS selector, so a single rule can cover thousands of product URLs without listing them. Second, the eagerness setting controls how much intent the browser should wait for before speculating, from "speculate immediately" down to "wait until the shopper presses down on the link". Because unsupported browsers ignore the script tag entirely, the whole feature is a progressive enhancement: shoppers in supporting browsers get instant navigation, and everyone else gets your normal site with zero breakage.

Why Instant Page Loads Matter for Ecommerce Revenue

Speed and revenue are tightly linked, and the relationship is well documented. Shopify's own platform data found that every 100ms of improvement in page speed correlated with meaningful conversion gains; we broke that research down in our analysis of Shopify's 100ms speed data. The mechanism is simple: every moment of waiting is a moment where doubt, distraction, or a competitor's tab can win.

What makes speculative loading special is where it applies. Metrics like Largest Contentful Paint measure the first load, and improving them is still the foundation of how website performance drives conversion rate. But a shopper who views six pages experiences five navigations after that first paint. If each one takes two or three seconds on mobile, you have added ten or more seconds of accumulated waiting to a single session. Prerendering collapses those navigations to near zero perceived load time.

There is also a browsing-behavior effect that shows up in session data: when navigation is instant, shoppers open more product pages. Comparison shopping gets cheaper, in attention terms, so people do more of it. More products viewed per session means more chances to find the item that converts, which is why speculative loading tends to lift pages per session and add-to-cart rate together rather than just shaving a timing metric. Faster stores also bounce less, a dynamic we cover in depth in our guide to how to improve site speed.

Prefetch vs Prerender: Choosing the Right Mode

The API offers two actions, and choosing between them is the main design decision.

Prefetch downloads the HTML document of a likely next page ahead of the click. It does not fetch subresources and does not execute anything. It is cheap for both the shopper's device and your infrastructure, which makes it safe to apply broadly. When the shopper clicks, the network time for the document is already paid; the browser still has to parse, fetch assets, and render.

Prerender builds the entire page in an invisible background context: HTML, CSS, images, and JavaScript all load and execute. Activation is nearly instantaneous, which means even the metrics tied to first paint effectively drop to zero for that navigation. The cost is proportionally higher: memory on the device, bandwidth, and a full page's worth of requests to your origin or edge.

A sensible split for most stores looks like this:

• Prefetch broadly: navigation links, collection pages, and paginated category views, using moderate eagerness.
• Prerender narrowly: the highest-intent hops, such as collection page to product page, or product page to the next product in a recommendation row.
• Never speculate on stateful URLs: cart, checkout, account, logout, or any link that adds, removes, or mutates anything.

Because prerendered pages execute JavaScript, they also warm up the heaviest part of most ecommerce templates. If your product pages carry a large script payload, prerendering hides that cost from the shopper entirely, though reducing the payload itself is still worth doing for the first landing.

How to Implement Speculation Rules on a Shopify Store

Implementation on Shopify takes one theme edit. From the admin, go to Online Store, then Themes, then Edit code, and open theme.liquid. Add a script tag of type "speculationrules" before the closing head tag. A conservative starting configuration prefetches likely next pages while excluding anything stateful:

{"prefetch": [{"where": {"and": [{"href_matches": "/*"}, {"not": {"href_matches": "/cart*"}}, {"not": {"href_matches": "/checkout*"}}, {"not": {"href_matches": "/account*"}}]}, "eagerness": "moderate"}]}

That single rule covers every internal link on the storefront. With moderate eagerness the browser waits for a real intent signal, such as hovering a link for a beat or starting to press it, before fetching. Shopify's checkout runs in its own hardened environment where theme scripts do not execute, but excluding the URLs anyway is good hygiene and makes the intent of the rule obvious to the next developer.

Upgrading to prerender

Once prefetch has run cleanly for a week or two, add a second, narrower rule that prerenders product links from collection templates, again with moderate eagerness. Using a selector_matches condition scoped to your product-card links keeps the rule tight. Validate in Chrome DevTools under Application and then Speculative loads, where the browser lists every rule, its status, and why any speculation was skipped.

Verify against your platform limits

Every speculation is a real request to your infrastructure. Review your traffic profile before going wide, especially if you pay for bandwidth or requests at the edge. Shopify's own theme performance best practices are a useful companion here: the leaner your templates are, the cheaper every speculative load becomes. And if your store's baseline is slow because of app bloat, fix that first; our guide on how to speed up a Shopify website covers the sequence we recommend.

Eagerness Levels, Limits, and Browser Support

Eagerness is the throttle that keeps speculation from becoming waste. The API defines four levels:

• Immediate: speculate as soon as the rule is seen. Reserve this for one or two near-certain next pages.
• Eager: speculate at the earliest opportunity, without waiting for interaction signals.
• Moderate: speculate on meaningful intent, such as hovering a link for roughly 200 milliseconds. The best default for ecommerce.
• Conservative: speculate only on pointerdown or touchstart. The smallest win, but nearly free.

Chrome enforces sensible caps, described in its prerender documentation: immediate and eager rules can hold up to 10 prerendered pages and 50 prefetched pages, while moderate and conservative rules are capped at 2, managed first-in-first-out so the newest speculation replaces the oldest. Those caps mean a hover-driven moderate strategy self-cleans as the shopper moves around the page.

On support: Chrome and Edge have shipped the full API, including document rules and eagerness, since version 121. Safari has begun shipping support behind a default-off flag, and Firefox has expressed a positive position on the prefetch portion. In practice that means a large share of desktop ecommerce sessions benefit today, and the share grows with no further work from you. Everyone else silently gets the status quo, which is why there is no real downside risk to adopting now.

Pitfalls to Avoid: Analytics, Server Load, and Stateful Pages

Speculative loading has three classic failure modes, all avoidable.

Analytics distortion. A prerendered page runs its JavaScript, including, potentially, your analytics tags. The platform accounts for this: prerendered pages expose a prerendering state and a prerenderingchange event, and GA4 is already prerender aware, deferring measurement until the shopper actually activates the page. But custom pixels, session recorders, personalization scripts, and A/B testing tools may not be. Audit anything that fires on page load and gate it behind the activation event if needed. If you already monitor for bot-driven skew in your reports, treat this as the same discipline applied to a new source.

Server and cost impact. Speculations are real requests. An eager prerender rule across a 10,000-product catalog can multiply origin traffic and inflate any usage-based bill. Moderate eagerness keeps volume proportional to genuine intent, and edge caching absorbs most of what remains, since speculative requests for cached pages never reach your origin at all.

Stateful and personalized pages. Never speculate on URLs with side effects: add-to-cart links, logout, anything with a one-time token. Also think through pages whose content depends on the moment they render, such as low-stock counters or flash-sale timers; a page prerendered 30 seconds before activation shows 30-second-old content unless it refreshes on the prerenderingchange event. Inventory-critical UI should re-check on activation.

One more subtlety: prerendered pages that are never visited still consumed bandwidth on the shopper's device. Chrome skips speculation for users on data-saver mode or constrained devices automatically, which removes most of the ethical concern, but it is another reason moderate eagerness is the right default for commerce.

Frequently Asked Questions

Does the Speculation Rules API work on Shopify stores?

Yes. Add the script tag to theme.liquid and rules apply across the storefront in supporting browsers. Checkout runs in Shopify's locked environment where theme scripts do not execute, so it is naturally protected, though excluding checkout URLs in your rules remains best practice.

Will prerendering skew my Google Analytics data?

GA4 delays measurement until the page is actually activated, so pageviews and sessions are not inflated by prerenders that never get visited. Third-party pixels and testing tools vary; audit them and gate any load-time logic behind the prerenderingchange event.

What is the difference between prefetch and prerender?

Prefetch downloads only the HTML document ahead of the click, saving network time. Prerender builds the complete page in a hidden background context, scripts and all, so activation feels instant. Prefetch is cheap and broad; prerender is powerful and should be targeted.

Which browsers support the Speculation Rules API in 2026?

Chrome and Edge support the full API. Safari has shipped early support disabled by default, and Firefox has signaled a positive position on prefetch. Unsupported browsers ignore the rules entirely, so there is no compatibility risk.

Can speculation rules increase my hosting costs?

Aggressive rules can, because every speculation is a real request. Moderate eagerness ties speculation volume to genuine shopper intent, and serving speculative requests from an edge cache keeps nearly all of them away from your origin.

Speculative loading makes the second click instant, but it cannot fix a slow first one, and the first load is where bounce decisions happen. That is the half of the problem Nostra was built for: our Edge Delivery Engine serves your storefront from edge locations close to every shopper, cutting initial load times without replatforming, theme surgery, or developer sprints. Combine a fast first paint from the edge with speculation rules for every navigation after it, and your store feels instant from landing to checkout. See what Nostra can do for your store's speed and conversion rate, and get the first-load half of instant done for you.