webVitalsAttribution

Web Vitals와 관련된 문제를 디버깅할 때, 문제의 출처를 정확히 파악하는 것이 종종 도움이 됩니다. 예를 들어, 누적 레이아웃 이동(CLS)의 경우, 단일 최대 레이아웃 이동이 발생했을 때 처음 이동한 요소가 무엇인지 알고 싶을 수 있습니다. 또는 최대 콘텐츠풀 페인트(LCP)의 경우, 페이지의 LCP에 해당하는 요소를 식별하고 싶을 수 있습니다. LCP 요소가 이미지인 경우, 이미지 리소스의 URL을 아는 것이 최적화가 필요한 자산을 찾는 데 도움이 될 수 있습니다.

Web Vitals 점수에 가장 큰 영향을 미치는 요소를 정확히 파악하는 것, 즉 속성을 파악하면 PerformanceEventTiming, PerformanceNavigationTiming, PerformanceResourceTiming과 같은 항목에 대한 더 자세한 정보를 얻을 수 있습니다.

Next.js에서는 기본적으로 속성 파악이 비활성화되어 있지만, next.config.js에서 다음과 같이 지표별로 활성화할 수 있습니다.

next.config.js

experimental: {
  webVitalsAttribution: ["CLS", "LCP"];
}

유효한 속성 값은 NextWebVitalsMetric 타입에 지정된 모든 web-vitals 지표입니다.

webpack CLI