User Guide of PrestaShop Smart Speculation Rules

PrestaShop Smart Speculation Rules Module utilizes the Speculation Rules API to implement speculative loading technology, enhancing overall site performance.

This means that when a customer hovers or is likely to click a link, the module preloads the target page in the background, making it ready in advance for near-instant loading.

This module is beneficial for merchants who aim to reduce bounce rates and increase customer engagement by providing a faster, smoother, and more seamless browsing experience.

NOTE: PrestaShop Smart Speculation Rules is compatible with the PrestaShop Multi-store feature.

• Uses Speculation Rules API to predict customer navigation.
• Enhances website performance by reducing page load times through speculative loading.
• Supports both Prefetch and Prerender methods to preload resources or render entire pages in the background.
• Choose to trigger speculative loading when a customer hovers over a link.
• Choose to trigger speculative loading as soon as the page opens.
• Configure the eagerness level of speculative loading to immediate or moderate.
• Define maximum URLs to prefetch per interval.
• Set the delay time to specify how long the system should wait before initiating speculative loading after a trigger event.
• Exclude speculative loading from specific pages based on their URLs, keywords, and Selectors.

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

After the successful installation of the module, a new tab “Smart Speculation Rules” gets available in the PrestaShop back office.

From this tab, the admin can configure the General Settings and the Rule Out Settings.

In the general settings, the admin has to configure how speculative loading should be applied on the website. Under general settings, the admin can:

• Select the Speculative Action
• Select the Speculation Trigger Type
• Specify the Delay Time

Speculation Action:

The Speculation Action setting determines the type of speculative loading to perform.

i) Prefetch

The Prefetch feature downloads resources such as HTML, scripts, images, and stylesheets in the background so that they are cached and ready when the user navigates to the page.

This method is lightweight and resource-friendly.

Note: To check the browser compatibility for the Prefetch feature, please click here.

ii) Prerender

The Prerender feature loads and renders the entire page in the background, making navigation nearly instant.

This approach requires significantly more server resources and can be used for high-priority navigation paths.

Note: To check the browser compatibility for the Prerender feature, please click here.

Speculation Trigger Type:

The Speculation Trigger Type defines when speculative loading is initiated.

i) On-Hover

The On-Hover feature begins preloading only when a user hovers over a link. This conserves resources by focusing on the links the customer is most likely to click.

ii) All required links on the page

This feature initiates speculative loading as soon as the page itself loads, preloading all detected links that meet the criteria.

While this maximizes responsiveness, it may increase bandwidth usage and server load.

In order to use the All required links on the page feature, you will have to set the Eagerness level and the Maximum URLs to prefetch per interval as well :

Eagerness Level:

This setting controls how aggressively the browser performs speculation. You can choose any one from the following options:

i) Immediate: The browser starts loading resources as soon as it predicts they may be needed. This provides faster performance but consumes more memory and data.

ii) Moderate: The browser waits or skips loading unless it is highly likely that the resource will be required. This conserves memory and data but may reduce responsiveness slightly.

Max URLs to prefetch per interval:

The admin can define the maximum number of links to speculate on within a given time frame from these settings.

Note: For Prerender, this field is predefined by the Chrome limit.

Eagreness Level	Prerender
Immediate	10
Moderate	2 (FIFO)

Delay Time:

The Delay Time option specifies how long the system should wait before starting speculative loading after a trigger event. The value is defined in milliseconds (ms).

The Rule Out settings allow the admin to define specific conditions where speculative loading should not be applied.

This ensures that unnecessary resources are not preloaded for unwanted or irrelevant pages.

You can exclude speculative loading from specific pages using the following options:

Blacklist / Ignored URLs: This option allows the admin to specify exact URL paths that should be excluded from speculative loading.

Keywords excluded URLs: This option allows the admin to define keywords that, when present in a URL, will exclude the corresponding pages from speculative loading.

Exclude selector matches: This option allows the admin to exclude specific elements on a page from being processed for speculative loading, using CSS selectors or patterns.

Prefetches triggered by speculation rules can be seen in the Network panel in the same way as other fetches:

Clicking on one of the rows also shows the Sec-Purpose: prefetch HTTP header, which is how these requests can be identified on the server side:

A new Speculative loads section has been added in the Application panel of Chrome DevTools, under the Background services section, to help aid in debugging speculation rules:

There are three tabs available in this section:

• Speculative loads which lists the prerendered status of the current page.
• Rules which lists all the rule sets found on the current page, designated as URLs or rule tags, if any.
• Speculations which lists all the prefetched and prerendered URLs from the rule sets.

The Speculations tab lists all the target URLs, along with the action (prefetch or prerender), which rule set they came from (as there may be multiple on a page), and the status of each speculation:

This was all about the PrestaShop Smart Speculation Rules Module. I hope this document will help you in checking the functionality of the module in a better way.

Also, do let us know about your views in the comments.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

Also, please explore our Prestashop development services and vast range of quality Prestashop addons.