Performance
Speculation Rules for ecommerce: prerender product pages
Speculation Rules for ecommerce are JSON hints that tell Chromium browsers to prefetch or prerender the next catalogue URL, usually a product page, before the shopper clicks. Collection to product is the hop that decides whether a store feels instant or heavy. This note is for Magento, Shopify and WooCommerce catalogues, not for a marketing landing page with one button.
I am Alan Vo, a Gold Coast web developer. Eighteen years of storefronts taught me that LCP on a product page is often lost in the wait after the click, not only in the hero file. Chrome’s prerender pages documentation is the rulebook. This is the store version: which links to speculate, which to exclude, and how not to double-count analytics.
Why Speculation Rules for ecommerce belong on collection pages
Speculation Rules for ecommerce belong on collection pages because that is where the next URL is obvious: a product tile. Home is a mix of campaign, blog and account. Checkout is a POST-shaped flow you must never prerender. PLP to PDP is a GET of a cacheable document with a large image. That is the cheap, high-confidence guess.
Prefetch downloads the HTML (and, depending on the browser, some subresources) and parks it. Prerender goes further: Chrome builds the page in a hidden tab, runs script, and on click swaps that tab into view. The click can look like zero milliseconds of LCP because the paint already happened off-screen. If the prerender is only half done, you still get a head start. That is the point of the API, not a new cache plugin.
WordPress 6.8 shipped speculative loading in core: prefetch with conservative eagerness on the front end, off for logged-in users and for sites without pretty permalinks. Felix Arntz’s speculative loading in 6.8 note cites HTTP Archive and CrUX work on the earlier feature plugin: about a 1.9% lift in LCP passing rate at the median. That is a platform-wide number, not a promise for one SKU. Shopify and Magento do not have the same default. You add a script type="speculationrules" block in the theme, or a Speculation-Rules HTTP header at the CDN, or you do nothing and wait for a hover library that still uses the old rel=prefetch hint.
Safari and Firefox ignore the tag. That is progressive enhancement. Chromium is enough of AU and export traffic that the work still pays. Do not polyfill prerender by fetching every tile on load. You will melt origin and mobile radios.
Their Nibs is a Shopify rebuild I shipped as contract work on an agency team. Published numbers: 31% more conversions, 48% more orders. The lift came from the purchase journey, including collection to product on a phone. Speculation Rules were not that rebuild. They are how I would now spend leftover milliseconds on the same hop.
How Speculation Rules for ecommerce actually work
Speculation Rules for ecommerce actually work as a JSON document the browser reads, not as a WordPress transient and not as a Shopify app embed. Two shapes: a URL list (urls) or document rules (where) that match links already in the page. Lists default to immediate eagerness. Document rules default to conservative. For a collection grid I use document rules. I do not hardcode 48 product URLs that will be wrong after merchandising.
href_matches uses URL Pattern syntax. On Shopify I match /products/* from a collection template. On WooCommerce I match /product/* or the shop permalink structure you actually use. On Magento I match the product path, not catalogsearch and not layered-nav junk. selector_matches is how I mark a small set of tiles as more eager: the first row, a featured card, a mega-menu destination. not excludes cart, checkout, account, logout, add-to-cart query strings, wp-admin, and [rel~=nofollow]. Chrome’s own examples exclude WooCommerce add-to-cart URLs for a reason. A GET that mutates the basket is a bug you must not speculate.
Eagerness is when the guess fires. conservative waits for pointer or touch down (WordPress core default: safest, least time to finish a prerender). moderate is about 200ms hover on desktop, and viewport heuristics on mobile after scroll settles. That is my default on PLP tiles. eager is a much shorter hover (Chrome 143 changed it from “same as immediate”) and viewport entry on mobile: use on one or two high-confidence links, not a 48-tile grid. immediate fires as soon as the rules are seen: URL lists of the next two likely pages, not every product on the PLP.
Chrome caps you. Immediate: 50 prefetches, 10 prerenders. Moderate, eager and conservative: 2 of each, first in first out. Hovering a third tile cancels the oldest. Cacheable bytes can remain in the HTTP cache, so a second hover is cheaper. Data Saver, Energy Saver on low battery, memory pressure, and “Preload pages” turned off (including some content blockers) all skip speculations. Treat the API as a hint.
Same-origin prerender only. Shopify checkout on a separate host will not prerender from the storefront, which is good. Cross-origin iframes stay unloaded until activation. Speculation requests send Sec-Purpose: prefetch or Sec-Purpose: prerender. Origin and CDN can refuse, serve cached HTML only, or skip logging a view. Cloudflare Speed Brain is the CDN-scale version: speculate what is already at the edge, do not stampede origin.
Prefetch first on a store you do not control. Then moderate prerender on PLP to PDP. Chrome’s guide for complex sites is explicit: prefetch is the low-risk rollout WordPress and Cloudflare started with. A common pattern I like: eager prefetch of the two most-clicked products or the next collection, plus moderate prerender on matching product links. By the time someone hovers, HTML is warm and prerender has less work.
Implementation: theme HTML is fine. Tag Manager can inject the JSON if you need a kill switch. HTTP header is how a CDN ships rules without a theme release. WordPress: wp_speculation_rules_configuration to move from prefetch/conservative toward prerender/moderate on the shop, and wp_speculation_rules_href_exclude_paths for cart and checkout. Logged-in HTML is personalised. Leave core’s logged-in off switch alone.
The prerendered document runs JavaScript. That is the win and the risk. Mini-cart counts, GTM, chat, and consent banners all want to fire. Google Analytics 4 is prerender-aware and waits for activation. Your custom page_view in GTM may not be. Guard with document.prerendering and the prerenderingchange event, or delay the container until activation. Consent Mode defaults still belong in the first bytes of the real navigation. Do not treat a hidden prerender as a granted marketing hit.
Production checklist for Speculation Rules for ecommerce
- Draw the hop: collection to product, home to collection, search to product. Rank by sessions, not by which template is easiest.
- Confirm those PDPs are cacheable anonymous GET. If every product HTML is
Cache-Control: private, no-store, prerender is an origin tax. See hosting, cache and CDN for WordPress stores for the bypass list. The same idea applies on Magento FPC and Shopify’s CDN. - Ship prefetch with
moderateor keep WordPress conservative prefetch for a week. Watch origin 5xx and CDN miss rate. - Add document-rule prerender on product links only. Exclude cart, checkout, account, logout, add-to-cart, wishlist, and any URL that sets cookies as a GET.
- Give the LCP image on the PDP a real
fetchpriority, dimensions and a modern format so the hidden prerender actually paints. Details in image formats that improve LCP on catalogues. - Guard analytics and ads: GA4 is usually safe. Custom pixels, chat, and heatmaps wait for
prerenderingchangeor forvisibilityState. Purchase tags stay on the success page, which you do not prerender. - After add-to-cart, refresh or cancel in-flight prerenders so the next PDP does not show a stale basket count. Chrome supports
Clear-Site-Dataon the add-to-cart response for this class of bug. - Do not prerender checkout, pay, or order-received. Do not prerender Magento customer or Shopify account. Do not prerender filtered facet URLs you would not cache.
- Test in Chrome with DevTools speculation rules (Application or the dedicated panel in current Chrome). Confirm
Sec-Purposeon the PDP request. Confirm a second browser without Chromium still shops normally. - Measure field LCP and INP on PLP and PDP, split by navigation type if your RUM allows it. Do not use a Lighthouse run of an isolated PDP as proof.
What breaks Speculation Rules for ecommerce
Speculation Rules for ecommerce break first on side-effect URLs. Prefetching /logout, a Magento add-to-cart GET, or a “start session” link will log people out or fill carts they never clicked. If your platform still mutates state on GET, exclude those paths before you enable anything.
Stale basket UI is the second break. The shopper adds a sofa on Skanvi, then opens a prerendered lamp PDP that still says zero in the header. Multiple tabs have always had this bug. Prerender makes it feel like your site lied. Update via Broadcast Channel, refetch the count on activation, or cancel prerenders after ATC.
Analytics double-counts if a pixel is not prerender-aware. You will “gain” view_item on products nobody opened. Media will love the chart until you explain it. Server-side logging of Sec-Purpose is how you see waste. Client-side, activationStart on the navigation timing entry tells you the page was prerendered.
Origin overload is the third. Eager prerender of a 2MB uncached Magento PDP from every PLP session will raise PHP workers and make the current collection slower. The API is supposed to improve performance. If INP on the PLP gets worse, you speculated too much. Cache at the edge. Limit to moderate. Prefetch HTML only until the PDP is cheap.
Personalised HTML: geo banners, logged-in prices, B2B nets. Prerendering the anonymous document and then activating it for a logged-in user is a wrong price. Keep prerender on guest catalogue. Disable for customer group HTML, or vary cache keys and do not speculate across them.
Overlays that run during prerender: cookie walls, chat, age gates. Some APIs are deferred by Chrome until activation. Some are not and cancel the prerender. If DevTools says the speculation was cancelled, read the reason before you add more URLs.
Shopify app embeds and Magento modules that boot on every storefront URL will run twice unless they wait: once hidden, once visible. That is an INP problem on activation. Delay non-critical JS the same way you would for deferring third-party tags. Checkout stays out of the rules. The JS diet for pay pages is in reduce JavaScript on checkout pages.
Keep HTML cache keys on host, path and cookie bypass. Do not store prerendered account HTML.
How to measure Speculation Rules for ecommerce
You measure Speculation Rules for ecommerce with field LCP on product URLs, the share of prerender activations, and origin load, not with a lab screenshot of a collection. CrUX can show navigation types (prerender, navigate_cache, ordinary navigate). Origin-level LCP may barely move if most sessions are ads landing on a PDP with no prior PLP. RUM that splits same-origin navigations is the honest view.
On the destination page, document.prerendering is true while hidden. After activation, performance.getEntriesByType("navigation")[0].activationStart is greater than zero if the load was a prerender. Log that server-side. GA4 will not always show you attempts that never activated, because it waits. Waste (prerender started, click never came) needs your own beacon or Sec-Purpose logs.
Compare PDP LCP for prerendered activations against normal navigations for the same template. Near-zero LCP on activation is expected when the hidden page finished. If activation LCP is still 2.5s, the prerender did not finish, or the LCP image was lazy-loaded, or a slider hid the hero until JS. Fix the PDP document. Rules cannot rescue a 3MB PNG.
Watch PLP INP and TTFB while you roll out. Extra prerenders compete with the page the shopper is still looking at. If filter clicks get worse, drop from prerender to prefetch, or from eager to moderate. Chromium vs Safari conversion is a sanity check, not a causal study. Do not ship a “Speculation Rules lifted conversion 12%” slide unless you ran a holdback. Their Nibs numbers are rebuild numbers. Use those only as proof that the PLP to PDP hop matters.
Related work on this site
Collection to product is the journey on Their Nibs, a Shopify fashion and sleepwear storefront where the published lift was conversion and orders after a rebuild, and on Tamannaah Fine Jewellery, Shopify Plus jewellery where the tile is the product. Skanvi is WooCommerce furniture: editorial catalogue, large stills, a first-order path. Those PDPs are the documents I would prerender from the grid, after the HTML is cacheable and the hero is a sized AVIF. Metric context sits in Core Web Vitals and INP for online stores.
Speculation Rules for ecommerce FAQ
What are Speculation Rules for ecommerce in practice?
Speculation Rules for ecommerce in practice are a JSON block (or HTTP header) that tells Chrome to prefetch or prerender product URLs from a collection before the click. Prefetch warms HTML. Prerender paints the PDP in the background. Cart, checkout and logout stay off the list.
Do Speculation Rules for ecommerce work in Safari?
Speculation Rules for ecommerce do not run in Safari or Firefox today. Those browsers ignore the script. Chromium users get the faster hop. Everyone else gets the same store as before. That is acceptable. Do not build a custom prefetch of every tile to “match” Safari.
Will Speculation Rules for ecommerce break GA4 ecommerce events?
Speculation Rules for ecommerce can break custom pixels that fire on load. GA4’s own library waits for prerender activation. Your GTM view_item tag might not. Guard with document.prerendering and prerenderingchange, and keep purchase on a page you never prerender. Event design is in GA4 ecommerce events.
Should WordPress stores leave core Speculation Rules for ecommerce on default?
WordPress core defaults to prefetch and conservative eagerness, which is a safe start. On a WooCommerce shop I then exclude cart and add-to-cart, confirm anonymous HTML is cached, and move product links to prerender with moderate eagerness. Logged-in users stay out. Pretty permalinks stay on. The filter is wp_speculation_rules_configuration.
Keep reading
Contact if you want this kind of work on a live store.