IconVault logoIconVault
Sign in

Speculation Rules - Interactive Lab | IconVault

Build prerender and prefetch speculation rules JSON with eagerness levels. Free, runs fully in your browser.

All tools

Speculation Rules

Prerender and prefetch rules builder

5 of 5 free uses left

Speculation Rules let the browser prerender or prefetch pages before the user clicks. Supported in Chrome and Edge 109+. Firefox and Safari ignore the block safely, so it degrades gracefully. Prerender is powerful but costly, so keep rules tight.

Eagerness

Speculate on hover after a short delay (Chrome default for prerender).

Source

Matches same-origin links in the document. Use /docs/* style globs, and set the tag to <a rel="no-prerender"> on links to exclude.

Eagerness

Speculate on hover. Great for nav menus and obvious links.

Source

Generated JSON

{
  "prerender": [
    {
      "eagerness": "moderate",
      "source": "document",
      "where": {
        "href_matches": "/products/*"
      }
    }
  ],
  "prefetch": [
    {
      "eagerness": "eager",
      "source": "list",
      "urls": [
        "/pricing",
        "/about"
      ]
    }
  ]
}

5 of 5 free uses left.

Embed in your page

<script type="speculationrules">
{
  "prerender": [
    {
      "eagerness": "moderate",
      "source": "document",
      "where": {
        "href_matches": "/products/*"
      }
    }
  ],
  "prefetch": [
    {
      "eagerness": "eager",
      "source": "list",
      "urls": [
        "/pricing",
        "/about"
      ]
    }
  ]
}
</script>

About this tool

IconVault's Speculation Rules builder turns guesswork into copy-ready JSON. Pick prerender or prefetch, set an eagerness level from immediate to conservative, and add URL lists or document `where` patterns with `href_matches` globs. The live preview shows exactly what the browser will parse, and one click copies the `<script type="speculationrules">` embed block for your page.

Everything is free and runs fully in your browser: no signup, no server, your rules never leave the device. Prerendering makes the next navigation feel instant, and this lab helps you keep the rules tight so you only speculate on pages users actually visit.

Frequently asked questions

Popular searches

speculation rulesspeculation rules builderspeculationrules jsonprerender pagesprefetch pagesspeculation rules generatorprerender next pageinstant page navigationchrome prerendereagerness levelswhat are speculation ruleshow to use speculation rulesspeculation rules exampleprerender vs prefetchspeculation rules syntaxscript type speculationruleshref_matcheswhere href_matchesno-prerenderrel no-prerenderdocument ruleslist source speculationprerender on hoverprefetch on hoverspeculation rules chromespeculation rules edgefirefox speculation rulessafari speculation rulesinstant navigation browserprerender apiprefetch apipage speed prerenderreduce navigation delayspeculative loadingspeculative loading apiprerender pages chromehow to prerender pagesprerender htmlprefetch html pagesspeculation rules tutorialspeculation rules json examplebuild speculation rulesspeculation rules onlinefree speculation rules toolprerender builderprefetch builderwebsite instant loadnext page instantpreload next pagespeculation rules best practicesprerender performance costwhen to prerenderprerender vs prefetch vs preload

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →