Speculation rules generator
Build a speculation rules JSON script with the rules generator
Speculation Rules Generator
Your Rules
No rules saved yet.
Output
Add rules above to generate output.
Speculation Rules Generator
This tool builds prefetch and prerender configurations for the Speculation Rules API. Generate optimized JSON for the <head> of your document to improve navigation performance.
Configuration Guide
Follow this process to build valid speculation rules.
Step 1: Select Strategy
Determine how the browser handles the speculated resource:
- Prefetch: Downloads the response body in the background without rendering. Ideal for high-probability resources where memory usage must remain low.
- Prerender: Downloads and fully renders the page (including JavaScript) in a background tab. Provides an instant transition upon navigation.
- Prerender (Until Script): Renders the DOM and CSS but pauses JavaScript execution until the user navigates to the page. Balances render speed with reduced computation costs.
Step 2: Define Triggers
Set the condition that activates the rule:
- Document: Activates when the current page URL matches a defined pattern.
- List: Activates when the current page URL exists within a manually provided list.
Step 3: Set Eagerness
Control the timing and priority of the fetch:
- Immediate: Highest priority. Fetches as soon as the rule is parsed.
- Eager: Identical to immediate (currently acts as an alias).
- Moderate: Triggers on pointer hover (after 200ms) or distinct pointer down events.
- Conservative: Low priority. Triggers only on pointer down or touch start.
Step 4: Target Resources
Filter specific links for preloading using URL patterns or CSS selectors:
- Href Matches: Include URLs matching these wildcard patterns (e.g., /product/* targets all links in the product directory).
- Href Does Not Match: Exclude URLs matching these wildcard patterns.
- Selector Matches: Include links identified by CSS selectors (e.g., .nav-link targets navigation elements).
- Selector Does Not Match: Exclude links identified by these CSS selectors.
- URLs: Specify exact URLs to preload (required only when Source is set to 'List').
Implementation
Copy the generated JSON and place it inside a <script type="speculationrules"> tag in your site's <head>. To verify, open Chrome DevTools (Ctrl+Shift+I), navigate to the Application panel, and select Speculation Rules from the sidebar.
Example Configuration
The following parameters prerender all product pages:
- Mode: Prerender
- Trigger: Document
- Eagerness: Moderate
- Href Matches: /product/*
This rule prerenders URLs within the /product/ directory with moderate priority (hover/interaction) when a user visits a matching page.
