Open westonruter opened 2 weeks ago
So the problem is that Speculation Rules is really only for safe, idempotent, requests (i.e. simple links that make GET requests).
Forms, by their very nature usually aren't guaranteed to be see (even if they result in GET requests that should in theory be idempotent). So currently the speculation rules API doesn't activate a prerender page even if it matches a <form>
's action
URL. Which is a shame since search results, despite often being from a form, are usually safe to prerender—they are an exception to the usual rule that says forms aren't usually safe.
Now the original poster from the above tweet (Tim) gets around this with a little bit of cleverness by utilising prerender, even if he doesn't directly use that:
So it's a fast load, even if not an instant one.
However, this depends on the Search Results page being cacheable (at least for a short period) so the earlier prerender isn't completely wasted and is resuable from the HTTP Cache. And in my experience a lot of WordPress sites don't make the HTML document cacheable 😔 For a prefetch or prerender that's used directly that's OK as the Speculation Rules API specifically allows non-cacheable resources to be speculation. But for an indirect usage, which is basically just prefilling the HTTP cache for you, this is not OK.
WDYT? Am I being overly pessimistic or does this mean we potentially can't enhance the plugin to do this?
@tunetheweb I got instant loading working: https://github.com/WordPress/performance/pull/1297
As noted there:
It seems the key is how the form
submit
event is handled. If the default form submission handling is done, then the speculative prerender is not reused. However, if thesubmit
event handler doespreventDefault
and then manually navigates to the URL that the search submission was going to go to anyway, then it works!This seems like a hacky workaround for something the browser should be doing automatically for
GET
form submissions.
This seems like a hacky workaround for something the browser should be doing automatically for GET form submissions.
Agreed. Raised this: https://github.com/WICG/nav-speculation/issues/322
Also as noted in the PR I think you'll need to use history.pushState
to add a history entry to navigate back. But not sure I like this overall approach anyway to be honest...
Also as noted in the PR I think you'll need to use
history.pushState
to add a history entry to navigate back.
@tunetheweb Why would that be needed? It's not navigating via location.replace()
. If you try that test page you can see the back button works just fine.
Ah ignore me then. Been a while since I use this to update a URL! :-)
Feature Description
See https://x.com/tunetheweb/status/1800104005873655924 from @tunetheweb