Speculation Rules Generator

<script type="speculationrules">
{}
</script>

What are Speculation Rules?

Speculation rules are guidelines that tell the browser to load certain pages or resources in advance, based on what the user is likely to click on next. This helps speed up browsing by preparing content before it's actually needed. For example, the browser can prefetch a page (loading the basic content) or prerender it (fully loading the page, including images and scripts). This makes navigating to the next page feel almost instant, improving the overall user experience.

Prefetch vs Prerender

Prefetch: Loads basic content (HTML) without images, scripts, or styles. It's lighter on resources and speeds up loading when the page is visited.

Prerender: Fully loads the page with all elements (images, scripts, styles). It uses more resources but provides an instant experience when the user navigates to the page.

Immediate vs Moderate vs Conservative

Immediate: Begins loading resources as soon as speculation rules are triggered. Fastest option but uses more resources upfront, ideal for high-confidence navigation.

Moderate: Starts loading after a 200ms hover or on pointerdown. Balances speed and resource efficiency, suitable for links the user is likely to click soon.

Conservative: Loads only when the user touches or clicks a link. Conserves resources but slower to load, best for less certain navigation.

How to add Speculation Rules to WordPress

Go to Appearance > Theme File Editor, open header.php, and add your speculation rules code just before the </head>tag. Alternatively, install the Code Snippets plugin, create a new snippet with your code, set it to run in the header, and save the changes.

How to verify Speculation Rules are working

Open Chrome Developer Tools by right-clicking and selecting Inspect, then navigate to the Application tab.