View transitions + speculative rules

I’ve been very interested in the potential of view transitions since they were called navigation transitions. Recently, they’ve landed in Chrome stable v126 with a more stable API. Initially it was a SPA-only API but has now been opened up to MPA, first with an experimental meta tag and now via a CSS at-rule.

@view-transition {
  navigation: auto
}

This gives you a cross-fade document! However, on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens—this is not ideal.

Speculation Rules API

Another API that has been shipped is the Speculation Rules API, which allows you to speculatively pre-render routes based on specific rules or even glob patterns. This has been accomplished for a long time in user land using various tricks around hover/focus intent and more recently with browser abilities like modulepreload and prefetch. One of the interesting features of the Qwik framework was its granular ability to load components based on various intents.

Quick transition

@view-transition {
  navigation: auto
}

With the addition of speculative rules:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "href_matches": "/*"
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

This will start to preload the document on user hover/pointerdown after 200ms with the eagerness setting at moderate. So even on a slow 3G connection, this can make a meaningful impact.

You can see this in action on this very blog if the browser supports these two features.

Combining these two helps mitigate the original tradeoff of the “pause” between navigations while the browser loads the next document. With speculative prerender, it can render the page before the user clicks, making the transition near-instant.

This is, of course, a Chromium-only implementation at the moment, and it’s unclear what Mozilla’s stance is on it.