Detect page prerender in analytics via Speculation Rules API

[chrisblakley]

This is using the Speculation Rules API and could be used to track beyond a simple dimension, but for now that is the initial intent. I am not planning on implementing the Speculation Rules API to define what pages need to be prerendered– I plan to continue using the DOM for that, but I'm curious if the long-term timeline necessitates this API. For now the focus is on tracking.

Particularly I'd love to incorporate this into the page timing GA4 data so we can (possibly) subdivide "Subsequent" page types into those that are preloaded and those that are not. Probably just with an appended name like "Subsequent" and "Subsequent (Prerendered)".

https://developer.chrome.com/blog/prerender-pages/

function pagePrerendered(){ //Probably change this to isPagePrerendered
  return (
    document.prerendering || self.performance?.getEntriesByType?.('navigation')[0]?.activationStart > 0
  );
}

gtag('set', { 'dimension1': pagePrerendered() }); //Update this to GA4 syntax

This is available in Chrome 117, but I do not know the status of Firefox and Safari, so more testing will be needed before we can fully implement this. That being said, the above function is checking if the API exists before it is used.

[chrisblakley]

You can now define the pages to prerender for instant load using JSON in the head of a page:

Instead of listing all menu pages here, this would be useful to add a WP filter in PHP so that they can be added easily from the child theme functions. This should be used for priority subpages like links from top-level CTAs or highly expected next pages.

https://developer.chrome.com/blog/debugging-speculation-rules/

[chrisblakley]

Speculation rules can be monitored in DevTools in the Application tab.

[chrisblakley]

Set this as the baseline which prerenders on hover/mousedown– similar to how Nebula does it with JavaScript, but more native (keep the JS as-is for now):

[chrisblakley]

The speculative rules JSON has been implemented, but I realized I mistakenly hijacked the original intention of this issue as it was supposed to be related to Google Analytics. Returning it to the original intent now.

[chrisblakley]

This is a non-issue as GA4 accounts for prefetching and preload automatically already.

As a reference, in Google I/O 2024 this is how systems like GA4 are accounting for this: