Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use speculation rules prefetch/prerender when available #126

Merged
merged 1 commit into from
Mar 10, 2024

Conversation

domenic
Copy link
Contributor

@domenic domenic commented Feb 22, 2024

Speculation rules prefetch, currently only available in Chromium-based browsers, has some advantages over <link rel=prefetch>:

  • It stores the resources in a per-document in-memory cache, instead of in the HTTP cache, which can be slightly faster.

  • Because it has its own cache, it is not disabled by HTTP caching headers like Vary or Cache-Control.

  • It is automatically integrated into various user-respectful browser settings like Data Saver, Battery Saver, and memory pressure monitoring.

  • It has better cross-site support than <link rel=prefetch>, including the nonstandard as=document variant, because it disables itself if the destination site has cookies, whereas <link rel=prefetch> can cache the wrong version of the document (the version without cookies).

  • It shows up nicely in the DevTools speculative loads panel.

The implementation strategy is to just insert a <script type=speculationrules> element, with a single list rule pointing to the target URL, instead of inserting the corresponding <link rel=prefetch> element.

Additionally, we add the ability to configure prerendering, instead of prerendering, via the data-instant-specrules=prerender attribute. (Use of speculation rules can also be turned off, via data-instant-specrules=no.) Prerendering is more complex and risky, but can give a significant speed boost.

More information on speculation rules prefetch and prerender is available at https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API.

When speculation rules are not available, we fall back to <link rel=prefetch> as usual.

Speculation rules prefetch, currently only available in Chromium-based browsers, has some advantages over <link rel=prefetch>:

* It stores the resources in a per-document in-memory cache, instead of in the HTTP cache, which can be slightly faster.

* Because it has its own cache, it is not disabled by HTTP caching headers like Vary or Cache-Control.

* It is automatically integrated into various user-respectful browser settings like Data Saver, Battery Saver, and memory pressure monitoring.

* It has better cross-site support than <link rel=prefetch>, including the nonstandard as=document variant, because it disables itself if the destination site has cookies, whereas <link rel=prefetch> can cache the wrong version of the document (the version without cookies).

* It shows up nicely in the DevTools speculative loads panel.

The implementation strategy is to just insert a <script type=speculationrules> element, with a single list rule pointing to the target URL, instead of inserting the corresponding <link rel=prefetch> element.

Additionally, we add the ability to configure prerendering, instead of prerendering, via the data-instant-specrules=prerender attribute. (Use of speculation rules can also be turned off, via data-instant-specrules=no.) Prerendering is more complex and risky, but can give a significant speed boost.

More information on speculation rules prefetch and prerender is available at https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API.

When speculation rules are not available, we fall back to <link rel=prefetch> as usual.
@kurtextrem
Copy link

lgtm although it looks like the implementation doesn't allow cancelling (by removing the script tag, which might mean we run into max prefetches sooner compared to link rel=prefetch)?

@domenic
Copy link
Contributor Author

domenic commented Feb 22, 2024

Right, I didn't see that ability with <link rel=prefetch>, so I didn't add it here. But should we consider adding it somehow? We could manage our own FIFO queue maybe, and remove the oldest one when we get near a limit?

@instantpage instantpage deleted a comment Mar 5, 2024
@instantpage instantpage deleted a comment Mar 5, 2024
@dieulot dieulot merged commit a6c53fa into instantpage:master Mar 10, 2024
@dieulot
Copy link
Member

dieulot commented Mar 10, 2024

Thanks for your great PR!

Release-wise, my hope is that I can deliver a major version incorporating it soon enough. If that isn’t done by mid-April, I’ll release a minor version just for it.

Regarding the ability to cancel a request, it was removed way back in 2019 with 3.0.0, mostly because it made the code easier. (It should eventually come back.)

@domenic domenic deleted the speculationrules branch March 28, 2024 06:54
@domenic
Copy link
Contributor Author

domenic commented Aug 21, 2024

Hi @dieulot, any progress on releasing a new version? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants