Capítulo 264 de 456

webVitalsAttribution

Core Idea

Config experimental que, quando habilitada por métrica, expõe informação de atribuição (attribution) para pinpointar a causa raiz de um problema de Web Vitals, por exemplo, qual elemento causou o maior Cumulative Layout Shift, ou qual é o elemento/URL correspondente ao Largest Contentful Paint.

Key Concepts

  • experimental.webVitalsAttribution: array de métricas web-vitals (do tipo NextWebVitalsMetric) para habilitar attribution, ex. ['CLS', 'LCP']. Desabilitado por default, habilitável por métrica individual.
  • Attribution data: dá acesso a entries mais profundas como PerformanceEventTiming, PerformanceNavigationTiming e PerformanceResourceTiming.

Code Examples

module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP'],
  },
}
  • O que demonstra: habilita attribution só para CLS e LCP, deixando as demais métricas sem esse dado extra.

Key Takeaways

  1. Útil especificamente para debugar CLS (identificar o primeiro elemento que se moveu no maior shift) e LCP (identificar o elemento/imagem responsável, incluindo sua URL de asset).
  2. Attribution é opt-in por métrica, não é um switch global.
  3. Valores válidos vêm do tipo NextWebVitalsMetric do próprio Next.js.

Connects To

  • Web Vitals reporting (reportWebVitals / useReportWebVitals): onde os dados de attribution acabam sendo consumidos no código da aplicação.
AnteriorwebpackPróximoTypeScript