ARTICLE

Speculation Rules on a Hyvä Magento Storefront: Instant Navigation With Prerender and Prefetch

Speculation Rules on a Hyvä Magento Storefront: Instant Navigation With Prerender and Prefetch

Speculation Rules let a Hyvä Magento storefront load the next page before the shopper clicks. The browser prefetches or prerenders likely destinations in the background, so a product or category page appears the instant the link is tapped. Hyvä ships this built in since version 1.4, defaulted to safe prefetch, and you tune it from the Magento admin.

That single feature closes a gap that Core Web Vitals work alone never reaches: the page transition. You can cut Largest Contentful Paint on the landing page and still leave every click after it feeling slow. Speculation Rules attack the click itself. Below is how the API works, where prefetch and prerender differ, exactly how Hyvä exposes it, and the Magento-specific traps around full page cache, private content, and analytics that decide whether you ship prerender or stay on prefetch.

What the Speculation Rules API actually does

Speculation Rules are a small block of JSON that tells the browser which URLs are worth fetching or rendering ahead of a real navigation. You declare them with a <script type="speculationrules"> tag, and the browser does the rest, subject to its own resource limits and heuristics.

There are two actions:

  • Prefetch downloads the response for a candidate URL and holds it. When the shopper clicks, the HTML is already in memory, so the round trip to your server is gone. It is cheap and low risk.
  • Prerender goes further and renders the whole page in a hidden state, running its scripts, as if it were open in an invisible background tab. On click the page is swapped in, and it paints in a few milliseconds. It is powerful and expensive.

Rules come in two shapes. List rules name explicit URLs. Document rules use where conditions (CSS selectors or URL patterns) to match links already in the page, which is what you want on a catalog where you cannot enumerate every product URL by hand.

The API shipped in Chrome 109 and is available across Chromium browsers, which is Chrome, Edge, Opera, and most Android browsers, covering roughly four in five sessions on a typical US store. Later Chrome versions added eagerness support and HTTP header delivery. Safari and Firefox do not render speculation rules today, though Firefox has signalled support for the prefetch half. Because unsupported browsers simply ignore the script tag, there is no downside to shipping it: the feature is a progressive enhancement, not a dependency.

Prefetch versus prerender on a Magento storefront

The choice is not academic. Magento pages run analytics, personalization, and cart logic, and prerender executes all of it early. Here is how the two options compare for a real store.

Factor Prefetch Prerender
What loads early HTML and the response only Full page render, scripts run
Perceived speed on click Fast, one render still happens Near instant, already painted
Client memory and CPU cost Low High, one hidden page per candidate
Analytics risk Minimal Page view can fire before the visit is real
Third-party pixel risk Low Ad and remarketing tags can double count
Safe default for most stores Yes Only with careful instrumentation
Best fit Catalog and category links at scale A small set of high-intent links, such as cart to checkout

For most Magento merchants, prefetch on category and product links is the right first move. It removes server latency from the transition without the accounting problems prerender introduces. Reserve prerender for a narrow, high-confidence path where the resource cost is justified and where you have already fixed analytics timing.

How Hyvä ships Speculation Rules

You do not need a custom module. Hyvä added native Speculation Rules support in the Hyvä theme at version 1.4, and it is enabled by default. Out of the box the theme prefetches links when a user hovers, which is the low-risk configuration.

Everything is controlled from the admin at Stores → Configuration → Hyvä Themes → General → Speculation Rules. Two fields matter:

  • Method, with the options prefetch (default), prerender, and Disabled (no speculative loading).
  • Eagerness, with immediate, eager, moderate (default), and conservative.

Eagerness decides when the browser acts on a candidate link, and it is the dial that trades speed against wasted work:

  • conservative fires on pointer or touch down, the moment before the click completes.
  • moderate, the Hyvä default, fires after a short hover, historically around 200 milliseconds on desktop, with viewport-based heuristics on mobile.
  • eager and immediate act almost as soon as a link is seen, which maximizes hit rate but can fetch pages the shopper never visits.

The sensible pattern on a store is prefetch plus moderate: enough intent signal that you are usually right about the next click, without hammering the origin. Move to a more eager setting only for a curated link set you are confident about.

The Magento gotchas that decide your configuration

This is where a generic web-performance guide stops being enough. A Magento storefront is not a static site, and three mechanics change how you deploy speculation.

Full page cache is your friend here. Prefetch and prerender are most effective when the target response is already cacheable, because the browser gets a fast, complete document. Pages served from Varnish or the built-in full page cache are ideal candidates. Hyvä’s default rules were updated to include cached pages served without a .html suffix, so clean product and category URLs are covered. If you want the deeper picture of how caching and hole-punching work under Hyvä, our write-up on Magento full page cache and Varnish on Hyvä covers the invalidation model that keeps speculated pages fresh.

Private content and per-customer pages should be excluded. Anything that renders customer-specific data, the cart, checkout, account dashboards, wishlist, or a logged-in B2B price view, is a poor prerender target and can leak or mis-cache state. Hyvä gives you two exclusion mechanisms:

  • Pass an exclude_list argument to the speculationrules block in layout XML.
  • Add paths to the excludeFromPreloading argument of the Hyva\Theme\ViewModel\SpeculationRules view model in frontend/di.xml.

Use these to keep checkout, account, and cart routes out of speculation regardless of the method you pick.

Analytics and pixels need prerender-aware timing. Because a prerendered page behaves as if opened in an invisible tab, its page view and tag scripts can fire before the shopper actually arrives. That inflates sessions and pollutes remarketing audiences. The fix is to defer those scripts using the document.prerendering property and the prerenderingchange event, so measurement waits until the page is genuinely visible. If you run server-side tracking or Consent Mode, this coordination matters even more, and it is the single biggest reason to stay on prefetch until the instrumentation is done. Chrome also caps concurrent prerenders, roughly ten for immediate rules and two for interaction-based eagerness, which naturally limits runaway resource use.

A safe rollout sequence

You do not turn prerender on globally and hope. A disciplined rollout looks like this:

  1. Confirm you are on Hyvä 1.4 or later. If a 1.4 upgrade is on your roadmap, our Hyvä 1.4 and Tailwind v4 upgrade guide scopes what changes in the theme.
  2. Leave the default prefetch plus moderate live and confirm category and product links are covered.
  3. Exclude cart, checkout, account, and any private or B2B pricing routes through exclude_list or excludeFromPreloading.
  4. Baseline field data before you change anything, so you can prove the effect rather than guess at it.
  5. Only then, if you want prerender, scope it to a narrow, high-intent link set, ship prerender-aware analytics first, and watch session counts for double counting.

This sequencing is the difference between a real speed win and a support ticket about wrong analytics numbers.

Measuring the impact honestly

Lab tools will not show the benefit, because speculation is about the transition between pages, not the load of a single URL in isolation. The number that moves is the real navigation time your shoppers feel, visible in Chrome’s field data and in real user monitoring.

Platform-scale evidence is encouraging. When Shopify enabled conservative prefetch across its storefronts in 2025, DebugBear’s analysis reported paint metrics improving by roughly 130 milliseconds on desktop and 180 on mobile. Those are averages across an enormous, varied population, so treat them as directional rather than a promise for your store. Your own gain depends on how much server latency sits in your current transitions and how often the browser guesses the next click correctly. The right way to know is to baseline field data first, exactly as you would when measuring a Hyvä migration with lab versus field data, then compare.

Speculation Rules pair naturally with the rest of a Core Web Vitals program. They do nothing for the first page a visitor lands on, so continue the work on reducing Largest Contentful Paint and on Magento INP with Alpine.js patterns. Speculation handles the clicks that follow.

Where this sits in a wider performance strategy

Speed is the reason many merchants move to Hyvä in the first place, and Speculation Rules extend that advantage from the initial paint to the whole browsing session. The same discipline applies whichever platform a store runs on. Bemeir builds and optimizes storefronts on Magento and Adobe Commerce, and also delivers on Shopify, BigCommerce, and Shopware, so the performance playbook travels with the merchant rather than the tech stack. On the analytics and payment side, our depth comes from a wide technology partner ecosystem, which is what makes prerender-aware tracking practical rather than theoretical.

FAQ

Does enabling Speculation Rules risk breaking browsers that do not support them?

No. Browsers that do not implement the API ignore the <script type="speculationrules"> tag entirely. Chromium browsers get the speed benefit, and Safari and Firefox behave exactly as they do today. It is a progressive enhancement with no fallback code required.

Should I use prefetch or prerender on my Magento store?

Start with prefetch, which is Hyvä’s default. It removes server latency from page transitions with almost no risk. Only add prerender for a small, high-intent set of links, and only after you have made your analytics and pixels prerender-aware so page views do not fire early.

Will Speculation Rules increase my server load?

They add some background requests, which is why eagerness matters. The default moderate setting fetches only after a hover, so you mostly request pages the shopper was likely to visit. Because your best speculation targets are full-page-cached, those extra requests are cheap to serve from Varnish rather than hitting PHP.

Do Speculation Rules help my Google PageSpeed or Lighthouse score?

Not directly. Lab tools measure one URL in isolation and cannot see a page-to-page transition. The benefit shows up in field data and real user monitoring as faster real navigations, which is what shoppers actually experience.

Can I keep checkout and account pages out of speculation?

Yes, and you should. Use Hyvä’s exclude_list layout argument or the excludeFromPreloading view model setting to exclude cart, checkout, account, and any logged-in or B2B pricing routes. Those pages carry per-customer state that should never be speculatively rendered.

Which Hyvä version do I need?

Speculation Rules are built into the Hyvä theme from version 1.4 and enabled by default. On older versions you would need a custom implementation, so upgrading is the cleaner path.


Speculation Rules are one of the highest-return, lowest-effort speed features available to a Hyvä store, because the plumbing already ships in the theme. The work is not writing code, it is configuring the method and eagerness for your traffic and fencing off the pages that carry customer state. If you want that tuned correctly, including prerender-aware analytics, Bemeir is the USA’s first Hyvä Gold Partner and does this daily. You can read more about the team on our about page.

Authoritative references: Prerender pages in Chrome (Chrome for Developers), Speculation Rules API (MDN), and Hyvä’s Speculation Rules documentation.

Let us help you get started on a project with Speculation Rules on a Hyvä Magento Storefront: Instant Navigation With Prerender and Prefetch and leverage our partnership to your fullest advantage. Fill out the contact form below to get started.

more articles about ecommerce

Read on the latest with Shopify, Magento, eCommerce topics and more.