mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Michael NovotnyandGitHub
fe797c1074
Internal suggestion to remove `en-US` from Mozilla urls since MDN is available in multiple languages nowadays it will automatically redirect to the viewer’s language preference. Closes [DX-2076](https://linear.app/vercel/issue/DX-2076/make-external-mozilla-links-language-agnostic-in-nextjs-docs)
25 lines
1.9 KiB
Plaintext
25 lines
1.9 KiB
Plaintext
---
|
|
title: webVitalsAttribution
|
|
description: Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.
|
|
---
|
|
|
|
{/* 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"
|
|
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.
|