SPA Soft Navigation Checker
See whether your browser reports soft navigations, watch a demo SPA log its route changes with paint timing, and copy an instrumentation snippet for your own app.
This browser's capabilities
Checked live in your browser right now. Soft-navigation entries are the authoritative signal; without them the demo below uses a labeled heuristic.
Live demo: a tiny SPA with three routes
Click the routes. Each switch uses history.pushState like a real single-page app, and the log records how the navigation was detected and how long the next paint took.
Demo home
This panel pretends to be the landing route of a single-page app. Nothing reloaded when you got here.
Demo docs
Route two. In a real app this is where documentation content would stream in after the route change.
Demo pricing
Route three. The URL bar moved, the document did not reload, and the log below timed it.
Navigation log
| # | Route | Detected by | Nav to paint | Click handler time |
|---|---|---|---|---|
| No navigations yet. Click a route above. | ||||
Click handler time is the synchronous work your click triggered, not full INP (INP also waits for the next paint and event processing). Rows labeled heuristic are estimated by the demo; rows labeled measured come from the browser's soft-navigation entries.
Copyable instrumentation snippet
Paste this into your own single-page app. It logs every soft navigation with paint timing, and degrades gracefully with a clear warning when the browser does not expose the entry type.
Why soft navigations matter
Most of the web's most-used apps are single-page apps: you click, the URL changes, new content appears, and the document never reloads. For years the browser's performance tooling had no vocabulary for that moment. Largest Contentful Paint described only the first screen, and everything after it was invisible to Core Web Vitals.
Soft-navigation entries fix the blind spot: the browser detects the pushState or replaceState, watches for the content that renders as a result, and emits a timing entry for the route change. INP then covers the other half of app performance, how the page feels when you interact with it, across the whole session rather than just at load.
If your analytics still report one LCP number per session for an SPA, they are describing the lobby and ignoring every room. Instrumenting soft navigations is how you start measuring the rooms.
Frequently Asked Questions
What are soft navigations?
A soft navigation happens when a single-page app changes route with the History API (pushState or replaceState) instead of loading a whole new page. The browser now exposes these as soft-navigation performance entries, so tooling can time them the way it times full page loads.
Why do Core Web Vitals miss SPA route changes?
Largest Contentful Paint and Cumulative Layout Shift are measured per page load. In a single-page app the document never reloads, so the classic CWV metrics only describe the first screen. Soft-navigation entries let the browser attribute paint timing to each route change, which is what the demo log on this page shows.
What does INP measure?
Interaction to Next Paint (INP) measures how long the page takes to respond to your clicks, taps and keypresses, from the interaction until the browser paints the next frame. Unlike older metrics it covers the whole page lifecycle, including interactions long after load, which is why it matters for apps more than for static pages.
What does heuristic mean in the demo log?
When this browser does not expose soft-navigation performance entries, the demo cannot get an authoritative timing from the browser. It falls back to a heuristic: it records the pushState call and measures the time to the next painted frame itself. The log labels each row so you always know which rows are measured by the browser and which are estimated.
Is any of my data uploaded?
No. Detection, the demo SPA and the snippet generator run entirely in your browser. Cubbbix receives nothing about your browser or your testing unless you choose to copy the report and send it to someone yourself.
Check Out Other Popular Tools
Change Image Brightness
Increment or decrement the brightness of any image. Make your picture lighter or darker instantly in your browser with 100% privacy.
JXL to BMP Converter — Free Online JPEG XL to BMP Converter
Convert JPEG XL (.jxl) images to BMP online for free. Lossless and uncompressed, converted privately in your browser. No uploads, no sign-up.
Hex to Text
Free online tool to instantly convert hexadecimal code back into plain text. Decode hex strings securely in your browser.
Was this tool helpful?
Comments
Loading comments...