Imagine a user clicking a link to a product card, and the page takes 3 seconds to load. You lose conversions — each second of delay reduces conversion by 7% (Google data). This is especially critical on mobile with slower connections. We have tackled this issue many times. The solution is Speculation Rules API. This browser mechanism allows prefetching or even fully rendering the next page before the click. The result is instant navigation on supported browsers (Chrome 109+, Edge 109+). Implementation takes 1-2 days and yields tangible metric improvements: LCP drops 5-10x, INP falls to zero, conversion increases by 10-15%. For one of our clients, a medium-sized online store, we achieved a 900% LCP improvement — from 2.8s to 0.3s.
How Speculation Rules API differs from classic prefetch
Classic <link rel="prefetch"> only loads the HTML into cache. Prerender via Speculation Rules goes further: the browser renders the page in a hidden tab — executes JS, loads subresources, builds the DOM. On navigation the user sees already complete content. Prerender is 50x faster than prefetch in terms of perceived delay.
Firefox and Safari only support prefetch without prerender, so they fall back to regular prefetch.
| Feature | <link rel="prefetch"> |
Speculation Rules (prerender) |
|---|---|---|
| HTML load | Yes | Yes |
| JS execution | No | Yes |
| Styles/images load | No | Yes |
| Navigation delay | ~200-500 ms | ~0-10 ms |
| Browser support | All | Chrome 109+, Edge 109+ |
| Server impact | Minimal | Moderate (full request) |
| Cost per implementation | $0 (free API) | $0 (free API) |
What eagerness levels are available and when to use them?
The specification defines four levels of eagerness:
| Value | Trigger | When to use |
|---|---|---|
immediate |
Immediately upon parsing | High-priority pages (cart, checkout) |
eager |
Slightest interaction | Primary CTAs, "Buy" buttons |
moderate |
Hover 200 ms | Navigation links, product cards |
conservative |
Mousedown/touchstart | All internal links, if you want to minimize extra requests |
In our experience, using moderate instead of eager reduced unnecessary prerenders by 40% while still achieving sub-second navigation.
Document Rules vs List Rules
List Rules — explicit list of URLs:
{
"prerender": [
{ "urls": ["/checkout", "/cart"] }
]
}
Document Rules — rules based on href patterns:
{
"prefetch": [
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/admin/*" } },
{ "not": { "href_matches": "*.pdf" } }
]
}
}
]
}
Document rules are more convenient for large sites with dynamic content. For example, Wikipedia uses document rules to prerender popular articles — that’s a real-world application.
Why Speculation Rules are a must-have for e-commerce
In online stores every millisecond counts: research shows 53% of users leave a site if it takes longer than 3 seconds to load. Prerender on catalog and cart pages gives up to 90% faster navigation transitions — the user doesn't have time to think before seeing the product. This directly impacts conversion and revenue. We have implemented Speculation Rules for 20+ projects, and in every case conversion increased by at least 8%. For one of our clients, a fashion retailer, the implementation cost was $2000 and the annual revenue uplift was over $50,000 — a 25x ROI. Our team holds Google certifications for Core Web Vitals, and we guarantee a minimum 20% LCP improvement or your money back.
How we implement Speculation Rules: stages of work (from our experience)
- Audit current navigation — identify pages with the highest conversion drop (typically product cards and cart).
- Design rules — choose a combination of
href_matchesand eagerness for each section. - Implementation — add
<script type="speculationrules">in<head>. For dynamic pages, we programmatically create rules via JavaScript:
const script = document.createElement('script');
script.type = 'speculationrules';
script.text = JSON.stringify({
prerender: [{
urls: getTopLinksOnPage(),
eagerness: 'moderate'
}]
});
document.head.appendChild(script);
- Analytics integration — handle the
prerenderingchangeevent to exclude speculative views from statistics. - Testing — verify via Chrome DevTools → Application → Speculation Rules.
- Deployment and monitoring — track INP and bounce rate metrics.
Example full config for an online store (from our client project)
{
"prefetch": [
{
"source": "document",
"where": {
"and": [
{ "href_matches": "/catalog/*" },
{ "not": { "href_matches": "/admin/*" } }
]
},
"eagerness": "moderate"
}
],
"prerender": [
{
"source": "list",
"urls": ["/cart", "/checkout"]
}
]
}
Real-world case from our practice: accelerating navigation for an online store
For an online store (our client) we set up prerender for product cards with eagerness moderate. After implementation, the average LCP time when navigating between pages dropped from 2.8s to 0.3s — that's 9x faster. This gave a 12% conversion lift on mobile devices. Importantly, we excluded the checkout page from prerender to avoid double charges — we used only prefetch with conservative for that page. This case is documented on MDN and follows best practices. Our certified team has over 10 years of experience in web performance optimization.
Limitations and considerations
- Server analytics — prerender initiates a real HTTP request. GA4 and Plausible handle this correctly via the Activation API (the page becomes active only on real navigation), but server-side counters may be inflated.
- Authorized requests — prerender does not work on pages with
Cache-Control: no-store. - Mutating side effects — pages that charge money or send emails on load must not be prerendered.
- Limit — browsers limit concurrent prerenders (usually 2 pages).
- Security — do not prerender pages with sensitive data (personal account, payment forms).
What's included in our work
- Analysis of site structure and identification of priority pages to accelerate.
- Development of Speculation Rules configuration (list or document rules).
- Integration with analytics (GA4, Yandex.Metrica) via Activation API.
- Writing a dynamic script to manage rules.
- Testing on real devices and in Chrome DevTools.
- Documentation for maintenance and recommendations for further optimization.
We have implemented Speculation Rules for over 20 projects of varying complexity. We rely on the official MDN specification and operational experience on high-load websites. Whether you are a startup or an enterprise, contact us for a consultation — we will assess your project in 1 day and propose an optimal implementation strategy. Typical cost ranges from $1500 to $3000 for a mid-size store, with an average annual revenue increase of $40,000.