v147 · Origin Trial · Performance

SoftNavigation Performance Entry

Two new Performance Timeline entry types for Single-Page Application route changes: soft-navigation and interaction-contentful-paint. Together they expose navigationType, interactionId, navigationId, and the largest contentful paint attributed to a route change.

Origin Trial (Chrome 147-149). SoftNavigation entries require the SoftNavigationHeuristics origin trial or chrome://flags/#soft-navigation-heuristics. Demos simulate the API output when the flag is not enabled.

concepts

  1. SPA Navigation Observer

    Wire PerformanceObserver to soft-navigation and interaction-contentful-paint. Trigger SPA route changes and watch the entry arrive with navigationType, interactionId, numeric navigationId, and largestInteractionContentfulPaint.

  2. Core Web Vitals Dashboard

    See how a soft-navigation entry seeds route attribution, then use interactionId to match interaction-contentful-paint entries for soft-navigation LCP while other vitals remain sliced by navigationId.

  3. Route Latency Heatmap

    Navigate between routes repeatedly and watch qualifying SoftNavigationEntry.duration statistics accumulate into a route heatmap while URL-only and no-paint candidates stay in the failure log.

  4. Framework Integration Guide

    How to integrate soft-navigation and interaction-contentful-paint observers into React, Vue, and vanilla JS apps. Three tabbed mini-apps show native guards, fallback samples, slow routes, and no-entry cases.

  5. Compatibility Lab

    Probes the soft-navigation and interaction-contentful-paint entry types, route-change heuristic inputs, navigationType, interactionId, and fallback performance.mark() / performance.measure() instrumentation.

why it shipped

Single-Page Applications handle routing in JavaScript, so the browser historically only measured page-load LCP and grouped later route work into the original document. Soft Navigation entries define a browser-owned heuristic for user-interaction-driven URL changes that produce contentful paints, then expose identifiers that analytics can use to slice route-level LCP, INP, and CLS for React Router, Next.js, Nuxt, Svelte Kit, or hand-rolled routers.

references