Speculative Loading Is Available in WordPress

During our webinar on “Loading Pages Instantly” at the beginning of 2024, Google’s Adam Silverstein mentioned that the WordPress Performance team is working on a plugin that will enable the Speculation Rules API:

 

Fast-forward to April 2024, when WordPress officially released Speculative Loading, a performance plugin that supports the Speculation Rules API. 

But before we get into it, here’s a quick overview of Speculation Rules API. 
 

Speculation Rules API Explained

The following paragraphs are a concise explanation of Google’s Speculation Rules API. If you want to delve deeper, read our dedicated article.

Speculation Rules API is an experimental technology developed by Google to improve the performance of future page navigations. Building upon the widely available resource hints link rel=prefetch and link rel=prerender, this JSON-defined API provides developers and site owners with a more flexible and expressive way to specify which documents should be prefetched or prerendered.

You can easily set the speculative loading type (prefetch or prerender) inside inline elements and external text files referenced by the Speculation-Rules response header. 

You have two options to enable Speculation Rules API:

1. Use URL patterns: Define which URLs are eligible for prefetch or prerender.
    
2. Specify level of “eagerness”: Use the eagerness setting to indicate when the speculations should fire – “eager” fires the speculation rules as soon as they are observed; “moderate” performs speculations if you hover over a link for 200 milliseconds; “conservative” speculates on pointer or touch down

How to specify level of “eagerness”

Whether you prefetch or prerender a page depends on the performance improvements you want to accomplish:

Prefetch instructs the browser to download the response body of the referenced pages but not the subresources referenced by the page. When a user navigates to a prefetched page, it loads faster than usual.

Prerender, on the other hand, instructs the browser to fetch, render, and load all the content, including subresources and JavaScript, into an invisible tab. This preloading of resources leads to a near-instant experience when the user navigates to the page. 

While the performance benefits of prerender are more significant, you should use this loading technology sparingly. Prerendering uses a lot of memory and network bandwidth, which may lead to wasted resources if the user doesn’t navigate to the page. 

Conversely, the upfront cost of a prefetch is much smaller than that of a prerender, so you can adopt prefetching more broadly.

 

Prerendering and Prefetching in WordPress

WordPress users have been able to insert link tags for prefetching or prerendering resources in HTML documents for years now, thanks to the Resource Hints API. 

However, using tags lacks flexibility because URLs must be specified early, leading to potential resource wastage or missed performance gains. Furthermore, dynamic solutions that insert link tags based on viewport visibility offer more flexibility but can still lead to excessive prefetching. 

Considering all these limitations, the Performance Team was highly motivated to find a better solution…
 

Speculative Loading: The New WordPress Performance Plugin

Speculative Loading enables prerendering or prefetching of other frontend URLs linked on the page. 

Once activated, the plugin automatically inserts a JSON script and prerenders any URLs on the page with a "moderate" eagerness. 

You can easily change this default behavior and modify it via the “Speculative Loading” section in the Settings > Reading screen:

Source: WordPress

Furthermore, you can customize which URLs to speculatively preload using a filter called “plsr_speculation_rules_href_exclude_paths.” For instance, pages modified based on user actions (e.g., cart) can be excluded from being prerendered or prefetched. 

Here is a code example of the filter:

Source: WordPress
 

How to Test and Send Feedback

The WordPress Performance team is encouraging more people to test the new plugin as they consider including the feature in WordPress core in the future.

Here’s how you can help them:

• Install and activate the Speculative Loading plugin on your site via WP Admin or the Performance Lab plugin.
• Try different configurations via the “Speculative Loading” section under Settings > Reading.
• Debug how the rules added by the plugin trigger speculative loading to understand the feature better and find potential bugs. 
• Report feedback or bugs in the GitHub repository or the plugin’s support forums.
• Integrate your plugins with the “plsr_speculation_rules_href_exclude_paths” filter to exclude specific URLs from prefetching and/or prerendering.
   

Navigation AI by NitroPack: The Automated Solution For Instant Page Experiences

Navigation AI by NitroPack is an AI-powered web performance optimizer that automatically predicts and analyzes user behavior to prerender entire pages during the customer journey. 

Building upon the Speculation Rules API, the no-touch solution allows developers and site owners to provide an instant browsing experience by:

1. Applying AI-enhanced initial predictions on page load based on data without passing it over to the Speculation Rules API (yet);
2. Analyzing the user behavior, adjusting the predictions, and instructing the Speculation Rules API to prerender (or prefetch) a page once we’re sure what the following action will be.

This combination of artificial intelligence and Google’s Speculation Rules API inevitably leads to impressive performance results:

• Loading times under 3 seconds. 
• Massive improvements in LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift)
• Better Core Web Vitals for the entire website

So, if you want to leave your visitors in awe of how fast your pages load…

Join the waitlist for Navigation AI and get your site prepared for instant user experiences →

FAQs

Is the Speculative Loading plugin in WordPress using AI?

No, the Speculative Loading plugin isn’t powered by artificial intelligence (AI). It leverages Google’s Speculation Rules API, inserting a JSON script into any URLs linked on the page and prerendering them with an eagerness configuration of “moderate.”

 

Which pages are eligible for speculative loading?

You can apply speculative loading strategies to all pages that aren’t modified by user actions. A good rule of thumb is to avoid prerendering or prefetching checkout and cart pages, as this may lead to a poor user experience. Additionally, Google advises only pretender pages when there is a high probability (greater than 80% of the time) that users will load them.

 

Which browsers support Speculation Rules API?

While the Speculation Rules API has been available in Chrome and Edge since version 109, the particular subfeature “document rules” that lets the browser obtain the list of URLs for speculative loading from elements in a page is available from Chrome 121. In other words, users will need to use either Chrome 121+ or Edge 121+ to experience the full benefits of Speculation Rules API.

 

How does Google Analytics handle speculative preloading?

If you are using Google Analytics, you do not need to do anything, as GA handles prerender by delaying until activation by default. With other tools, however, prerendered pages may impact analytics, and site owners may need to add extra code to enable only analytics for prerendered pages on activation. This could be achieved by using a Promise, which waits for the prerenderingchange event if a document is prerendering.