tunetheweb

Firefox supports the older <link rel="prefetch"> resource hint, but not the newer Speculation Rules API. The new API includes many benefits over <link rel="prefetch"> including:

• Full prerender as well as prefetch
• Automatic link finding
• Different eagerness levels
• Better DevTools support
• More consistent behaviour (particular with cross-origin prefetching/prerendering).

It is no longer recommended to use <link rel=prefetch> for navigation prefetches, and instead to use the new Speculation Rules API for this, and to only use <link rel=prefetch> for subresources.

However, we have asked Firefox’s position on this new API and they are positive on it, so hopefully that means support will come to Firefox at some point, at which point this plugin should support it.

For both questions I would suggest reading this post (full disclosure—I wrote it!):

https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules

I’m not sure what settings you’re using, but prefetches (for both plugins) should be available in the network tab of DevTools )as detailed in the post). Double check both are working as per the given settings and not double fetching the same resource twice.

If using prerender you need to use the dedicated panels in the DevTools Application panel to debug and ensure it’s working as expected.

Also, if you can share the site, then I can have a look to see if I can spot anything weird about the combo of both plugins.

You tomato, I say tomato…

Instant.page also merged support for Speculation Rules earlier this year (See this PR), though haven’t yet released a version including that addition. In theory that would give the best of both worlds, but with the addition of a bit of JavaScript to detect and use them both.

The Speculative Loading plugin is JS free, but only supports this API.

So advantages of this plugin:

• JS-free so a lighter implementation.
• Several WordPress-specific guards implemented (e.g. don’t speculate admin pages, or WooCommerce links..etc.)
• Being actively maintained – two maintainers answering questions on a Sunday night for example ??
• Allows full prerender for even faster loads.
• Allow prefetch into memory, which has some benefits.

However, disadvantages of this plugin:

• No fallback for unsupporting browsers (like Firefox and Safari).

BTW, even though speculation rules is only supported in Chromium browser, the <link rel=prefetch> that the Flying Pages plugin uses is not supported in Safari so neither will work for Safari (there is mention in the code of falling back to XHR but it looks like this was removed).

So by choosing the Speculative Loading plugin over Flying Pages you’re not speeding up Firefox users (as Firefox does support <link rel=prefetch> but not Speculation Rules), which is indeed a shame, but you need to weigh that up with the simple native API (not requiring JavaScript) and the potential bigger improvements available through prerendering. Personally, as this is a progressive enhancement (i.e. nothing breaks for those Firefox users, it’s just not sped up), I’d prefer Speculation Rules. But I worked on this feature so I’m biased ??

I compare it to the Lazy Loading JavaScript libraries that have been largely surpassed by using the native loading=lazy functionality. Sure the libraries give you more options, and some functionality for non-supporting browsers but the native solution is lighter and often good enough (especially as that one is now supported in all browsers).

Perhaps Flying Pigs will be enhanced to also support Speculation Rules, and fallback for Firefox and further fallback for Safari but it looks to me like there hasn’t been a release since 2020 so I guess it’s no longer being actively developed. Other plugins may take that route for a fully support picture, but again at the cost of more complexity. So need to decide whether a fully (but larger and more complex) plugin is worth it to you.

Btw we are looking to enhance the underlying Speculation Rules API to allow Cloudflare to differentiate between their own rules (and block if not cache) and rules added to the site separately (and allow them through as the site owner had requested them).

Once we do that you won’t need to turn off the SpeedBrain setting. But for now it’s best to turn it off if using this plugin.

At the moment yes it does conflict a little yes.

Cloudflare’s SpeedBrain product only allows cached responses to be speculated when it is enabled. This was a safety check they put in to prevent overloading origin servers or speculating unsafe pages since they enabled it by default.

This means you might see less speculations as uncached responses (arguably the ones that benefit the most from this!) will be blocked.

However, for cached responses it will work the same. So they are compatible in that sense.

We recommend disabling SpeedBrain if you have an explicit, better, set of rules enabled at a site level. Like this plugin does for you.

We’ve managed to replicate it. You can follow along at this bug: https://issues.chromium.org/issues/365490302

Will update this thread also when we have a resolution…

Correct. The other alternative is to use prefetch rather than prerender.

You would need to use a technique like this: https://developer.chrome.com/docs/web-platform/prerender-pages#hold-back-other-content

This example is for a script tag, but the same technique could be used for a <link rel=stylesheet> tag.

Oh good spot. Fixed in https://github.com/WordPress/performance/pull/1232 which should be included in the next release.

Thanks for the feedback!

Btw default Lighthouse scores won’t change as this works on links between pages whereas Lighthouse by default only does a cold page load. It is possible to use the Lighthouse user-flow functionality to measure across page loads (where this functionality shines) but that will be quite different to the usual page load you may be used to anyway.

For prefetch, it follows Chrome’s 5 minute timeout, so your next day issue shouldn’t be a concern.

For prerender, there is no timeout as long as the page is in the foreground. And sleeping the computer does not count as backgrounding. I’ve raised this issue to see if we should improve this: https://issues.chromium.org/issues/335924597

For now, if you have those specific concerns, prefetch may be the better option for you. It won’t quite be an instant navigation, but should still provide a good headstart anyway.

If a page is backgrounded (e.g. switching tabs) for more than 3 mins it cancels the speculations. Would need to test whether locking the computer counts as it being backgrounded.

That’s not strictly true Weston.

Speculation Rules basically uses the memory cache, so it can also be used for resources that aren’t cacheable in the HTTP Cache. As I often say it’s like right clicking a link and opening it in a new tab but not switching until later. In that case you wouldn’t expect the other tab the user opened to be closed when state changes and that doesn’t happen for Speculation Rules pages either.

However, it will only live for the duration the user is on the page (unless it’s saved in the HTTP Cache too as usual) so there is no long term cache.

To cancel a speculation you need to move to another page, or remove the speculation JSON from the page (which needs to be done through JavaScript and is not something the plugin can do since it doesn’t know what triggers that removal need).

However, it seems the OP has a longer term issue here so seems like it’s completely separate to speculation rules maybe?