Speculative Loading is a performance optimization technique pioneered by Chrome where a web browser dynamically prerenders or prefetches a URL a user might need next. This results in almost instantaneous load times and helps decrease LCP, INP, and TTFB. It dramatically improves both the user experience and perceived performance (how fast a site feels).
Unlike previous technologies, Speculative Loading is almost entirely powered by the browser. It only adds one or two lines of JS code to your site to determine where and how it should run. There is no third-party library or HTTP request. And compared to other solutions like Instant Page, it’s done with 78% less code.
As of WordPress 6.8, Speculative Loading has been added to core using the Speculation Rules API. This means it will already be running behind the scenes on your site. However, it defaults to a less powerful mode (prefetch), which you can easily change using Perfmatters.
Prefetch vs Prerender
Speculative Loading has two different modes, prefetch and prefetch.
Prefetch
Prefetch downloads resources (e.g., HTML, CSS, JavaScript) in the background that are likely needed for a future page, storing them in the browser’s cache. The resources aren’t processed until the user navigates to the page, reducing load time by fetching assets early.
WordPress 6.8 and higher defaults to prefetch out of the box.
Prerender
Prerender goes a step further than prefetch by also rendering the entire page (or parts of it) in the background, including executing JavaScript and rendering the DOM. The prerendered page is kept in memory, so if the user navigates to it, the page appears instantly.
Prefetch is lighter on CPU/memory since it doesn’t render. And prerender is more resource-intensive. However, prerender will result in faster load times. If you’re curious, we uses prerender on all of our sites.
Browser support
Speculation Rules is supported by ~74% of browsers, including Chrome, Edge, Opera, etc. And this is only going to increase.
Based on Chrome stats, speculative loading is already used on over 8% of Chrome page loads. And Cloudflare has enabled speculative loading at large scale. In fact, Firefox is currently in discussions about adding support.
In other words, Speculative Loading is here to stay, and adoption will only grow. In our opinion, it’s one of the best performance features to come out since Cloudflare’s edge cache.
Deprecating Instant Page in Perfmatters
The Instant Page feature in Perfmatters was a great way to prefetch URLs, and it served us well for many years. However, Speculative Loading is now a better, faster, and lighter method. If you are running WordPress 6.8 or higher, we will automatically disable Instant Page and allow your site to default to the new Speculative Loading feature in core. You don’t need to do anything. However, you can enable prerender in Perfmatters for even faster load times.
How to enable prerender (mode)
Follow the steps below on how to change the Speculative Loading mode from prefetch to prerender in Perfmatters.
Step 1
Click into the Perfmatters plugin settings.
Step 2
Click on the “Preloading” menu.
Step 3
Under the “Speculative Loading” section, change the “Mode” to “Prerender.”
Note: WordPress core defaults to Auto, which results in Prefetch at the moment.
Step 4 (optional)
You can also change the eagerness setting. We usually recommend “Moderate.”
Step 5
Scroll and click “Save Changes.”
How to change eagerness
Follow the steps below to change the eagerness setting for Speculative Loading. Or rather how aggressive the behavior will be.
Step 1
Click into the Perfmatters plugin settings.
Step 2
Click on the “Preloading” menu.
Step 3
Under “Speculative Loading” section, you can change the “Eagerness” setting.
There are four options to choose from: Auto (Default), Conservative, Moderate, and Eager. We usually recommend the “Moderate” option.
Here are some of the pros and cons of each eagerness setting and how they will behave:
Auto
The auto eagerness setting could change over time based on what the WordPress core team deems is best. At this time, Auto will result in the Conservative setting running. However, you can manually change the eagerness setting to ensure it always loads that way.
Conservative (least aggressive)
- Only loads with high confidence.
- Needs strong signals, such as on pointer or touch down.
- Saves resources.
- Best for low bandwidth.
Moderate
- Loads with moderate confidence.
- Uses signals like mouse hover. If you hold the pointer over a link for 200 milliseconds (or on the
pointerdownevent if that is sooner, and on mobile where there is nohoverevent). - Balances speed and efficiency.
- Fits predictable navigation.
Eager (most aggressive)
- Loads with low confidence, as soon as the speculation rules are observed.
- Acts on minimal signals (e.g., page load).
- Uses more resources.
- Best for fast navigation.
Step 4
Scroll down and click “Save Changes.”
How to test Speculative Loading
Speculative Loading works at the browser level, meaning you won’t see the results in regular speed testing tools. However, it does help decrease LCP, INP, and TTFB for your real-user data over time. And it will help improve perceived performance (how fast your site feels).
With that being said, you can test to see if Speculative Loading is running/working on your site using Chrome DevTools. Under the “Application” tab, click on “Background services → Speculative Loads.” You can monitor which URLs are getting prefetch or prerenders, those not triggered, etc. If you are adding exclusions, this can come in handy.
For more troubleshooting, see Chrome’s documentation on debugging speculation rules.
How to add exclusions
One of the great things about Speculative Loading being part of WordPress core is that a lot of the kinks have already been worked out by the WordPress performance team and standalone Speculative Loading plugin. For example, here are a few areas where Speculative Loading is already excluded :
- Disabled by default for logged-in users and for sites that do not use pretty permalinks.
- Certain WordPress core URLs such as
/wp-login.phpare excluded. - Any URLs generated with
wp_nonce_url()(or which contains the_wpnoncequery var) and nofollow links are also ignored. This includes WooCommerce URLs with query parameters like add to cart or remove from cart.
Chrome also has limits to prevent the overuse of Speculative Loading. And it respects features like Energy saver when enabled and on low battery. If that is on, nothing will be prefetched or prerendered.
URL pattern exclusions
To add exclusions, you can add a PHP code snippet to your site and use their built-in filters.
Here is a basic example of excluding any paths that contain /go/ in the URL and our /account/ page.
add_filter(
'wp_speculation_rules_href_exclude_paths',
function ( array $exclude_paths ): array {
$exclude_paths[] = '/go/*';
$exclude_paths[] = '/account/';
return $exclude_paths;
}
);You can also really fine-tune things. For example, perhaps you want it to prefetch your product pages but not prerender them due to dynamic JS. See more examples here.
All of the settings and exclusions are located in a single inline script tag in the source code of each page.
<script type="speculationrules">your settings and exclusions</script>Block exclusions
WordPress Core has built-in support for the CSS classes no-prefetch and no-prerender. You can add these to any block so that links within that block are opted out. Under the “Advanced” panel in the block sidebar, add the CSS class in the “Additional CS Class(es) field.”
Troubleshooting
If you were previously using the standalone Speculative Loading plugin, we recommend uninstalling it and taking advantage of the feature in WordPress core and Perfmatters.
