May 28, 2023

View transitions + Quicklink

A great thing about the multi-page view transitions spec (read this post from Dave Rupert for an intro) is that it’s pure progressive enhancement. If a browser doesn’t support it, things work the way they’ve worked since Mosaic.

One caveat is that they don’t always feel instant. It makes sense; you have to render what’s on the other side of a link if you want to smoothly transition between old and new. The lag between clicking and the transition starting is the time it takes your server to load the subsequent page. If you want to fix that, you’ve got two options:

Make your site or app faster. There’s a long list of reasons why fast is good. View transitions are another.
Use Quicklink. It pre-fetches pages based on links that are in your viewport, network conditions permitting.

These aren’t mutually exclusive options. This here website is lightweight and statically rendered (fast), and adding Quicklink turned fast into instant.

The great thing about Quicklink is that it’s also progressive enhancement. It’s about 1KB of non-blocking javascript that builds on top of how the platform works, instead of attempting to wholesale replace it like client-side routing alternatives. There’s no high-stakes failure mode where users can’t click a link. There’s no strange behavior with history or scroll position. Along with view transitions, you get most of the upside, none of the downside.

The “enhance instead of replace” approach pays in other ways too. Quicklink predates view transitions by years. It didn’t have to be updated to support the new spec, because building for the platform is building for the future.