Report WebVitals metrics for Soft Navs using latest WebVitals.js v6

[gilbertococchi]

Goals

1. Improve Next.js Performance metrics Core Web Vitals measurement on Soft Navs
2. Collect many more LCP events using the PerformanceSoftNavigation and InteractionContentfulPaint performance entries
3. Improve CLS and INP attribution thanks to the new the PerformanceSoftNavigation entry being emitted pointing to the right Route URL path.

Non-Goals

No response

Background

With version 151 Chrome released on Stable support for the PerformanceSoftNavigation and InteractionContentfulPaint performance entries to help better measure performance metrics across Soft Navigations.

The WebVitals.js library has also being updated to version v6+ that includes an option to enable reporting of Soft Navigation metrics (documentation).

https://chromestatus.com/feature/5144837209194496
https://github.com/googlechrome/web-vitals#report-metrics-for-soft-navigations

Proposal

Update the useReportWebVitals onLCP, onCLS and onINP function calls here by adding the reportSoftNavs option.

Example:

onLCP(
, {reportSoftNavs: true});

[ale-grosselle]

It would be important because we’re adopting an SPA approach wherever possible, but we lose Core Web Vitals monitoring, which is holding back the adoption of the SPA approach (next/link also)

[tunetheweb]

One additional point is that you should also use the new metric.navigationURL to ensure the metrics are reported against the correct URL (since performance metrics will often be reported after the fact).

It looks to me that, from this reporter.js code that all metric properties are sent, but it would be worth confirming. Plus whatever backend processing is done should use this navigationURL for reporting.

[gilbertococchi]

Closing as implemented via #97232