Speculation Rules: prefetch and prerender for e-commerce

On an e-commerce site, clicking on a product page takes an average of 800 ms to 2 s before the first display. Speculation Rules allow this time to be brought down to almost zero – by preloading the page even before the user clicks.

The Principle: Anticipate the Next Click

Speculation Rules are a declarative API integrated into Chrome since version 121. They replace the old <link rel="prefetch"> with a more powerful and controllable mechanism. There are two levels of anticipation:

• Prefetch – downloads the HTML and critical sub-resources of the target page. Rendering occurs on click.
• Prerender – goes further: the browser builds the complete DOM in the background. On click, the page displays instantly.

The implementation consists of a JSON block in a <script type="speculationrules"> tag:

<script type="speculationrules">
{
  "prerender": [
    { "where": { "selector_matches": ".product-card a" }, "eagerness": "moderate" }
  ]
}
</script>

The eagerness parameter controls the triggering: conservative waits for hover, moderate anticipates a bit more, eager preloads immediately.

Rayban: One of the First to Deploy in Production

Rayban was among the first brands to integrate Speculation Rules on its PLPs. Their approach – targeting links of product pages visible in the viewport with a eagerness: moderate. Result: PLP → PDP transitions drop below 200 ms of perceived LCP, down from 1.2 s previously.

💡 The choice of moderate is strategic. An eager on a PLP of 48 products would trigger 48 simultaneous prerenders – a disaster for mobile bandwidth. In moderate, Chrome only preloads the links that are hovered over or close to the viewport.

What I Implemented for CHANEL

At CHANEL, the context was different. The site is very visual, with heavy assets – high-resolution images, videos. Full prerendering would have consumed too much bandwidth. We opted for a hybrid approach:

• Prefetch on PLPs for the first 6 visible product pages
• Prerender only in the mega menu – the entries that absorb the majority of navigation on certain axes.

⚠️ Never speculate on pages with user-dependent data (account, cart, checkout)

The measured gain in the field: –380 ms on the median LCP of the affected pages, and a measurable impact on conversions.

When Do Speculation Rules Provide Real Gains?

Not all sites benefit equally. The cases where the gain is most evident:

• PLP → PDP with predictable product pages – the top 3 to 6 results capture the majority of clicks
• Mega menus leading to key categories – the journey is very predictable
• Editorial pages with CTAs leading to fixed landing pages
• Internal search engine – prefetch of the first result

On the other hand, in a multi-step checkout or a product configurator, Speculation Rules provide no benefit. The journey is linear and the next page depends on a server-side form.

Pitfalls to Avoid

Prerendering consumes memory and CPU. Chrome limits to 2 simultaneous prerenders in moderate, 10 in eager. Exceeding these limits does not trigger an error – the old speculations are simply abandoned.

• Never prerender a page with side effects (adding to cart, conversion tracking)
• Monitor the impact on bandwidth via PerformanceObserver with the type speculation-rules
• Test on slow 3G connections – a 500 KB prefetch on limited network can slow down the current page
• Check compatibility: Chrome 121+ only. Safari and Firefox silently ignore the tag.

How to Test Speculation Rules?

To verify the proper functioning of the rules in place, Chrome Devtools is generous with details. In the Application tab, it is possible to see all the rules defined for the current page. During a prefetch or preload, it is recorded in the tab dedicated to Speculative loads. It can be found in Application > Background services > Speculative loads.

Measuring the Real Impact

CrUX does not directly capture speculation gains (it is only possible to see what portion of page views were pre-loaded) – LCP/FCP metrics are measured on the initial load, not on soft navigations. To measure the effect, it is necessary to instrument on the RUM side:

performance.getEntriesByType("navigation").forEach(entry => { if (entry.activationStart > 0) { console.log("Page prerendered, activation delay:", entry.activationStart); } });

The activationStart property is non-null when the page has been prerendered. This is the only reliable way to quantify how many and which navigations benefited from prerendering.

Speculation Rules do not replace traditional optimizations – a poor TTFB remains a poor TTFB, prerender or not. But on a site that is already well optimized, they eliminate the last point of friction: the transition time between pages.