Optimizing Web Speed: A Guide to Using Speculation Rules

#web #webdevelopment #website #webperformance #browser #browserfeature
github.com/tec...
The Speculation Rules API is designed to improve performance for future navigations. Triditionaly Resource hints like prerender and prefetch are used for this. The Speculation Rules API allow web developers to tell the browser about potential navigational choices in advance, helping preload certain resources. This can significantly enhance the user experience by reducing load times.
It allows web developers to specify which resources (like other web pages) the browser should prefetch or prerender. This allows the browser to smartly load these pages in advance, creating a faster and smoother browsing experience.t's like having the next page ready before the user even clicks, significantly speeding up load times and making for a much more pleasant online journey.
Speculation Rules are more aligned with the architectural and navigational characteristics of MPAs, where the loading of new HTML documents is a frequent operation. In contrast, the structure of SPAs, which revolves around a single HTML document with dynamic content updates, does not align as well with the capabilities and advantages offered by Speculation Rules.
The Speculation Rules API is considered experimental and should be used with caution. It's important to check for browser support before using this feature in production environments.
Developers can detect support for the Speculation Rules API using standard HTML checks. Additionally, the implementation of speculation rules must be done carefully to avoid any unintended side effects, such as prematurely triggering analytics or other scripts that are meant to run when a user actually navigates to a page.
The Speculation Rules API supports Prefetch and Prerender
'Prefetch’:
loading the main content of a webpage that the user might visit next
This process involves fetching just the HTML document, not its associated sub resources like images or CSS. For sub resources prefetching you should use prefetch Resource hints, rel=prefetch
Cross origin supported
‘Prerender’
fetches the main content but also processes all the resources associated with it, including scripts, stylesheets, and images.
prerendering prepares the entire webpage, rendering it in the background so that when a user clicks on the link, the page appears to load instantaneously
comes with greater resource consumption and should be used carefully, considering its potential impact on performance and user experience.
cross-origin not supported
Speculation Rules - List Rules
A list rule is denoted by "source": "list", or implicitly by the presence of a "urls" key
URLs are be parsed relative to the document base URL (if inline in a document) or relative to the external resource URL (if externally fetched).
List rules are supported in Chrome/Edge.
Requirements - anonymous-client-ip-when-cross-origin
Hints - targeting hints(target="_blank“), Explicit referrer policy("referrer_policy": "no-referrer“), relative_to("relative_to": "document“)
Speculation Rules - Document Rules
A Document rule is denoted by "source": “document"
Allow the browser to find URLs for speculation from link elements in the page
Document rules allow developers to specify pattern-based allow/deny lists, which is more convenient in scenarios where a page contains a large number of links or dynamic content
Document rules are enabled part of latest Chrome version 121, edge currenlt not support Document Rules
Hints - targeting hints(target="_blank“), relative_to("relative_to": "document“)
Eagerness
hints about how eagerly the browser should preload/prefetch links in order to balance the performance advantage against resource overhead
If not specified, list rules default to "immediate" and document rules default to "conservative"
immediate and eager: It works after page loading, regardless of the hover or mouse down.
moderate: It works on hover and mouse down.
conservative: It only works on mouse down
The script tag can statically exist in the page or be dynamically injected by JavaScript
the browser may load external rule sets that are served with the Speculation-Rules header
Speculation rules are inlined in script tags, but their use will be restricted by Content Security Policy as unsafe inline scripts even if the speculation rules are safe.
So, we extend the Content Security Policy to have a new source keyword, ‘inline-speculation-rules’, for inline uses of speculation rules. With this new keyword, we can permit inline speculation rules without permitting inline scripts.
Detecting and disabling prerender server-side - Prerendered pages will be sent with the following HTTP header: Sec-Purpose: prefetch;prerender and prefetched pages wiill be send with Sec-Purpose: prefetch

[@rajastylez]

What predictive libraries can we use?