webVitalsAttribution

Al depurar problemas relacionados con Web Vitals, suele ser útil poder identificar el origen del problema.
Por ejemplo, en el caso del Cambio Acumulativo de Diseño (CLS), podríamos querer saber cuál fue el primer elemento que se desplazó cuando ocurrió el mayor cambio de diseño.
O, en el caso de la Pintura del Contenido Más Grande (LCP), podríamos querer identificar el elemento correspondiente al LCP de la página.
Si el elemento LCP es una imagen, conocer la URL del recurso de imagen puede ayudarnos a localizar el activo que necesitamos optimizar.

Identificar el mayor contribuyente a la puntuación de Web Vitals, también conocido como atribución,
nos permite obtener información más detallada como entradas para PerformanceEventTiming, PerformanceNavigationTiming y PerformanceResourceTiming.

La atribución está deshabilitada por defecto en Next.js pero puede activarse por métrica especificando lo siguiente en next.config.js.

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

Los valores válidos para atribución son todas las métricas de web-vitals especificadas en el tipo NextWebVitalsMetric.