Here's the thing: benefits of optimizing Core Web Vitals are diverse, SEO and conversion being part of them. But there's also 'too fast'. For example when a website is prefetching pages that a user is likely to visit.
The speed paradox
When combined with Speculation Rules, a page might have been fully rendered even before visiting. This is called perendering and results in instant pageloads.
Prerender is usually a positive experience for users as it allows fast page rendering—often instant
web.dev
Prerendering
Modern browsers support prerendering through Speculation Rules, allowing pages to be fully rendered before a user clicks. This browser-native API can be implemented via inline JSON or HTTP headers, enabling incredibly fast page loads with Largest Contentful Paint times below 175ms.
Pageloads can be too fast
In cases of near-instant loading, users may struggle to notice content updates. Headers, text, and even hero images can change without registering in the user's perception. This is where View Transitions API becomes interesting.
Limited availability
View transitions is not Baseline because it does not work in some of the most widely-used browsers.
- Only supported in Chrome 111, Edge 111 and Safari 18
- Continue reading about css view transitions 1
Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.
View Transition API
The beauty of View Transitions lies in its simplicity. No JavaScript needed as the basic implementation requires only minimal CSS. Page transitions will start to feel more smooth already after adding the following to your stylesheet:
@view-transition {
navigation: auto;
}
Providing visual confirmation
The View Transitions API provides a native solution for creating smooth, animated transitions between page states. By implementing this API, we've added subtle animations that:
- Provide visual confirmation of navigation
- Make state changes more comprehensible
- Maintain context between page views
- Create a more polished, app-like feel
SPA vs MPA and browser support
This app-like feeling is one of the key things that SPAs tried to address. And SPAs (or just client side rendering in general) were actually the first types of rendering that could benefit from View Transition SPA since Chrome 111 (March 2023).
Two major developments expanded its reach in 2024:
- Cross-document View Transitions (Chrome 126, June 5th 2024)
- Enabled support for Multi-Page Applications (MPAs)
- Allows transitions between full page renders
- Safari Support (Safari 18.2, December 2024)
- Including cross-document in Safari 18.2 (December 9th 2024)
- Expanded the feature's reach significantly
Limited availability
Cross-document view transitions is not Baseline because it does not work in some of the most widely-used browsers.
- Only supported in Chrome 126, Edge 126 and Safari 18.2
- Continue reading about cross doc opt in
Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.
Cross-document support (so, for MPAs) is interesting as the page is re-rendered upon user navigation. And the View Transition API now comes with support for those use-cases as well.
Taking it to the next step
We didn't stop with the basic implementation. Instead, we introduced additional JavaScript to detect:
- from which page a user is navigating
- and to what page that user is navigating to
When then determine if there should be dynamic identification of elements:
- tracks navigation paths
- identifies corresponding elements across pages
- apply targeted transitions
For example, elements on a blog detail page such as this very article you're reading know needs to be tied together with the same element on the listing page. This can be done using the new view-transition-name
CSS property. In our case, this became as following:
/* blog detail */ body.blog article[itemscope] h1[itemprop] { view-transition-name: heading; } body.blog article[itemscope] .lead { view-transition-name: intro; } body.blog .blog-hero picture img { view-transition-name: hero; }
When done correctly, a browser knows the position of the previously visited page and the upcoming page upon page navigation and can start the animation of all individually marked elements.
Page transitions over at our help-center got enhanced in the same way. However, there's a weird quirk on longer pages where the width of the text containing seems to be jumping. There's a fix underway as part of Chrome 132.
Optimize first, animate second
Before implementing View Transitions, ensure your baseline performance metrics are solid:
- Monitor your TTFB and FCP using RUM tools
- Identify and fix caching gaps
- Verify performance improvements across all page types
Only then should you enhance your site with View Transitions - creating that perfect balance of speed and visual feedback that delights users while maintaining peak performance.
Free Core Web Vitals tool
Our publicly available Core Web Vitals tool using Google's free data is a start. However, it won't help you spot outliers nor underperforming pages automatically.
Detailed TTFB with alerts
Instead, start monitoring your real user metrics today and lay the groundwork for smooth, engaging page transitions.