Speculation Rules
Prerender the next page in the background so navigation feels instant.
Metrics
This technique can move up to 100% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 100% of FCP's share of the Lighthouse score.
This technique can move up to 100% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
The Speculation Rules API lets the browser silently prerender entire pages the user is likely to navigate to — executing all HTML, CSS, and JavaScript in a hidden tab before the user clicks. When they do click, the prerendered page activates in milliseconds: LCP drops to near zero because all rendering completed in the background. For sites with predictable navigation paths — blog post → next post, product listing → product page — prerendering delivers the most dramatic perceived-performance improvement available.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
Even a perfectly optimised page still takes 1–3 seconds to load on the first visit — network latency, HTML parsing, CSS, and JavaScript are unavoidable costs. These costs are paid on every navigation. Prefetch addresses bandwidth by pre-downloading HTML, but the browser still parses and renders on click. Prerender completes the full page lifecycle before the click — the activate step is essentially free.
Performance Impact
LCP
1000–3000ms
full page already rendered — activation is near-instant
FCP
800–2500ms
first contentful paint already happened in background
SI
800–2000ms
entire viewport already composited before navigation
TTFB
+50–200ms
eager prefetching consumes bandwidth on constrained connections, delaying real navigations
Risk: Medium
uses bandwidth and CPU speculatively — limit to high-confidence predictions
How it works
01
Add a Speculation Rules script tag
Include a
<script type="speculationrules">block containing a JSON object that declares which URLs to prerender or prefetch. The browser processes this in the background without blocking the current page.02
Use document_rules for link-based prerendering
Instead of listing URLs explicitly, use
document_ruleswith aselector_matchescondition to prerender any link matching a CSS selector. For example, prerender all links matching.post-card awhen the user hovers.03
Set eagerness to control when prerendering starts
"eagerness": "conservative"— prerender only on mousedown (very late, low waste)."moderate"— prerender on hover for 200ms+."eager"— prerender as soon as links are in the viewport. Start with conservative and tune upward.04
Exclude pages that must not be prerendered
Checkout pages, logout URLs, one-time-token links, and any page with side effects on load must be excluded. Use the
No-Vary-Searchheader or anotcondition in the rules to exclude URL patterns that should not be pre-executed.
Limitations
- Prerendering consumes CPU and bandwidth for pages the user may never visit — use conservative eagerness and limit rules to high-probability navigations.
- Pages with server-side side effects on load (incrementing view counters, setting cookies, logging analytics) will execute those side effects during prerender, not on activation.
- Currently Chrome/Edge only — Firefox and Safari users receive no benefit. This is an enhancement, not a baseline requirement.
Common Mistakes
Using eager prerendering for all links on the page
Prerendering every link on a page listing with 20 posts means 20 hidden page loads — wasting bandwidth and potentially server resources. Start with selector rules targeting only the most likely next page (next post, featured link).
Prerendering checkout or authenticated pages
Prerendering a checkout page pre-processes the cart and session before the user intends to proceed. Exclude all transactional, authenticated, and destructive URLs using not conditions or Opt-Out headers.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement