Boost your performance with Speculation Rules in Hyvä 1.3.7
Speculation Rules is a new feature available in 73% of all browsers that allows users to boost performance on multi-page applications.
Speculation Rules enables users to define which URLs should be pre-rendered when hovering or clicking on them, resulting in instant page loads.
By using a code snippet, users can set conditions for preloading URLs, such as hover intent or click actions. Speculation Rules can be enabled in the latest version of Hyvä Themes and is ideal for static pages. It improves user experience and can boost Core Web Vitals scores.
Speculation Rules are added as an experimental feature in Hyvä Theme module version 1.3.7.
You can enable it from you Magento admin: Hyvä Themes > Experimental > Experimental Features > Enable Preloading Speculation Rules
Read more:
- Blazing Fast Websites with Speculation Rules (DebugBear)
- Prerender pages in Chrome for instant page navigations (Chrome for developers)
- How to Use Speculation Rules API to Load Web Pages Instantly (Uxify)
Example snippet:
This is the speculation rule config we use on this website at the time of writing. You can see exact matches, wildcards and regular expressions can be used:
Source: Document, optional?
Update 29 April, 2024
The official spec isn't stable yet (All features are marked 'experimental' in the MDN web docs), so the way the above script works might change in the future.
At the time of writing, it turns out many browsers still expect the "Source" definition, while the spec says it is optional when using the "where" key. Not setting the "source": "document" key will throw the error "A rule must have a source".
We have therefore added the "source" key to the snippet above and will probably update our implementation in the Hyvä Theme in the near future.
