Post

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 🙏

How does this handle route changes that update the URL without a full render?

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.

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.

- 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.