Speculative Loading in WordPress 6.8

Now that WordPress 6.8 has been around for a little over a month, I’ve had a chance to dive into some of the features it added. One that I found most interesting, and quite powerful, is Speculative Loading.

What is Speculative Loading?

Speculative loading is a browser optimization that predicts your next move. It secretly pre-fetches or even pre-renders upcoming pages in the background. So, when you click a link, the content is already there, leading to near-instantaneous page loads.

A quick heads-up: At the time of writing, this feature is only available in Chromium-based browsers (like Google Chrome, Microsoft Edge, Brave, etc.). You can keep up to see when those other browers will have it here.

The Defaults

WordPress 6.8 enables speculative loading by default, which is awesome! It’s set up to benefit logged-out users on sites with pretty permalinks. This gives a great performance boost without interfering with admin experiences.

The default behavior uses a prefetch strategy with a conservative eagerness:

Strategy: prefetch: The browser downloads the necessary resources (HTML, CSS, JavaScript) for potential next pages, but doesn’t fully build them. It’s less resource-intensive than prerender and a solid starting point.
Eagerness: conservative: Speculation only happens when your mouse hovers over a link, and only if your browser has plenty of spare network and CPU resources. This prevents excessive pre-fetching and keeps things smooth.
Targeting: It primarily targets internal links within your site, keeping the focus on improving your own site’s navigation flow.

This default aims for a noticeable speed improvement without overwhelming your server or visitor’s devices.

How to Update the Default Settings

WordPress gives us a filter to jump into and customize these settings. Here’s the code I use that you can add to your functions.php file:

function my_custom_speculation_rules_config( array $config ): array {
    // Set the mode for speculation rules.
    // Other options for 'mode' include:
    // - 'prefetch': Fetches the resource in the background.
    // - 'no-op': Does nothing.
    $config['mode'] = 'prerender';

    // Set the eagerness for speculation rules.
    // Other options for 'eagerness' include:
    // - 'eager': Speculate on all eligible links on the current page.
    // - 'conservative': Speculate only on the first eligible link in the viewport.
    // - 'strict': Speculate only on eligible links that are likely to be clicked.
    $config['eagerness'] = 'moderate';

    return $config;
}
add_filter( 'wp_speculation_rules_configuration', 'my_custom_speculation_rules_config' );

When you use the wp_speculation_rules_configuration filter, you’re primarily adjusting two aspects: the mode (what the browser does) and the eagerness (when it does it).

`mode` Options: What the Browser Does

'prerender': This is the most aggressive and fastest option. The browser downloads and renders the entire page in a hidden background tab. Ideal for near-instant loads where you’re very confident the user will click. It uses more resources, so use wisely!
'prefetch' (WordPress Default): Downloads resources but doesn’t render the page. A great balance of speed and resource usage. Pages load much faster as assets are cached.
'no-op': Essentially turns off speculative loading. Useful if you run into any issues or want to disable it completely.

`eagerness` Options: When the Browser Acts

'eager': Speculation begins for all eligible links as soon as the page loads, no user interaction needed. Max speed, but highest resource use.
'moderate' (My Recommendation): Triggers speculation with a “strong signal” of user intent, like hovering over a link for a short time or starting a click (pointerdown). A fantastic balance.
'conservative' (WordPress Default): Only acts when the browser is completely idle and has ample resources, usually on a link hover. Very cautious.
'strict': Even more restrictive than conservative, triggering only on very strong, specific signals. Good for extremely resource-sensitive situations.

I typically set the mode to 'prerender' and the eagerness to 'moderate' for my sites. (It’s worth noting that I’m often building mostly static sites where this more aggressive approach works great. Always consider your own site’s complexity and server resources when choosing your settings!)

Further Considerations

Sometimes, you might want to exclude certain pages from speculative loading, like your shopping cart or checkout. This prevents unnecessary pre-fetching of sensitive or dynamic areas.

You can do this using the wp_speculation_rules_href_exclude_paths filter:

add_filter(
    'wp_speculation_rules_href_exclude_paths',
    function ( $href_exclude_paths ) {
        $href_exclude_paths[] = '/cart/*'; // Exclude all paths starting with /cart/
        // Add more paths if needed, e.g., $href_exclude_paths[] = '/checkout/';
        return $href_exclude_paths;
    }
);

This ensures those specific pages load only when explicitly requested.

My Takeaway

Speculative loading in WordPress 6.8 is a fantastic step forward for site performance. By understanding and configuring these settings, you can really make your site feel snappy and responsive.

For more in-depth technical details, check out these helpful links: