Implement new module to use Speculation Rules API for prerendering documents on hover #733

felixarntz · 2023-05-22T23:28:36Z

Summary

Fixes #897.

ThisPR is for a new module module to use the recently introduced Speculation Rules API to prerender URLs in WordPress as soon as the user hovers over them.

Learn more about the Speculation Rules API

Related: URL pattern testing tool

How to use

The Speculation Rules API is available in Chrome 108 or newer.
The full set of features however, which are needed for this module to work, are only available via origin trial in Chrome 113 or newer. You need to sign up for the origin trial with the origin of the site where you would like to test it. Sign up for the origin trial
- Once you have signed up and received your origin trial token, you can set it in a PLSR_ORIGIN_TRIAL_TOKEN constant (e.g. in your wp-config.php file) and the module will take care of including its opt-in tag.
The API is expected to become fully available without origin trial in Chrome 121.
For debugging in Chrome Developer Tools, you can enable a new section by going to Settings > Experiments (within the developer toolbar) and check the box "Enable Preloading Status Panel in Application panel" (towards the very end of the list). This will enable a "Preloading & Prerendering" section in the "Application" panel (see screenshot below).

Preloading & Prerendering section in Chrome Developer Tools

Relevant technical choices

Currently, the list of speculation rules is hard-coded, which is just a starting point. Eventually, the module should be enhanced to include an API to manage the speculation rules programmatically in WordPress.

Checklist

PR has either [Focus] or Infrastructure label.
PR has a [Type] label.
PR has a milestone or the no milestone label.

…dering.

modules/js-and-css/speculation-rules/hooks.php

modules/js-and-css/speculation-rules/helper.php

modules/js-and-css/speculation-rules/hooks.php

…ing.

felixarntz · 2023-11-13T21:39:00Z

@westonruter @domenic I've addressed your feedback.

Note that the unit test failures are due to an unrelated problem in trunk, see #881 for a fix for that.

domenic · 2023-11-14T01:26:05Z

This looks great to me!

Note that if you want to only target Chrome 121+, you could simplify a couple things:

No origin trial token should be necessary. (Pending approvals...)
The ?* and ?*#* parts are not necessary anymore. (Already shipped, https://chromium-review.googlesource.com/c/chromium/src/+/4975595 .)

felixarntz · 2023-11-14T23:32:21Z

@domenic

Note that if you want to only target Chrome 121+, you could simplify a couple things:

No origin trial token should be necessary. (Pending approvals...)

The ?* and ?*#* parts are not necessary anymore. (Already shipped, https://chromium-review.googlesource.com/c/chromium/src/+/4975595 .)

For now, I'll keep the Origin-Trial. Eventually this should be removed for sure, before the module ships in a Performance Lab version. But now for early testing IMO worth keeping.

For your second point, probably the same. Unless this is already shipped or will ship in an earlier Chrome version? Is there any feature detection available for that change?

domenic · 2023-11-15T01:05:57Z

For your second point, probably the same. Unless this is already shipped or will ship in an earlier Chrome version? Is there any feature detection available for that change?

This change is also Chromium 121+. It's harmless to keep the extra parts, so if you're targeting such browsers then I'd suggest keeping it.

You can feature-detect this using the following:

const hasNewSemantics = (new URLPattern("/*", "https://example.com/a?b&c")).test("https://example.com/d?e");

modules/js-and-css/speculation-rules/helper.php

westonruter · 2023-11-16T17:59:00Z

modules/js-and-css/speculation-rules/helper.php

+		'/wp-login.php',
+		'/wp-admin/*',


I think it's also important to include any URL that includes a _wpnonce query parameter. Typically such nonce URLs point to the admin, but there are key examples where this is not the case: https://wpdirectory.net/search/01HFCME02F3HYMR93WDWV6KSX4

For example, BuddyPress has frontend nonce links to favorite/unfavorite a link.

Right, this is a tricky one though. Nonces can also be sent through any other kind of parameter. I'm not sure how far we should go here by default, as what you're suggesting would just be a "best guess", but not actually reliable. So potentially it's better to support just what WordPress core does and require plugins to take care of this themselves. I don't think core uses nonces in the frontend.

I realize this may not work either (as adoption is hard), but also questioning whether it's reasonable to start "patching" for what plugins may do here.

It's true that nonces can be sent via any parameter, but the wp_nonce_url() function uses the _wpnonce parameter by default. So I think it makes sense to omit them by default.

modules/js-and-css/speculation-rules/helper.php

jeremyroman · 2023-11-17T20:58:28Z

I noticed this unconditionally chooses prerender. Could/should this be an administrator-controlled setting? There are reasons a developer might prefer prefetch to prerender under some circumstances (for example, a script which is not ready for prerender runs, or a prefetch could succeed but the site would be too heavy for prerender to be practical).

jeremyroman · 2023-11-17T21:03:38Z

modules/js-and-css/speculation-rules/helper.php

+					// Prerender any URLs within the same site.
+					array(
+						'href_matches' => '/*\\?*',
+						'relative_to'  => 'document',


relative_to is unnecessary if the rules are inline in the document (but if you do have some reason for this to be relative_to, the below exclusion probably should be too.

Also, if WordPress is installed at a path other than /, does that need to be accounted for?

Added support for that in ce0e56b

…in subdirectories.

modules/js-and-css/speculation-rules/class-plsr-url-pattern-prefixer.php

modules/js-and-css/speculation-rules/helper.php

westonruter · 2023-11-27T20:29:00Z

modules/js-and-css/speculation-rules/helper.php

+	$base_href_exclude_paths = array(
+		$prefixer->prefix_path_pattern( '/wp-login.php', 'site' ),
+		$prefixer->prefix_path_pattern( '/wp-admin/*', 'site' ),
+	);


What about the other PHP files outside of the normal frontend:

wp-activate.php

wp-signup.php

I was thinking about those too, but left them out for now. We can probably add them, but I was thinking that it's not critical and could be done in its own issue once we have a first version of the module merged (i.e. this PR).

adamsilverstein · 2023-12-04T18:32:22Z

modules/js-and-css/speculation-rules/helper.php

+
+	$base_href_exclude_paths = array(
+		$prefixer->prefix_path_pattern( '/wp-login.php', 'site' ),
+		$prefixer->prefix_path_pattern( '/wp-admin/*', 'site' ),


Why exclude all wp-admin paths, wouldn't you want to enable prefetching on those to speed up wp-admin? or is this intended strictly for front end so far?

@adamsilverstein Yes, for now this is only frontend. The whole speculation rules tag is also printed in the frontend only.

Doing it in WP Admin has its own set of complexities, and is less beneficial IMO. Those pages are also a whole lot more dynamic, which makes prerendering difficult.

Preloading the editor when hovering over the link in the admin bar would be interesting in the future.

felixarntz · 2023-12-06T00:01:24Z

This PR is now ready for full review and, once approved, can be merged into the new feature branch. Please see the new module proposal #897 for additional context, including follow up work.

modules/js-and-css/speculation-rules/class-plsr-url-pattern-prefixer.php

Co-authored-by: Weston Ruter <[email protected]>

felixarntz added 3 commits May 19, 2023 14:29

Implement basic module to experiment with speculationrules for preren…

9b20562

…dering.

Include proper backslashes in rules source.

c7f365e

Add hook to make it easy to use origin trial.

286e50a

felixarntz added [Focus] JS & CSS no milestone PRs that do not have a defined milestone for release labels May 22, 2023

westonruter reviewed May 23, 2023

View reviewed changes

modules/js-and-css/speculation-rules/hooks.php Outdated Show resolved Hide resolved

modules/js-and-css/speculation-rules/hooks.php Outdated Show resolved Hide resolved

adamsilverstein reviewed May 24, 2023

View reviewed changes

modules/js-and-css/speculation-rules/helper.php Show resolved Hide resolved

westonruter reviewed May 24, 2023

View reviewed changes

modules/js-and-css/speculation-rules/helper.php Show resolved Hide resolved

Merge branch 'trunk' into speculationrules-experiment

cf16aed

domenic reviewed Nov 7, 2023

View reviewed changes

modules/js-and-css/speculation-rules/hooks.php Outdated Show resolved Hide resolved

felixarntz added 6 commits November 13, 2023 12:21

Merge branch 'trunk' into speculationrules-experiment

5ec445a

Print speculationrules script tag directly without using JS.

5b79bb8

Introduce filter for which paths to exclude for speculative prerender…

25fc9da

…ing.

Add CODEOWNERS entry.

ce1c469

Add initial test coverage for Speculation Rules.

f32401f

Fix function name caught as misspelling.

346f0cb

Merge branch 'trunk' into speculationrules-experiment

a1a65cf

westonruter reviewed Nov 16, 2023

View reviewed changes

jeremyroman reviewed Nov 17, 2023

View reviewed changes

felixarntz added 2 commits November 20, 2023 09:43

Address CR feedback.

6d338ab

Add TODO regarding eventual wildcard removal.

7404f02

felixarntz requested a review from westonruter November 20, 2023 17:52

felixarntz changed the base branch from trunk to feature/speculationrules November 20, 2023 17:52

Add speculation rules URL pattern prefixer to support WordPress site …

ce0e56b

…in subdirectories.

westonruter reviewed Nov 27, 2023

View reviewed changes

Add missing return type hint.

cd536d5

adamsilverstein reviewed Dec 4, 2023

View reviewed changes

Remove unnecessary relative_to directive.

5c134db

felixarntz mentioned this pull request Dec 5, 2023

Module Proposal: Speculation prerendering & prefetching with the Speculation Rules API #897

Closed

felixarntz marked this pull request as ready for review December 6, 2023 00:00

felixarntz requested review from aristath, sgomes and JustinyAhin as code owners December 6, 2023 00:00

felixarntz changed the title ~~Implement basic module to experiment with speculationrules for prerendering~~ Implement new module to use Speculation Rules API for prerendering documents on hover Dec 6, 2023

westonruter approved these changes Dec 6, 2023

View reviewed changes

modules/js-and-css/speculation-rules/class-plsr-url-pattern-prefixer.php Outdated Show resolved Hide resolved

Simplify escaping.

813a757

Co-authored-by: Weston Ruter <[email protected]>

felixarntz requested review from adamsilverstein, joemcgill, swissspidy and mukeshpanchal27 December 6, 2023 16:53

swissspidy approved these changes Dec 7, 2023

View reviewed changes

mukeshpanchal27 approved these changes Dec 11, 2023

View reviewed changes

felixarntz merged commit 307034e into feature/speculationrules Dec 15, 2023

felixarntz deleted the speculationrules-experiment branch December 15, 2023 20:49

westonruter mentioned this pull request Apr 15, 2024

WooCommerce "Remove from cart" links are prefetched/preloaded in Speculative Loading #1141

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement new module to use Speculation Rules API for prerendering documents on hover #733

Implement new module to use Speculation Rules API for prerendering documents on hover #733

felixarntz commented May 22, 2023 •

edited

Loading

felixarntz commented Nov 13, 2023

domenic commented Nov 14, 2023

felixarntz commented Nov 14, 2023

domenic commented Nov 15, 2023

westonruter Nov 16, 2023

felixarntz Nov 20, 2023 •

edited

Loading

westonruter Nov 27, 2023

jeremyroman commented Nov 17, 2023

jeremyroman Nov 17, 2023

felixarntz Nov 21, 2023

westonruter Nov 27, 2023

felixarntz Nov 28, 2023

adamsilverstein Dec 4, 2023

felixarntz Dec 5, 2023

swissspidy Dec 7, 2023

felixarntz commented Dec 6, 2023

Implement new module to use Speculation Rules API for prerendering documents on hover #733

Implement new module to use Speculation Rules API for prerendering documents on hover #733

Conversation

felixarntz commented May 22, 2023 • edited Loading

Summary

Learn more about the Speculation Rules API

How to use

Relevant technical choices

Checklist

felixarntz commented Nov 13, 2023

domenic commented Nov 14, 2023

felixarntz commented Nov 14, 2023

domenic commented Nov 15, 2023

Choose a reason for hiding this comment

felixarntz Nov 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeremyroman commented Nov 17, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

felixarntz commented Dec 6, 2023

felixarntz commented May 22, 2023 •

edited

Loading

felixarntz Nov 20, 2023 •

edited

Loading