How to implement the Speculation Rules API in Shopify

Make Uxify one of your go-to sources on Google

Add Uxify on Google

Speed is everything in ecommerce. A slow store means fewer sales, higher bounce rates, and frustrated customers. Google knows this too — faster sites rank better in search results. That’s why Shopify store owners are always on the lookout for ways to make their stores faster.

One of the latest web technologies promising a big leap in speed is the Speculation Rules API. It helps pre-load pages before a visitor clicks, making navigation feel instant. In theory, it sounds amazing. In practice? Well, it’s not quite plug-and-play.

Let’s break it down.

What is the Speculation Rules API?

The Speculation Rules API is a browser feature that tells Chrome which pages should be prefetched or prerendered. By predicting where a user will go next, it can cut loading times to nearly zero when they actually click.

For a detailed explanation, check out our article: How to Use Speculation Rules API to Load Web Pages Instantly

How to implement the Speculation Rules API in Shopify

If you want to implement the Speculation Rules API manually in your Shopify store, follow these steps:

Step 1: Add the Speculation Rules Script to Your Theme

Shopify allows you to insert custom scripts into your theme’s <head>. Navigate to your Shopify admin panel and go to:

1. Online Store → Themes
2. Click Edit Code on your active theme
3. Open the theme.liquid file and paste the rules inside the <head>

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "href_matches": "/collections/.*"
      }
    }
  ]
}
</script>

Step 2: Customize the Rules for Your Store

Modify the href_matches value to match the pages you want to preload. For example:

• /collections/.* to preload collection pages
• /products/.* to preload product pages

Step 3: Test and Monitor Performance

Once the script is added, test it using Chrome DevTools:

1. Open your store in Chrome
2. Press F12 (or right-click → Inspect)
3. Go to Application → Speculative loads to see if your pages are being preloaded correctly

The challenge of keeping Speculation Rules working

Implementing the Speculation Rules API isn’t as easy as flipping a switch. Here’s why:

1. Preloading the wrong pages can hurt performance If you preload too many pages that users never visit, it wastes bandwidth and slows things down instead of speeding them up.

2. Keeping rules up-to-date requires substantial time and effort Your Shopify store changes constantly—new products, collections, and promotions. Your speculation rules need to adapt in real time, or they’ll become outdated fast.

3. Shopify apps and third-party scripts interfere Many Shopify apps modify page URLs, redirects, or add dynamic content. This can break your speculation rules or make them ineffective.

The better way: Navigation AI

Manual rules are a guess you have to keep making again. Navigation AI is the Uxify agent that takes that job off your hands. It watches real sessions on your store and predicts the next click from where the visitor is on the page, how they scroll, their device and what they’ve done so far in the session. Then it prerenders that one page with the Speculation Rules API. When the shopper clicks, the page is already painted.

Here’s how that compares with a rules file in theme.liquid:

• No rules to maintain. A new collection, a sale landing page, a product drop: the agent picks them up from how visitors actually move. You never edit href_matches again.
• It prerenders what people click, not everything that matches a pattern. Its predictions are right 72% of the time, so bandwidth goes to the pages shoppers open instead of a whole collection grid.
• It learns your store, not an average one. Navigation AI runs on Reality, Uxify’s real-user data layer, which tracks 3,000+ signals from real sessions. Ten products or ten thousand, it decides from your visitors’ paths.
• It switches on from one snippet. You add the Uxify snippet once and turn the agent on from the dashboard. No per-agent code, no config, no rules to write.
• It reports back. Every week or month it sends a summary of what it did and what that earned, including extra product pages viewed per visit. One store saw 2.43 more products per visit.

Across the sites it runs on, navigations get 55% faster, pageviews per session rise 30% and conversion rate lifts 1%. On Shopify, Ecigone grew engaged sessions 22% and repeat traffic 9% with Navigation AI. Give it up to 28 days before you judge the Core Web Vitals effect, because that’s how long CrUX field data takes to catch up.

Navigation AI owns the click from one page to the next. If a filter or an add-to-cart tap hangs after the page has loaded, that’s INP, and INProve is the agent built for it.

The Bottom Line

Yes, the Speculation Rules API can make a Shopify store a lot faster. But keeping manual rules right is a job that never ends. Navigation AI does that job every day, on your real visitors’ data, and tells you what it earned.

Want to see it on your own store? Book a demo and we’ll walk through your navigation data with you.