Post

Medhat Dawoud
@medhat.dev

Chrome 151 shipped the Soft Navigations API, so SPAs finally get Core Web Vitals per page 🎉 • soft-navigation: one entry per route change • interaction-contentful-paint: its LCP Or use web-vitals with reportSoftNavs: true 👇 medhat.dev/blog/soft-na... Thanks @tunetheweb.com 🙏

medhat.devSoft Navigations, Chrome Finally Sees More Than My First PageWell, I have a small confession to make, since I renewed my website, every click you make after the first page is a soft navigation, and until a few months ago Chrome didn't measure those by default,....
Medhat Dawoud
@medhat.dev

It doesn't need a full render, Chrome looks for two things coming from the same interaction: a URL change (pushState and replaceState both count), and a contentful paint of something that interaction changed in the DOM.

Medhat Dawoud
@medhat.dev

So in practice: - If the URL changes and only part of the page repaints, like a filtered list or a tab panel, it still counts as a soft navigation, and its LCP is the largest of those new paints only, that's why my /speaking page had a text LCP, the sidebar never repaints.

Medhat Dawoud
@medhat.dev

- If the URL changes but nothing new gets painted, there is no soft-navigation entry at all, the click just stays with the current page and counts for its INP. - If there is no user interaction behind the URL change, like a replaceState when the page loads, it's not a soft navigation either.

0 reposts0 likes

Medhat Dawoud
@medhat.dev

The order doesn't matter, Chrome waits until both the URL change and the paint happened. This can give false positives, a filter that only changes the query string can count as a navigation, so it's worth sending the navigationType and URL to your RUM to filter those out.