webVitalsAttribution

Lors du débogage de problèmes liés aux Web Vitals, il est souvent utile de pouvoir identifier la source du problème. Par exemple, dans le cas du Cumulative Layout Shift (CLS), nous pourrions vouloir connaître le premier élément qui s'est déplacé lors du plus grand décalage de mise en page. Ou, dans le cas du Largest Contentful Paint (LCP), nous pourrions vouloir identifier l'élément correspondant au LCP de la page. Si l'élément LCP est une image, connaître l'URL de la ressource image peut nous aider à localiser l'asset à optimiser.

Identifier le principal contributeur au score Web Vitals, aussi appelé attribution, nous permet d'obtenir des informations plus détaillées comme les entrées pour PerformanceEventTiming, PerformanceNavigationTiming et PerformanceResourceTiming.

L'attribution est désactivée par défaut dans Next.js mais peut être activée par métrique en spécifiant ce qui suit dans next.config.js.

next.config.js

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

Les valeurs d'attribution valides sont toutes les métriques web-vitals spécifiées dans le type NextWebVitalsMetric.