The Browser API for Instant Page Loads (Zero JavaScript Required)

There is a JavaScript library called instant.page that has been popular for years. It watches where the user's mouse hovers and prefetches the link target, so when they click, the page loads faster. It works reasonably well. It also adds JavaScript to your site, increases your bundle size, and requires maintenance.

The Speculation Rules API does the same thing — better — with zero JavaScript. It is a browser-native feature that tells Chrome, Edge, and other Chromium browsers to prerender entire pages before the user clicks. Not prefetch the HTML. Prerender — execute the full page lifecycle including CSS, images, and layout — so that when the user clicks, the navigation is instant.

After deploying Speculation Rules across 52 websites, our internal navigation times dropped to effectively zero. The page is already rendered before the click happens.

How Speculation Rules Work

The Speculation Rules API uses a JSON configuration block in your HTML that tells the browser which pages to prerender or prefetch, and under what conditions.

The simplest implementation:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }
  ]
}

This tells the browser: prerender any same-origin link that the user is likely to click, with moderate eagerness. The browser uses its own heuristics — hover duration, pointer position, link prominence — to decide which links to prerender and when.

The eagerness parameter controls how aggressively the browser prerenders:

• conservative: Only prerender when the user clicks (similar to traditional prefetch, but with full prerendering)
• moderate: Prerender when the user hovers over a link for 200ms or more, or on pointer down
• eager: Prerender as soon as the link is visible in the viewport

For most content sites, moderate is the right choice. It prerenders pages the user is likely to click without wasting bandwidth on pages they are just scrolling past.

Why This Beats JavaScript Prefetching

The JavaScript approach — libraries like instant.page or quicklink — prefetches the HTML document when the user hovers. This reduces the initial HTML load time but does not help with CSS parsing, image decoding, JavaScript execution, or layout calculation. The page still needs to do all of that work after the click.

Speculation Rules prerender the page completely. The browser executes the full page lifecycle in a hidden tab: fetches HTML, parses CSS, decodes images, calculates layout, runs any scripts. When the user clicks, the browser simply swaps the prerendered tab into the foreground. The visual transition is instant — not fast, instant.

The difference is measurable. On our network:

• JavaScript prefetching reduced perceived navigation time from ~800ms to ~400ms
• Speculation Rules prerendering reduced perceived navigation time from ~800ms to under 50ms

That sub-50ms navigation is not a theoretical benchmark. It is the measured time from click to complete visual render on a prerendered page. The user perceives it as instantaneous because it is below the threshold of human perception for latency.

Implementation on Static Sites

For static sites built with Eleventy, Hugo, or Astro, the implementation requires adding a single <script> block to your base template. No build tools, no npm packages, no configuration files.

Step 1: Add the speculation rules block to your base template.

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/downloads/*" } },
          { "not": { "selector_matches": ".no-prerender" } }
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "where": { "href_matches": "/*" },
      "eagerness": "conservative"
    }
  ]
}
</script>

This configuration prerenders same-origin links on hover (moderate eagerness), excludes download pages that would trigger file downloads, and falls back to prefetching for pages the user has not hovered over yet.

Step 2: Exclude pages that should not be prerendered. Add the no-prerender class to any links that trigger side effects — logout links, form submission links, or links to pages that execute actions on load. Prerendering these could cause unintended behavior.

Step 3: Deploy and verify. Open Chrome DevTools, navigate to the Application panel, and check the "Speculative loads" section. It shows which pages have been prerendered, their status, and whether any rules were rejected.

Step 4: Monitor bandwidth. Prerendering uses more bandwidth than standard navigation because the browser downloads full pages speculatively. For content sites with small page sizes (under 500KB), this is negligible. For sites with large media files, consider using prefetch instead of prerender for media-heavy pages.

Combining with View Transitions

Speculation Rules and the View Transitions API are complementary technologies. View Transitions provide smooth visual animations between pages. Speculation Rules ensure the target page is already rendered when the transition begins.

Combined, the effect is remarkable: the user clicks a link, sees a smooth crossfade animation, and the new page appears fully rendered — no loading state, no layout shift, no progressive rendering. The experience is indistinguishable from a native mobile application.

Deploying both required two additions to our shared base template: one CSS rule for view transitions and one script block for speculation rules. Total implementation time across 52 sites: under 45 minutes.

Browser Support and Progressive Enhancement

Speculation Rules are currently supported in Chrome 109+, Edge 109+, Opera 95+, and Samsung Internet. As of April 2026, this covers approximately 68% of global browser traffic. Safari and Firefox do not yet support Speculation Rules.

Like the View Transitions API, Speculation Rules are pure progressive enhancement. Browsers that do not support them simply ignore the <script type="speculationrules"> block entirely. There is no error, no fallback needed, no polyfill. Users on unsupported browsers get standard navigation behavior — the same experience they have always had.

This means deployment risk is zero. You cannot break anything by adding Speculation Rules. The worst case is that some users do not get the benefit. The best case is that 68% of your visitors experience instant page loads.

Performance Data from 52 Sites

After six weeks of deployment across our network, the performance data was consistent:

• Largest Contentful Paint (LCP) on prerendered navigations averaged 0.2 seconds — effectively instant
• Cumulative Layout Shift (CLS) dropped to 0.00 on prerendered pages because the full layout was calculated before the page was displayed
• Pages per session increased 15% as users navigated more freely when every click was instant
• Core Web Vitals pass rate improved from 89% to 97% across the network

The bandwidth cost was modest. Average additional data transfer per session increased by approximately 1.2MB — the equivalent of prerendering 2-3 pages that the user hovered over but did not click. On modern connections, this is imperceptible.

The Strategic Argument

Page speed has diminishing returns in traditional optimization. Once your site scores 95+ on Lighthouse, squeezing out the last few milliseconds requires significant engineering effort for minimal perceptible improvement.

Speculation Rules sidestep this entirely. Instead of making page generation faster, they eliminate the wait entirely by doing the work before the user needs it. The page is ready before the click. The optimization is not "faster" — it is "already done."

For content sites competing with app-like experiences from platforms with engineering teams of hundreds, Speculation Rules level the playing field. A static site with Speculation Rules and View Transitions provides a navigation experience that is objectively faster and smoother than most React-based applications — with zero JavaScript framework overhead.

---

Every site in our network uses Speculation Rules for instant navigation — part of the performance stack that makes $0/month hosting outperform $500/month platforms. Get it on Amazon. For the complete performance optimization guide across a multi-site network, see The $100 Network.