v150 · Performance

Soft Navigation Performance Entry

Core Web Vitals for single-page apps. When a React, Next.js, or SvelteKit app pushes a new URL and re-renders without a full page load, Chrome 151 now records a soft-navigation performance entry and resets the LCP/CLS/INP baseline for that route.

concepts

  1. SPA Navigation Observer

    A minimal single-page app with three "routes" using history.pushState. A PerformanceObserver watches for soft-navigation entries and logs each one — name, start time, and duration — in real time.

  2. Core Web Vitals per Route

    Demonstrates measuring Largest Contentful Paint per soft-navigation segment: when a new route loads the browser resets the LCP clock, so largest-contentful-paint entries after a soft navigation belong to that route's budget.

  3. Navigation Timeline

    A visual timeline that records every soft navigation event with its start time and duration. Navigate between tabs and watch the bars appear. The timeline mirrors what browser devtools show in the Performance panel under "Soft navigations".

  4. Observer Playground

    Live read-out of all PerformanceObserver entry types including soft-navigation. Toggle individual entry types on or off, trigger navigations, and see the raw JSON of each entry as it arrives.

  5. RUM Dashboard

    A mini single-page app with five routes. A PerformanceObserver collects every soft-navigation entry and feeds a per-route summary table showing visit counts, average duration, and last duration — the same aggregate view a RUM SDK computes before beaconing to a server.

  6. LCP per Route

    Demonstrates how Chrome resets the Largest Contentful Paint clock after each soft navigation. Navigate between routes in the mini SPA and watch largest-contentful-paint entries arrive with start times relative to the most recent soft-navigation boundary — independent of earlier routes.

why it shipped

Single-page apps dominate the modern web, but Core Web Vitals — LCP, CLS, INP — were only measured on traditional page loads. A SPA user clicking between routes was invisible to the browser's performance accounting: the URL changed, the content changed, but there was no "navigation" to anchor the metrics to. This made it impossible to track per-route performance, identify slow transitions, or compare CWVs across different parts of an app. The Soft Navigation Performance Entry provides a standardised anchor point: when an interaction causes a URL push and a meaningful DOM change within a heuristic time window, the browser emits a soft-navigation entry, resets the LCP/CLS clocks, and gives tools and RUM libraries an accurate per-route baseline.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗