consolelog.tools

Speculation Rules Generator

Build the modern <script type="speculationrules"> JSON that powers instant navigations — prefetch or fully prerender whole pages, with list rules, document rules (href + selector matching), and per-rule eagerness. Live audit, an eagerness reference, and export as a <script> block, an external JSON file, or an HTTP header.

About this ToolHow it works, benefits & use cases

The Speculation Rules Generator builds the modern `<script type="speculationrules">` JSON that turns ordinary clicks into instant navigations. Unlike the older `<link rel="prefetch">` resource hint, the Speculation Rules API prefetches and even fully prerenders whole destination pages — running their HTML, CSS, and JavaScript in a hidden tab — so when a visitor clicks, the next page appears immediately. You compose rules visually: pick prefetch or prerender, choose between a list rule (an explicit set of URLs) or a document rule (links matched live by URL pattern and CSS selector), and set an eagerness level that tells the browser how aggressively to act on a user signal. Each eagerness option — immediate, eager, moderate, and conservative — is explained inline so you can balance speed against wasted bandwidth. The tool groups your rules into a valid spec object keyed by action, supports the cross-origin anonymization flag, and exports three ways: a copy-ready `<script>` block, an external JSON rules file, or an HTTP `Speculation-Rules` header pointing at that file. A live audit panel warns you about resource-heavy combinations and reminds you that prerendered pages run analytics, while an eagerness reference card keeps the heuristics one glance away.

How to Use

  1. 1Add a rule, then toggle its action between Prefetch (fetch the response) and Prerender (fully render the page for instant activation).
  2. 2Choose the source: a List rule for an explicit set of URLs, or a Document rule that matches links on the page by URL pattern and CSS selector.
  3. 3Pick an eagerness — immediate, eager, moderate, or conservative — using the inline explanations to trade off speed against wasted speculation.
  4. 4For list rules, add one or more destination URLs; for document rules, add href_matches patterns (e.g. /*) and optional selector_matches (e.g. nav a).
  5. 5Enable "anonymous client IP when cross-origin" for cross-origin prefetches that should be routed through a privacy proxy, and load a preset to start fast.
  6. 6Switch the export format to a <script> block, an external JSON file, or an HTTP header, then copy, download, share, or pipe the output.

Key Benefits

  • Generates valid Speculation Rules JSON grouped by prefetch and prerender automatically
  • Visual builder for both list rules (explicit URLs) and document rules (href + selector matching)
  • Inline eagerness guidance (immediate / eager / moderate / conservative) so you choose the right heuristic
  • Live audit warns about resource-heavy immediate prerenders and analytics double-counting
  • Three export formats: inline <script>, external JSON file, and an HTTP Speculation-Rules header
  • Cross-origin anonymization support via the anonymous-client-ip-when-cross-origin requirement
  • Runs entirely in your browser with a shareable URL and pipe-to-tool output

Common Use Cases

  • Making top-navigation and pagination links activate instantly with a document prerender rule
  • Prefetching the likely next step of a funnel (cart, checkout) before the user clicks
  • Speeding up a content site where most readers move to the next article
  • Prerendering a single high-intent landing page with immediate eagerness
  • Adding conservative pointerdown speculation to high-traffic links without wasting bandwidth

Drop into your HTML — anywhere on the page

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": [
        "/page/2",
        "/checkout"
      ],
      "eagerness": "immediate"
    }
  ],
  "prerender": [
    {
      "source": "document",
      "eagerness": "moderate",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          }
        ]
      }
    }
  ]
}
</script>

Eagerness reference

  • immediate

    Speculate as soon as the rules are seen — no user signal needed. Most aggressive; use sparingly.

  • eager

    Start on the slightest hint of intent (hovering near a link, scrolling toward it).

  • moderate

    Speculate on pointerdown, or after hovering a link for ~200ms. The sweet spot for most links.

  • conservative

    Only on pointerdown (the click is essentially committed). Lowest waste, smallest head-start.

  • Prerender runs the destination page fully, including its JavaScript and analytics. Guard one-time effects with the Page Visibility API / prerenderingchange event so a prerendered visit is not double-counted.
  • Document rules with "moderate" eagerness speculate on hover/pointerdown — an excellent default that scales to every matching link without speculating the whole page set up front.

Rules (2)

Rule 1document

moderate — Speculate on pointerdown, or after hovering a link for ~200ms. The sweet spot for most links.

href_matches patterns
selector_matches (optional)

None — add at least one to make this rule active.

Rule 2list

immediate — Speculate as soon as the rules are seen — no user signal needed. Most aggressive; use sparingly.

URLs

Presets

Beyond <link rel="prefetch">

Resource hints like <link rel="prefetch"> warm the cache for a single file. The Speculation Rules API works at the navigation level: it can prefetch a whole page’s response, or fully prerender it — running its HTML, CSS, and JavaScript in a hidden tab — so a click activates an already-rendered page instantly. List rules speculate explicit URLs; document rules match links live by href_matches and selector_matches. The eagerness level decides how aggressively the browser acts on user intent.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools