How Speculative Loading Can Improve Page Speed on WordPress Websites

Today, web pages are filled with images, videos and interactive elements designed to enhance the user experience. However, these things can slow down the loading time of a web page. While technology is always improving, one goal remains constant: performance. Everyone wants their web pages to load at lightning speed. One way to make web pages load faster is to pre-render or pre-fetch them before the user views them.

A Brief History of Pre-Rendering

In 2011, the Chromium team introduced theEarly forms of pre-rendering<link rel="prerender" … >The

In this way, the developer can alert the browser to the pages that the user is likely to visit next. The browser then silently fetches and renders these pages in the background, thus greatly reducing the loading time when the user views these pages.

Despite the benefits, this early pre-rendering feature uses a lot of bandwidth and CPU resources, and can lead to privacy issues if users don't visit pre-rendered pages. Additionally, you have to manually select the links to be pre-rendered, which isn't always efficient or feasible.

To address some of these issues, Chrome has deprecated the use of links torel=prerenderThe pre-rendering of the hints, in favor of using theNoState Prefetch method, which involves fetching page resources without performing JavaScript or other potentially privacy-invasive actions.The NoState Prefetch method improves resource loading, but does not provide instant page loading like full pre-rendering.

Introduction to the Speculative Rules API

Presumption Rules APIis a new experimental JSON-defined API that speculatively preloads URLs before navigating to them, reducing rendering time and improving the user experience.

The API enables developers to configure rules using structures defined in JSON format.script type="speculationrules"The browser can use this structure to determine which URLs should be pre-rendered.

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

The same is true when it comes to prefetching, which is usually the first step in pre-rendering:

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

The code snippet above shows how the speculative rules API works by specifying a list of URLs to prefetch or pre-render. Recently, Google announced theA new enhancement to the speculative rules API now provides theOption to automatically find links using document rules. This is accomplished by fetching URLs from documents based on conditionswhereThe

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

In this code snippet, all URLs on the page are considered for pre-rendering, except for those pointing to the WordPress login and admin pages.You can also specify the level ofeagerness– eager(Immediately),moderate(200 millisecond hover) andconservative(Mouse or when touching the ground).

CSSSelectors can also be used as an alternative or in combination with matcheshrefUse to find links on the current page:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

When using the Presumption Rules API, you can use Chrome to check the page when it should beCheck with the "Speculative Load" background service in the Programs tab.

There's more to come, which we'll examine in the debugging section.

Browser Support

Starting with certain versions, modern Chromium-based browsers (including Chrome and Edge)Both support the speculative rules APIThe

Because the API is an incremental enhancement tool, it ensures that users with supported browsers benefit from faster load times, while users with other browsers are not negatively impacted in any way.

Speculatively Loading WordPress Plugins

To take advantage of the speculative rules API in WordPress, theWordPress Performance Team (including developers from Google) recently released thePresumably loaded plug-ins. The plugin supports inferring the front-end URL of the link on the loaded page.

So far, the plugin has had a low adoption rate due to the fact that the API is still in its early stages, but it has received some favorable reviews.

By default, the plugin is configured to pre-present the WordPress front-end URL when the user hovers over the relevant link.This can be done via theset up >read lowerPresumably loadedsection for customization.

This means that any URLs linked on the page will use theeagernessconfiguration for pre-renderingmoderateThe configuration is usually triggered when hovering over a link. Therefore, you don't need to perform any action after activating the plugin;It works right out of the box.The

For example, if you have already installed theSpeculative loadingPlugin. Use Chrome DevTools to inspect the site and click theElements Tab. As you scroll down, notice that the tab that has beenscript type="speculationrules"Added various speculative rules for you.

It uses Regex to specify links that should be pre-rendered, to specify links that should not be pre-rendered, and to set the level of eagerness. These rules are explained in more detail below.

Prevent certain URLs from being prefetched and pre-presented

Note that by default, the WP-adminRouting is excluded from pre-rendering and prefetching. As aWordPress Developer, can decide which routes it wants to prioritize.

It is possible to useplsr_speculation_rules_href_exclude_pathsThe filter customizes the rules for inferring the type of URLs that are preloaded.

The following code example ensures that the URL is similarhttps://wordpresssite.com/cart/maybehttps://wordpresssite.com/cart/book/will be excluded from prefetching and pre-rendering:

<?php

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

Debugging Speculation Rules for WordPress Websites

Since pre-rendered pages are rendered in a separate renderer, like a hidden background tab that replaces the current tab when activated, debugging the speculative rules can be tricky.The Chrome team has done a lot of work on DevTools to allow you to use them for debugging.

In Chrome DevTools, navigate to the"Applications" tab, then scroll down to the"Speculative loading." tab. This provides developers with detailed information about speculation, pre-rendered URLs, failed URLs, and more.

Here, you can see that the five links on the page can be pre-rendered based on URLs that match the rules set in the Speculative rules JSON, as shown below. Note that we don't need to list all the URLs; the document rule allows the browser to fetch these URLs from the same source links on the page.

The "Status" of some links shows "Not Triggered" The pre-rendering process for these links has not started yet. However, when we hover over the links on the page, we see the status change with the pre-rendering of each URL.

Chrome sets limits on pre-rendering, including a maximum of two pre-renderings for medium urgency, so after hovering over the third link, we see the reason for the failure of 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:

The drop-down list (and the selected value) is available 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 also prefetch pages. For the "speculative loading" plugin, make sure to select the"Prefetch" act as"Speculative mode"The

Now, when using the DevTools inspection page and navigating to the Speculative Loading tab, do the followingcommander-in-chief (military) Prefetching is done for various URLs and the rules change.

Hover over the link to navigate to theWhen the "Network" tab is selected, the prefetched resources will be displayed at the end, such as"Type"columns are shown. These resources are fetched at the lowest priority because they are for future navigation and Chrome prioritizes resources on the current page.

Impact of the Speculative Rules API on Analytics

Analytics are critical for tracking site usage through page views and events and for evaluating performance through Real User Monitoring (RUM). It's important to know that pre-rendering affects analytics.

For example, using the Speculative Rules API may require additional code to activate analytics only when the 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 providers do this by default.

To work around this, you can set up the Promise to initialize the parsing only when the page is active:

// Promise to activate analytics on page activation for prerendered pages
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve); } else {
  } else {
    resolve();
  }
}).

async function initAnalytics() {
  await whenActivated; // Initialize analytics.
  // Initialize analytics
}

initAnalytics(); // Initialize analytics.

summarize

This article explains what the Speculative Rules API is, how it works, and how to use it on a WordPress site. It is still an experimental feature, but is gradually gaining widespread adoption. Speculative rules are still limited to pages in the same tab, but efforts are being made to reduce these limitations.