mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Delba de OliveiraGitHubJosephgraphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>Closes: https://linear.app/vercel/issue/DOC-4686/clean-up-routing-section Redirects: https://github.com/vercel/front/pull/47151 --------- Co-authored-by: Joseph <[email protected]> Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
28 lines
1.9 KiB
Plaintext
28 lines
1.9 KiB
Plaintext
---
|
|
title: webVitalsAttribution
|
|
description: Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.
|
|
version: experimental
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
When debugging issues related to Web Vitals, it is often helpful if we can pinpoint the source of the problem.
|
|
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.
|
|
Or, in the case of Largest Contentful Paint (LCP), we might want to identify the element corresponding to the LCP for the page.
|
|
If the LCP element is an image, knowing the URL of the image resource can help us locate the asset we need to optimize.
|
|
|
|
Pinpointing the biggest contributor to the Web Vitals score, aka [attribution](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution),
|
|
allows us to obtain more in-depth information like entries for [PerformanceEventTiming](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming), [PerformanceNavigationTiming](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming) and [PerformanceResourceTiming](https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming).
|
|
|
|
Attribution is disabled by default in Next.js but can be enabled **per metric** by specifying the following in `next.config.js`.
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
experimental: {
|
|
webVitalsAttribution: ['CLS', 'LCP'],
|
|
},
|
|
}
|
|
```
|
|
|
|
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.
|