Measure LCP After an SPA Route Change in Chrome DevTools
The route loads fast from the address bar but feels slow when you click to it inside the app. How do you measure that second journey in DevTools?
- Record the actual in-app navigation to investigate a slow SPA transition.
- Live Metrics labels detected transitions with SOFT NAV; traces and Insights support further analysis.
- A direct load and an internal navigation can have different LCP elements.
Open Performance, then navigate inside the app
When the initial page is fast but the next screen is slow, reproduce that transition with DevTools open. The Performance panel's Live Metrics view updates for client-side navigations and identifies them with a SOFT NAV badge.
Click the link or menu item that leads to the slow screen. Check the updated metric and its LCP element. The panel overview explains how hovering a metric exposes more detail. These are local measurements from your device and connection; preserve those conditions and the starting route when comparing runs.
Capture the route change, not just a reload
Apply the documented runtime recording workflow to the interaction:
- Start on the screen before the slow transition and click Record.
- Use the app's link or button to reach the destination.
- Click Stop after the new screen appears.
- Inspect the soft-navigation marker and the transition's Insights.
Record and reload captures a page load instead. Opening the destination directly can miss work that occurs specifically during an internal transition.
The October DevTools update, published September 22, adds soft-navigation analysis in Insights after Live Metrics and trace support arrived in Chrome 152. That connects the route's measurement to the diagnostic views used to investigate it.
Initial LCP does not measure the next screen
The original largest-contentful-paint entry is finalized on user interaction. Chrome's soft-navigation measurements instead consider new content painted in association with the interaction that caused the transition.
The element can change too. If a large banner stays in place while the text underneath changes, the route's LCP can refer to the new text. Loading the same URL directly makes the banner a new paint and a possible LCP candidate. Compare the navigation path and element alongside the number.
No marker does not mean no recorded activity
Chrome looks for a user action, a visible URL change and a resulting visible paint. Not every DOM update qualifies, and the heuristic can disagree with what a user considers a navigation.
The API has been enabled by default since Chrome 151; DevTools support expanded afterward. Reproduce the click path in a current Chrome release and check detection first. Even without a soft-navigation marker, the runtime trace still records page activity. Use that interaction's time range to investigate the delay rather than treating the initial loading score as the answer.