What are Soft Navigations?
Traditionally, when you went from page to page on a website, a new html response was received from the server and the page loaded. You'll here this type of architecture called 'multi-page applications' or MPA for short. Moving between pages is easy for the browser to track, and the process is a navigation.
Soft navigations something that happens in single page applications (SPA), and when you use javascript to load the new page content without an actual navigation and new page load. Note that this can happen in pure client side rendered sites, that just send a skeleton shell html page, then JavaScript populates all the content, and more hybrid server side rendered sites that send a full html page, but then JavaScript takes over for subsequent navigations. Common examples of frameworks that (can) do this are Next.js, Nuxt, SvelteKit and there's plenty more.
How does that effect Core Web Vital Measurements?
Currently, the core web vitals are based on navigation, meaning that if someone is browsing around a SPA, some metrics like LCP and FCP will only collect on the initial page the user landed on. INP and CLS will be across the whole session, but attributed to the first URL visited.
This means that it's hard for people with a SPA site to monitor what's actually happening in terms of performance across the whole site.
There is generally a lot less data collected (because it's just one data-point per session) and some data is a blend of multiple URLs, making hard to know which actual URL has an issue.
It also means that it's harder to use CWV metrics to prove or disprove the age old argument that the performance hit of the SPA architecture on first visit is worth it because of the improvement in subsequent navigations
Soft Navigations Support
Fortunately, the Chrome team have recognised this shortcoming, and are working to address it. I recommend reading their article Experimenting with measuring soft navigations for more details and background.
As part of this experimentation, an experimental soft-navs branch of the excellent web-vitals library has been released. Combining that with the associated Chrome origin trial finally allows SPA sites to start tracking user metrics in a better way.
Some Metrics on Soft Navigation
As part of this experiment, I've added the soft-navs branch of web-vitals to this site, and I've been collecting the metrics, broken down by navigation type for a while, and I thought I'd share some of the results.
The data below is from 26th December 2023 to 22nd January 2024, I'm only detailing LCP and FCP here, on this site CLS, INP are FID are low and there's no real difference based on navigation type, and TTFB isn't a relevant metric for a soft navigation.
Largest Contentful Paint
| Navigation Type | LCP 75th Percentile (seconds) |
|---|---|
| back-forward-cache | 0.06 |
| soft-navigation | 0.13 |
| prerender | 0.26 |
| reload | 0.33 |
| restore | 0.65 |
| back-forward | 0.87 |
| navigate | 1.10 |
To see what all these navigation types are, see the comment above navigationType on the web-vitals
Github repository
As you can see, the LCP is over 8 times better for soft navigations vs. a normal navigation.
First Contentful Paint
UPDATE:
Barry Pollard, Web Performance Developer Advocate on
Google Chrome, who is working on the Soft Navigation stuff was kind enough to get in touch to question FCP
data
here.
Soft Navigations have had two trials, we're currently on the second, this current one doesn't include FCP, so the figured below are gathered from users with very out-of-date Chrome (version 115 or earlier). With the sample size here being quite small, and from out of date browsers, paired with the fact it was obviously not included in the current trial for a reason, I wouldn't give a lot of confidence in the FCP data here.
| Navigation Type | FCP 75th Percentile (seconds) |
|---|---|
| back-forward-cache | 0.05 |
| prerender | 0.26 |
| reload | 0.33 |
| soft-navigation | 0.51 |
| restore | 0.65 |
| back-forward | 0.86 |
| navigate | 1.08 |
Soft navigations are still faster, if by a slightly narrower margin. However as per the update, this is currently not a metric you can gather for soft-navigations for even mostly updated users.
Conclusion
It's not reasonable to call these results definitive, but for this site at least, it seem to hold that the soft navigations are are significantly faster experience for the user, and probably worth doing, and in this case, for this site, the improvement for 2nd navigation onwards are a good trade-off
It's also worth noticing that it's a really, really good idea to make sure you're not blocking back-forward-cache (bfcache).