webVitalsAttribution

Core Idea

Experimental option enabling per-metric attribution data for Web Vitals, to help pinpoint the exact source (element, resource URL) of a Core Web Vitals problem like CLS or LCP.

Key Concepts

• experimental.webVitalsAttribution: array of web-vitals metric names (e.g. ['CLS', 'LCP']) to enable attribution for; disabled by default.
• Attribution data: exposes entries like PerformanceEventTiming, PerformanceNavigationTiming, PerformanceResourceTiming to identify the biggest contributor to the score.
• Valid values: any metric in the NextWebVitalsMetric type from web-vitals.

Code Examples

module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP'],
  },
}

• O que demonstra: ativa atribuição só pras métricas CLS e LCP.

Key Takeaways

1. Útil pra debug: com LCP, dá pra identificar o elemento e (se for imagem) a URL do asset a otimizar; com CLS, o primeiro elemento que causou o maior shift.
2. Feature experimental, opt-in por métrica, não global.

Connects To

• Web Vitals / reportWebVitals: consome os dados de atribuição gerados por essa flag.