webVitalsAttribution

웹 바이탈(Web Vitals)과 관련된 문제를 디버깅할 때 문제의 원인을 정확히 파악할 수 있으면 유용합니다. 예를 들어, 누적 레이아웃 이동(Cumulative Layout Shift, CLS)의 경우, 가장 큰 레이아웃 이동이 발생했을 때 이동한 첫 번째 요소를 알고 싶을 수 있습니다. 또는, 가장 큰 콘텐츠 페인트(Largest Contentful Paint, LCP)의 경우, 페이지의 LCP에 해당하는 요소를 식별하고자 할 수 있습니다. LCP 요소가 이미지인 경우, 이미지 리소스의 URL을 알면 최적화해야 할 자산을 쉽게 찾을 수 있습니다.

웹 바이탈 점수에 가장 큰 기여를 한 요소를 정확히 파악하는 것, 즉 attribution (opens in a new tab)은 PerformanceEventTiming (opens in a new tab), PerformanceNavigationTiming (opens in a new tab) 및 PerformanceResourceTiming (opens in a new tab)에 대한 항목과 같은 더 심층적인 정보를 얻을 수 있게 해줍니다.

Next.js에서는 기본적으로 attribution이 비활성화되어 있지만, next.config.js에 다음을 지정하여 메트릭별로 활성화할 수 있습니다.

experimental: {
  webVitalsAttribution: ['CLS', 'LCP']
}

유효한 attribution 값은 NextWebVitalsMetric (opens in a new tab) 타입에 지정된 모든 web-vitals 메트릭입니다.