Speculative Loading: The Secret to Faster WordPress Sites

Speed is everything on the internet. Users expect web pages to load instantly, and even a one-second delay can lead to higher bounce rates and lost revenue. This is especially true for WordPress sites, which often rely on multiple plugins and heavy content.

Speculative loading offers a smarter way to make websites load faster by preparing pages before users even click. Instead of waiting for a user action to fetch data, speculative loading uses predictive technology to preload or prerender important pages in the background. This guide explores how it works, how to implement it in WordPress using the Speculative Loading plugin, and why it’s gaining attention in the performance community.

If you’re looking to improve performance and lower load times for your WordPress site, this is a technology worth understanding.

A Quick Primer on Prerendering: Then vs. Now

To appreciate speculative loading, it’s useful to know how prerendering has evolved. Back in 2011, the Chromium team introduced the <link rel=”prerender”> tag, which allowed browsers to quietly load entire pages in advance. The idea was to guess which page a user might visit next and render it in the background. When the user clicked that link, the page would appear instantly.

This feature, while powerful, had its problems. It consumed too much bandwidth and CPU resources, sometimes loading pages the user never visited. It also raised privacy concerns, especially on shared devices. As a result, Chrome replaced it with a more cautious method called NoState Prefetch, which only fetched page resources without running scripts or rendering the full page.

Although NoState Prefetch helped reduce unnecessary loads, it still couldn’t deliver the kind of speed boost that full prerendering provided.

What Is the Speculation Rules API?

The Speculation Rules API is a modern solution designed to bring back prerendering — but with better control, flexibility, and fewer risks. This API allows developers to define a set of rules in a JSON script. These rules tell the browser which pages to prefetch or prerender, depending on user behavior and other factors.

For example, a basic JSON configuration for prerendering looks like this:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["about.html", "contact.html"]
    }
  ]
}
</script>

This simple script tells the browser to prerender the listed URLs, so they load almost instantly when clicked. You can also use the same format to prefetch pages:

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["services.html", "pricing.html"]
    }
  ]
}
</script>

Recent improvements now allow document-based rules, enabling browsers to automatically pick links from the page and apply speculative loading. This reduces the need to manually list URLs and makes the API more dynamic. The rules can be based on href matches, CSS selectors, or a combination of both, giving developers precise control over which links are affected.

This feature not only enhances user navigation but also ensures better WordPress performance across frontend pages.

How Speculative Loading Works in WordPress

In WordPress, speculative loading is no longer just a developer’s experiment. Thanks to recent efforts by the WordPress Performance Team, this feature is now accessible to everyday site owners through a simple plugin integration.

Here’s how it works: speculative loading enables your website to predict which internal link a user is likely to click next. Once predicted, the browser either prefetches the necessary resources or prerenders the entire page quietly in the background. This means that when the user finally clicks that link, the page appears instantly because the browser has already done the heavy lifting.

At the core of this process is the Speculation Rules API, which acts like a roadmap for browsers. It uses a JSON-defined structure to outline which URLs should be preloaded and under what conditions. In WordPress, this mechanism can be applied to frontend URLs, particularly for blogs, shop pages, or service listings where users are likely to jump from one page to another.

What makes speculative loading especially powerful is the eagerness configuration:

• Eager: The browser loads the page immediately.
• Moderate: The page is prerendered after the user hovers over a link for a short time (typically 200ms).
• Conservative: The browser waits for more interaction, like a mouse click or tap start.

This layered approach ensures that speculative loading doesn’t waste bandwidth but still improves the load times of high-interest pages. Most WordPress sites benefit from using the moderate setting, which strikes a balance between speed and efficiency.

The Speculative Loading Plugin: Install and Configure

To bring speculative loading to your WordPress site without touching code, the easiest solution is the Speculative Loading plugin developed by contributors from Google and the WordPress core team. This plugin was introduced to help site owners leverage speculation rules without needing to dive deep into manual configurations.

Installation Steps:

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for “Speculative Loading”.
4. Click Install, then Activate.

Once activated, the plugin adds a speculationrules script directly to your site’s HTML. This script uses document-level rules to automatically apply prerendering to relevant WordPress frontend URLs.

By default, the plugin uses the moderate eagerness setting. This means it waits until a user hovers over a link for a brief moment before starting to prerender the destination page. This behavior is optimized for performance and ensures it doesn’t overwhelm system resources or interfere with user privacy.

You can manage the plugin’s settings by navigating to Settings > Reading in your dashboard. Here, you’ll find a new section called Speculative Loading, where you can:

• Change the speculation mode (Prefetch or Prerender)
• View or update the default configuration
• Provide conditional exclusions for specific URLs

For instance, WordPress automatically excludes paths like /wp-admin/ and /wp-login.php from being prerendered. You can add your own exclusions for URLs like /checkout/ or /cart/ using WordPress filters.

This hands-free setup makes it incredibly simple for even non-developers to enable prerender on their site and boost speed across frequently visited pages.

Browser Support and Compatibility

One of the most exciting aspects of speculative loading is that it’s already supported in modern browsers. The Speculation Rules API works natively in Chromium-based browsers like Google Chrome and Microsoft Edge, starting from specific versions onward.

If a visitor is using a compatible browser, speculative loading will kick in immediately and improve perceived performance. If the browser does not support it, your site will still function as usual. This makes speculative loading a progressive enhancement — it improves the experience where possible but never breaks anything.

This kind of compatibility is important for WordPress sites targeting a broad audience. Whether your visitors are using a desktop browser or mobile device, speculative loading provides faster rendering, especially when they are quickly navigating between internal pages.

Developers can check browser support through tools like Can I Use, or by inspecting behavior directly in Chrome DevTools under the Speculative loads tab.

Advanced Rules & Filters for Developers

Speculative loading is powerful out of the box, but developers can take it even further by customizing which URLs should be included or excluded from prerendering and prefetching. This level of control is especially useful for eCommerce stores, membership sites, or dynamic applications where not every page should be loaded in advance.

WordPress makes this possible through filters like plsr_speculation_rules_href_exclude_paths. This filter lets developers provide conditional exclusions, allowing only certain URLs to be preloaded based on mode (prerender or prefetch), path, or even query parameters.

Example 1: Exclude Cart URLs

If you want to stop speculative loading on cart-related pages, you can use the following snippet:

add_filter(
  'plsr_speculation_rules_href_exclude_paths',
  function ( $exclude_paths ) {
      $exclude_paths[] = '/cart/*';
      return $exclude_paths;
  }
);

This ensures that any URL matching /cart/ or its subpaths won’t be prerendered or prefetched. It’s useful for avoiding unnecessary server load or triggering actions too early.

Example 2: Allow Prefetch but Disable Prerender

Let’s say you want to allow prefetching but prevent prerendering for sensitive product pages. You can add logic to detect the mode:

add_filter(
  'plsr_speculation_rules_href_exclude_paths',
  function ( $exclude_paths, $mode ) {
      if ( $mode === 'prerender' ) {
          $exclude_paths[] = '/products/*';
      }
      return $exclude_paths;
  },
  10,
  2
);

This gives developers granular control over how their certain WordPress core URLs behave with speculative loading, preventing privacy issues, protecting dynamic content, and improving user experience.

You can also target links with CSS classes such as .no-prefetch or .no-prerender, depending on your front-end setup. For example, links with these classes can be skipped from being loaded in advance using selector_matches in the speculation rules JSON.

With these techniques, developers can ensure the speculative loading behavior aligns perfectly with their site’s goals — especially when dealing with logged-in users, checkout flows, or nofollow links that should not be preloaded.

Debugging Speculative Loading in Chrome DevTools

Once speculative loading is active on your WordPress site, it’s important to verify that it’s working as expected. Thankfully, Chrome DevTools provides a powerful way to inspect speculative behavior directly in the browser.

To begin debugging, open your site in Chrome and press F12 to launch DevTools. Then:

1. Go to the Application tab.
2. Scroll down to Speculative Loads.
3. You’ll see a list of URLs that have been speculatively loaded — either prerendered or prefetched.

This panel shows the status of each URL, such as:

• Not triggered (no user interaction yet),
• Triggered (on hover or click),
• Prerendered, or
• Prefetched.

As you hover over different links on your site, the Speculative Loads tab will update in real time. This allows you to see which URLs are being processed in the background based on your speculation rules.

If you’ve enabled moderate eagerness, for instance, Chrome will only prerender two URLs at a time using a First In, First Out (FIFO) system. This means after hovering three links, the third one may fail to prerender if two others are still active.

You can also explore prerendered pages more deeply using:

• Elements Tab: See the HTML of prerendered content.
• Network Tab: View files already requested and cached.
• Console & Sources: Verify if scripts are delayed or properly executed after activation.

By switching the renderer instance in the top-right dropdown, you can isolate the prerendered page and inspect its network activity or DOM structure just like a live tab.

This level of visibility helps developers debug speculation rules, troubleshoot speculative loading plugins, and make sure the setup doesn’t affect user behavior or performance.

Prefetch vs. Prerender: What’s the Difference?

Although speculative loading includes both prefetching and prerendering, the two work differently and serve distinct purposes.

Prefetching

• Downloads resources like HTML, CSS, and JavaScript.
• Does not render the page.
• Used to reduce load time once the user actually clicks.
• Lower impact on system resources.
• Ideal for pages that are likely to be visited but should not be executed prematurely.

Prerendering

• Loads and renders the entire page in a hidden tab.
• The page is fully interactive when the user navigates.
• Uses more CPU and memory.
• Best for high-priority links or common navigation paths.

For example, you might want to prerender WordPress frontend URLs like blog posts or product categories, while only prefetching contact or support pages that may not require instant interaction.

You can configure this in the Speculative Loading plugin by switching the Speculation Mode to either Prerender or Prefetch in the plugin’s settings panel.

The mode you choose will affect how quickly users experience content, how much system memory is used, and how your WordPress site’s performance is perceived overall.

Chrome’s DevTools again comes in handy here. Under the Speculative Loads tab, you’ll be able to see the difference: Prerendered pages will show a full DOM preview, while Prefetched pages will be listed as passive background resources.

Understanding this distinction allows site owners and developers to make smarter decisions based on user behavior, available bandwidth, and site architecture.

Impact of Speculation Rules API on Analytics

While speculative loading can dramatically improve page load times and user experience, it introduces a few challenges when it comes to tracking website analytics.

When a page is prerendered, it loads in the background — before the user even navigates to it. This can create a situation where analytics tools like Google Analytics, heatmaps, or event trackers may record a visit or event before the user actually views or interacts with the page.

To prevent false positives, developers need to implement conditional tracking based on the actual user navigation.

For example, not all analytics platforms support prerender detection by default. Some may log a pageview when the page loads in the background, even if the visitor never clicks the link. Fortunately, tools like Google Analytics, Google Publisher Tag, and Google AdSense already handle this efficiently. They delay event tracking until the prerendered page becomes active.

However, if you’re using custom tracking scripts or third-party tools, you’ll need to add a check to ensure that tracking only starts once the page is active. This is possible by using the document.prerendering property combined with a prerenderingchange event listener.

Here’s a quick example using JavaScript:

const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve);
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialize your analytics code here
}

initAnalytics();

This approach ensures your marketing data reflects actual user interaction, not background processes. It’s especially important for teams using Real User Monitoring (RUM), A/B testing, or event-based analytics that influence business decisions.

Whether you’re using a speculative loading plugin, custom speculation rules, or implementing the Speculation Rules API manually, always review how it might affect analytics and adjust your tracking accordingly.

With the right configuration, you’ll get the best of both worlds — faster performance and accurate insights.

Potential Pitfalls: When to Disable Speculative Loading

As useful as speculative loading is, there are scenarios where enabling it may not be ideal. In some cases, it can cause unexpected behavior or even break site functionality — especially on dynamic pages or sites with sensitive user data.

Here are a few situations where you should consider disabling speculative loading for specific URLs or user roles.

1. Logged-In Users and Personalized Content

Avoid prerendering pages that serve personalized content like account dashboards or membership areas. Loading them in the background using someone else’s session data can cause confusion or even expose sensitive information.

To prevent this, you can exclude logged-in users from triggering speculative loading entirely or filter out specific URLs with session-based content using PHP.

2. eCommerce Cart, Checkout, and Payment Pages

Exclude pages like /cart/, /checkout/, or any URL with query parameters tied to product selections. These pages often rely on real-time updates and may display incorrect information if prerendered before a user confirms their intent.

Use the plsr_speculation_rules_href_exclude_paths filter to remove such pages from speculative loading:

add_filter(
  'plsr_speculation_rules_href_exclude_paths',
  function ( $exclude_paths ) {
      $exclude_paths[] = '/checkout/*';
      $exclude_paths[] = '/cart/*';
      return $exclude_paths;
  }
);

This ensures your WordPress core URLs are optimized only for pages where speculative loading adds value — not where it might interfere with important user actions.

3. Pages with Client-Side JavaScript State

Pages that rely heavily on JavaScript to load data dynamically — such as real-time dashboards, forms, or booking systems — should not be prerendered. The state may become stale or trigger events that weren’t meant to run until after a user click.

If you still want to prefetch such pages (without rendering them), use a conditional exclusion that disables only prerender mode:

add_filter(
  'plsr_speculation_rules_href_exclude_paths',
  function ( $exclude_paths, $mode ) {
      if ( $mode === 'prerender' ) {
          $exclude_paths[] = '/live-dashboard/*';
      }
      return $exclude_paths;
  },
  10,
  2
);

4. Exclude Using CSS Classes

You can also prevent specific links from being fetched by adding CSS classes like no-prefetch or do-not-prerender. The Speculation Rules API allows you to use selector_matches in your JSON config:

This is especially helpful for plugin developers or theme creators who want to offer more granular control without editing PHP files.

Speculative loading is a fantastic tool, but it’s not a one-size-fits-all solution. With the right exclusions and settings, you can use it to improve performance while avoiding pitfalls.

Final Thoughts: Build a Faster WordPress Site with Confidence

Speculative loading is one of the most exciting advancements in modern web performance — and WordPress is already embracing it. With tools like the Speculation Rules API and the Speculative Loading plugin, site owners and developers can dramatically reduce page load times, improve user navigation, and offer smoother experiences across the board.

Whether you’re building a content-rich blog, a WooCommerce store, or a dynamic WordPress site, speculative loading helps your pages feel faster without needing to touch complex code. And thanks to smart browser support and customizable settings, it fits seamlessly into most setups.

Before enabling it across your entire site, be sure to review your WordPress core URLs, check for dynamic pages, and apply conditional exclusions where needed. Use Chrome DevTools to validate behavior, and always monitor how speculative features impact your analytics and performance metrics.

If you’re ready to start creating faster, smarter, and more engaging websites — speculative loading might just be your secret weapon.