Web Analytics improves soft navigation measurement for Single Page Applications (SPAs)
Cloudflare Web Analytics (Real User Monitoring) is rolling out accuracy improvements to client-side soft navigations.
This change may alter the volume of pageviews reported in the dashboard and GraphQL API, though the extent depends on your front-end architecture and visitor traffic patterns.
Single Page Applications (SPAs)—such as websites built with React, Angular, Vue, or Svelte—predominantly use soft navigations. Soft navigations avoid fully unloading the current page and rendering the next one from scratch as visitors navigate.
Any client-side navigation counts as a soft navigation, including navigations intercepted by the Navigation API ↗ or triggered by the History API ↗. This means a non-SPA website can have soft navigation activity if its implementation uses these APIs.
The main improvement comes from Google Chrome's new Soft Navigation API ↗. It natively measures Largest Contentful Paint (LCP) on soft navigations, removing a blind spot in perceived loading speed across pageviews.
We've extended our navigationType values to segment these different types of navigations:
navigationType |
New? | Description |
|---|---|---|
navigate |
❌ | Hard navigations that traditional websites (or "Multi Page Applications") perform when clicking links or submitting forms |
soft-navigation |
✅ | Where the new Soft Navigation API ↗ is available and a visitor makes a client-side navigation, we record these events |
routing-apis |
✅ | Where the native Soft Navigation API is unavailable (e.g. Safari, Firefox, older Chromium-based browsers), we fallback to measuring soft navigations using the Navigation API ↗ or History API ↗. We cannot collect LCP for these, but the other Core Web Vitals are present. |
Prior to this change, we only used History API and all navigations were bucketed into navigate.
For more information, refer to the Navigation Types and Web Analytics SPA documentation pages.