webVitalsAttribution | Next.js

Beim Debuggen von Problemen im Zusammenhang mit Web Vitals ist es oft hilfreich, wenn wir die Quelle des Problems genau bestimmen können. Zum Beispiel möchten wir im Fall von Cumulative Layout Shift (CLS) möglicherweise das erste Element kennen, das sich verschoben hat, als die größte Layoutverschiebung auftrat. Oder im Fall von Largest Contentful Paint (LCP) möchten wir möglicherweise das Element identifizieren, das dem LCP für die Seite entspricht. Wenn das LCP-Element ein Bild ist, kann die Kenntnis der URL der Bildressource uns helfen, die zu optimierende Datei zu finden.

Die genaue Bestimmung des größten Beitrags zur Web Vitals-Bewertung, auch bekannt als Attribution, ermöglicht es uns, detailliertere Informationen wie Einträge für PerformanceEventTiming, PerformanceNavigationTiming und PerformanceResourceTiming zu erhalten.

Die Attribution ist in Next.js standardmäßig deaktiviert, kann aber pro Metrik aktiviert werden, indem folgendes in der next.config.js angegeben wird:

next.config.js

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

Gültige Attributionswerte sind alle web-vitals-Metriken, die im Typ NextWebVitalsMetric angegeben sind.