Speculation rules generator

Build a speculation rules JSON script with the rules generator

Arjen Karel
linkedin

Speculation Rules Generator

II am pleased to introduce the 'speculation rules generator'! This new tool lets you build prefetch/preload speculation rules with a user-friendly interface. Optimize website performance – no expert knowledge required.

Speculation rules generator

Speculation rules:

<!-- Add at least one positive rule -->

How to to use the speculation rules generator:

This guide will walk you through the process of building effective speculation rules for your website.

Step 1: choosing Prefetch or Preload

The first step is to decide between Prefetch and Preload behavior for your rule.

Prefetch: Downloads the page in the background but doesn't render it. This is ideal for resources you anticipate users might need soon, but aren't certain about.
Prerender: Downloads and renders the page in the background and renders the html. This is best for resources you're highly confident users will need next, aiming for an instant transition when they click.

Step 2: Specifying Triggers

Triggers define when the speculation rule should activate. You can choose from two options:

Document: The rule activates when the current page's URL matches a specific pattern.
List: The rule activates when the current page's URL is included in a manually defined list of URLs.

Step 3: Setting Eagerness

Eagerness defines the priority level for pre-loading the resource. Here are the options:

immediate: Highest priority, resource is fetched immediately.
eager: Same as immediate (for now)
moderate: Moderate priority, resource might be fetched on hover
conservative: Low priority, resource might be fetched on hover only if the browser has spare resources.

Step 4: Targeting Specific Resources

You can further refine your rules by specifying which resources to pre-load based on two criteria:

Href Matches: Use the + button to add patterns that URLs of resources you want to pre-load must match.
Example: /product/* would target all links within the /product/ directory.
Href Does Not Match: Similar to Href Matches, use + to add patterns that URLs of resources you want to exclude from pre-loading.
Selector Matches: Define CSS selectors that identify specific links page whose that should be pre-loaded.
Example: 'nav a' triggers all links within the site navigation
Selector Does Not Match: Similar to Selector Matches, use + to add CSS selectors that identify links you want to exclude from pre-loading.
Urls: When the source has been set to list all you need to do is provide urls that can be preloaded/prefetched

Step 5: add the speculation rules to your site

Finally, when you are happy with the rules copy then and add then to the <head> section of your site. To test your speculation rules open devtools (Ctrl-shift-i), navigate to the performance tab and choose speculation rules from the left side menu.