The Impact of CSS View Transitions on Web Performance

The Impact of View Transition API on Performance

The View Transition API allowances developers to enable smooth visual transitions between previews on the same site, even for multi page applications (MPA's). These view transitions are handles by CSS transitions between 2 page views. Historically, CSS transitions during page load, cause a delay the LCP metrics. We suspected that these types of in-between-page view transitions have performance implications as well, particularly on mobile devices and slower CPUs. Our research and real-user monitoring (RUM) data have confirmed these suspicion along with other interesting insights into its effect on Core Web Vitals, especially the Largest Contentful Paint (LCP).

>

RUM Data Findings

To validate our idea that that view-transition negatively impacts the Largest Contentful Paint, we set up a series of A/B tests on 5 different sites and let these run for 7 days. On 50% of the pageviews we added @view-transition { navigation: auto;} to the page it;s stylesheets while the other 50% of pageview were served without these styles.

We collected over 500.000 pageviews where eventually 120.000 mobile pageviews were analyzed because they originated from mobile navigations withing the same site.

Real-user monitoring data has uncovered that implementing the View Transition API adds approximately 70ms to the Largest Contentful Paint for repeat mobile pageviews. This increase in LCP time is noteworthy, considering Google's recommendation that LCP should occur within 2.5 seconds of when the page first starts loading for a good user experience. 

CPU Performance Correlation

Having confirmed the negative impact of view transitions on LCP, we investigated further. We procedded to set up a series of experiments to automatically test the same 2 pages with and without view-transitions. The results show a clear  correlation between CPU speed and the impact of view transitions on LCP. The findings indicate that the slower the CPU, the more pronounced the negative effect on LCP when using view transitions

If you would like to test this for yourself visit our https://corewebvitals.github.io/view-transition/">view transition experiment homepage on github

These results highlight three key observations:

• View transitions slow down the LCP: Page views with view transitions are slower then pageviews without view transition effects.
• CPU speed is an important factor: CPU speed has a high correlation with LCP difference in views with and without page transition effects
• There is a pagespeed 'sweet spot': At 6x slowdown LCP has a better performance without network cache. The simple reason is that at this CPU speed the LCP element has not yet been decoded without network caching and the transition is applied to a blanc page. Immediately after the simpler transition to a blank page the LCP element is painted. Apparently this is the sweet spot where it is more efficient to transition to a blank page then to transition between images. From a UX perspective it is better to transition between images of course.

Understanding view-transition: navigation: auto;

Traditionally, implementing view transitions required extensive use of CSS and JavaScript.. The View Transition API simplifies this process by allowing developers to define transitions declaratively. The View transition API works by capturing snapshots of the old and new states of a document, updating the DOM while suppressing rendering, and uzing CSS animations to execute the transition. 

Implementation Example

Here's a basic example of how to use view-transition-name: auto in your CSS:

@view-transition {
  navigation: auto;
}

Or in combination with a media query to target tablet or desktop devices:

@media (min-width: 768px){
  @view-transition{
    navigation:auto
  }
}

This simple addition allows the browser to handle the transition of this element automatically when a view transition occurs.

Balancing Aesthetics and Performance

The View Transition API offers a smooth and possibly visually pleasant transitions between navigations. This might lead to small benefits in business metrics like lower bounce raters and possibly higher sales.  However, especially on low end browsers like mobile devices, developers must carefully consider its performance implications. Here are my recommendations:

• Performance Testing: Conduct thorough testing across various devices and network conditions to ensure that the benefits of view transitions outweigh any potential performance costs.
• Selective Implementation: Be careful when applying view-transitions. Test it's effect on performance and business metrics. Then carefully consider on which devices types to implement view transitions.