diff --git a/docs/advanced-features/measuring-performance.md b/docs/advanced-features/measuring-performance.md index 2fc2c7dc107e8..dc454fb7c458f 100644 --- a/docs/advanced-features/measuring-performance.md +++ b/docs/advanced-features/measuring-performance.md @@ -183,18 +183,14 @@ export function reportWebVitals(metric) { ## Web Vitals Attribution -Web Vitals are useful for gathering metrics and tracking improvements or regressions, but the metrics alone are not very useful for debugging performance issue. +When debugging issues related to Web Vitals, it is often helpful to obtain more in-depth information from real users in the field. -For example, in the case of Cumulative Layout Shift (CLS), we might want to know +For example, in the case of Cumulative Layout Shift (CLS), we might want to know the first element that shifted when the single largest layout shift occurred. -> What is the first element that shifted when the single largest layout shift occurred? +Or, in the case of Largest Contentful Paint (LCP), we might want to identify the element corresponding to the LCP for the page. +If it is an image, knowing the URL of the image resource can help us pinpoint the asset to optimize. -or, in the case of Largest Contentful Paint (LCP), - -> What is the element corresponding to the LCP for the page? -> If it is an image, what's the URL of the image resource? - -Next.js is able to provide the answers to these questions by leveraging Web Vitals [attribution](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution). +Next.js is able to provide these information by leveraging Web Vitals [attribution](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution). Attribution is disabled by default but could be enabled **per metric** by specifying a `config` for `reportWebVitals()`. ```js // pages/_app.js @@ -215,7 +211,7 @@ export default MyApp Valid attribution values are all `web-vitals` metrics specified in the [`NextWebVitalsMetric`](https://github.com/vercel/next.js/blob/442378d21dd56d6e769863eb8c2cb521a463a2e0/packages/next/shared/lib/utils.ts#L43) type. -Note, since attribution contains a lot of information, it is best to pick the specific fields of interest when sending the data to your RUM backend. +Note, since attribution contains a lot of information, it is best to cherry-pick the specific fields of interest when sending the data to your RUM service. ## TypeScript