A comprehensive look at the Speculation Rules API in WordPress and its implications

To take advantage of the Speculation Rules API in WordPress, the WordPress performance team (including developers from Google) recently released a speculation loading plugin. This plugin pre-loads the front-end URLs of the links on a page to improve page load speed.

By default, this plugin pre-renders the WordPress front-end URL when the user hovers over the relevant link. you can find the URL in the "set up">"read">"Presumably loaded" section to customize these settings.

Customizing the speculative loading plugin in the WordPress admin settings is very simple. This means that any links on the page will be loaded according to the preset "moderate" eagerness configuration does pre-rendering, it starts pre-rendering when you hover over the link. Therefore, after activating the plugin, you don't need to do anything extra; it works immediately.

For example, if you've installed the Push to Load plugin on your WordPress site, you can use Chrome DevTools to inspect the site and click on the Elements tab. As you scroll down, you'll notice that various speculative rules have been added for you, such as <script type="speculationrules">The

The plugin uses regular expressions to specify links that need to be pre-rendered, exclude links that are not pre-rendered, and set the pre-rendering eagerness. The following section explains these rules in detail.

Restrictions to prevent overuse

Chrome sets some limits to prevent the API from being overused:

These limits are set based on urgency and user interaction.

• immediate and eager: These settings do not rely on user action and are therefore more restrictive. They allow dynamic capacity adjustment by removing old pre-renderings to add new ones.
• moderate and conservative: These settings are triggered by user action and follow the first-in-first-out (FIFO) principle, with an upper limit of 2. When a new pre-render is added, the oldest pre-render is replaced to save memory.

Prevent certain URLs from being prefetched and pre-rendered

Attention:By default, WP-admin routes are excluded from pre-rendering and prefetching. As a WordPress developer, you can choose which routes to prioritize.

You can use filters plsr_speculation_rules_href_exclude_paths Customize which URL types need to be excluded from speculative preloading.

The following code example ensures similarity to the https://wordpresssite.com/cart/ maybe https://wordpresssite.com/cart/book/ URLs will not be prefetched and pre-rendered:

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

You may want to exclude certain URLs from pre-rendering but still allow prefetching. For example, a page that uses client-side JavaScript to update the user's state may not be suitable for pre-rendering, but prefetching makes sense.

plsr_speculation_rules_href_exclude_paths The filter receives the current mode (prefetch maybe prerender) for conditional exclusion.

For example, the following code ensures similar https://wordpresssite.com/products/ URLs cannot be pre-rendered, but can still be prefetched:

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

Debugging Speculation Rules for WordPress Websites

Debugging speculative rules can be tricky because pre-rendered pages are rendered in a separate renderer, like a hidden background tab that replaces the current tab when activated. To address this issue, the Chrome team has made a number of improvements in DevTools to make debugging easier.

In Chrome DevTools, navigate to "application"tab and scroll down to the Speculative Loads section. This provides developers with detailed information about speculative, pre-rendered URLs, failed URLs, and more.

You can see that there are five links on the page that can be pre-rendered based on settings in the speculative rule JSON. You don't have to list all the URLs; the document rule allows the browser to automatically fetch them from the same source links on the page.

Some of the links in the "state of affairs" is displayed as "Not Triggered", which means that the pre-rendering process for these links has not yet started. When we hover over the links on the page, we see the state of each URL change during pre-rendering.

Chrome sets limits on pre-rendering, for example moderate modeAt most, two URLs can be pre-rendered under this section, so when we hover over the third link, we will see the pre-rendering failure reason for that URL.

You can also use the drop-down menu in the upper right corner or select the URL at the top of the panel and choose theInspectto switch the renderer used by the DevTools panel:

This drop-down list (and the selected value) is used in all other panels (such as the"Network." panel) is shared between them, in which you can see that the page being requested is a pre-rendered page:

orElements panel to see the page content:

Just as you can debug pre-rendered pages, you can debug prefetch pages. For "Speculative loading"plug-in, make sure to select "pre-select"as"speculative model".

Now, when you use DevTools to inspect the page and navigate to "Speculative loading" tab, you will see various URLs prefetched and the corresponding rules will change.

When you hover over the link and navigate to "reticulation" tab, the prefetched resources are displayed at the end of the list, such as "typology" column is shown. These resources are fetched at the lowest priority because they are intended for future navigation, and Chrome prioritizes loading the resources needed for the current page.

Impact of the Speculative Rules API on Analytics

Analytics are critical for tracking website usage, such as page views and events, as well as evaluating performance through Real User Monitoring (RUM). Note that pre-rendering may affect analytics data.

For example, using the Speculative Rules API may require additional code to ensure that analytics are only activated when a pre-rendered page is actually visited. While Google Analytics, Google Publisher Code (GPT), and Google AdSense delay tracking until the page is active, not all analytics providers do this by default.

To get around this, you can set up a Promise that initializes the parsing only when the page is activated:

document.addEventListener('prerenderingchange', function(event) {
    if (!event.isPrerendering) {
        // Initialize the parsing code
    }
});

summarize

This article describes what the Presumption Rules API is, how it works, and how to use it on a WordPress site. While it is still an experimental feature, it is becoming widely adopted.

The plugin utilizes pre-loaded links on the page so that the page pre-renders the corresponding URL when the user hovers over the link.The pre-rendering rules can be easily customized in the WordPress settings. The plugin uses regular expressions to set the links that need to be pre-rendered and has a mechanism to prevent overuse.