Skip to content

Commit

Permalink
update attribution section in measuring-performance.md
Browse files Browse the repository at this point in the history
  • Loading branch information
kyliau committed Aug 9, 2022
1 parent ebd1d9d commit 30f665a
Showing 1 changed file with 6 additions and 10 deletions.
16 changes: 6 additions & 10 deletions docs/advanced-features/measuring-performance.md
Expand Up @@ -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
Expand All @@ -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

Expand Down

0 comments on commit 30f665a

Please sign in to comment.