webVitalsAttribution

Beim Debuggen von Problemen im Zusammenhang mit Web Vitals ist es oft hilfreich, die Ursache des Problems genau zu lokalisieren. Zum Beispiel möchten wir im Fall von Cumulative Layout Shift (CLS) möglicherweise das erste Element kennen, das sich verschoben hat, wenn die größte Layoutverschiebung aufgetreten ist. 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 helfen, das zu optimierende Asset zu finden.

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

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

experimental: {
  webVitalsAttribution: ['CLS', 'LCP']
}

Gültige Attributionswerte sind alle in dem NextWebVitalsMetric-Typ spezifizierten web-vitals-Metriken.