v150 · Performance

Speculation Rules Lab

Compose a real <script type="speculationrules"> block, inject it into this page, and see how your choices — prefetch vs prerender, eagerness, and a rule tag — surface in the navigations array returned by getSpeculations().

Injecting the rules is real and works in any Chrome that supports Speculation Rules. Reading them back needs performance.getSpeculations() behind --enable-blink-features=SpeculationMeasurement (or --enable-experimental-web-platform-features) or the origin trial. Without it, the demo shows the exact ruleset you injected as reference — labelled, never faked as a browser read.

checking Speculation Rules support…

Generated <script type="speculationrules">

Set your options and press “Inject speculation rules”.

navigations report

<script type="speculationrules">
{
  "prerender": [
    { "source": "list", "urls": ["/next"], "eagerness": "moderate", "tag": "nav-menu" }
  ]
}
</script>

// After navigations happen, measure which rules paid off:
const { navigations } = performance.getSpeculations();
// → [{ type: 'prerender', url: '/next', tags: ['nav-menu'], eagerness: 'moderate' }]

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗