useReportWebVitals

Der useReportWebVitals-Hook ermöglicht die Erfassung von Core Web Vitals und kann in Kombination mit Ihrem Analysedienst verwendet werden.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

  return <Component {...pageProps} />
}

Das metric-Objekt, das als Argument des Hooks übergeben wird, besteht aus mehreren Eigenschaften:

id: Eindeutiger Identifikator für die Metrik im Kontext des aktuellen Seitenladevorgangs
name: Der Name der Leistungsmetrik. Mögliche Werte umfassen Namen von Web Vitals-Metriken (TTFB, FCP, LCP, FID, CLS), die für Webanwendungen spezifisch sind.
delta: Die Differenz zwischen dem aktuellen und dem vorherigen Wert der Metrik. Der Wert ist typischerweise in Millisekunden und repräsentiert die Änderung des Metrikwerts über die Zeit.
entries: Ein Array von Performance Entries, die mit der Metrik verknüpft sind. Diese Einträge liefern detaillierte Informationen über die mit der Metrik verbundenen Leistungsereignisse.
navigationType: Gibt den Navigationstyp an, der die Metrikerfassung ausgelöst hat. Mögliche Werte sind "navigate", "reload", "back_forward" und "prerender".
rating: Eine qualitative Bewertung des Metrikwerts, die eine Einschätzung der Leistung liefert. Mögliche Werte sind "good", "needs-improvement" und "poor". Die Bewertung wird typischerweise durch den Vergleich des Metrikwerts mit vordefinierten Schwellenwerten bestimmt, die akzeptable oder suboptimale Leistung anzeigen.
value: Der tatsächliche Wert oder die Dauer des Performance-Eintrags, typischerweise in Millisekunden. Der Wert liefert eine quantitative Messung des Leistungsaspekts, der von der Metrik verfolgt wird. Die Quelle des Werts hängt von der spezifischen gemessenen Metrik ab und kann aus verschiedenen Performance APIs stammen.

Web Vitals

Web Vitals sind eine Reihe nützlicher Metriken, die die Nutzererfahrung einer Webseite erfassen sollen. Folgende Web Vitals sind enthalten:

Sie können alle Ergebnisse dieser Metriken über die name-Eigenschaft verarbeiten.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP-Ergebnisse verarbeiten
      }
      case 'LCP': {
        // LCP-Ergebnisse verarbeiten
      }
      // ...
    }
  })

  return <Component {...pageProps} />
}

Benutzerdefinierte Metriken

Zusätzlich zu den oben aufgeführten Kernmetriken gibt es einige benutzerdefinierte Metriken, die die Zeit für die Hydratation und das Rendering der Seite messen:

Next.js-hydration: Dauer der Hydratation der Seite (in ms)
Next.js-route-change-to-render: Dauer bis zum Start des Renderings nach einer Routenänderung (in ms)
Next.js-render: Dauer bis zum Abschluss des Renderings nach einer Routenänderung (in ms)

Sie können die Ergebnisse dieser Metriken separat verarbeiten:

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'Next.js-hydration':
        // Hydratationsergebnisse verarbeiten
        break
      case 'Next.js-route-change-to-render':
        // Route-Change-zu-Render-Ergebnisse verarbeiten
        break
      case 'Next.js-render':
        // Render-Ergebnisse verarbeiten
        break
      default:
        break
    }
  })

  return <Component {...pageProps} />
}

Diese Metriken funktionieren in allen Browsern, die die User Timing API unterstützen.

Vercel Speed Insights werden bei Vercel-Deployments automatisch konfiguriert und erfordern keine Verwendung von useReportWebVitals. Dieser Hook ist für die lokale Entwicklung oder bei Verwendung eines anderen Analysedienstes nützlich.

Ergebnisse an externe Systeme senden

Sie können Ergebnisse an beliebige Endpunkte senden, um die Leistung realer Nutzer auf Ihrer Website zu messen und zu verfolgen. Beispiel:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

  // `navigator.sendBeacon()` verwenden, falls verfügbar, sonst auf `fetch()` zurückgreifen
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Gut zu wissen: Wenn Sie Google Analytics verwenden, können Sie mit dem id-Wert manuell Metrikverteilungen erstellen (um Perzentile etc. zu berechnen).

useReportWebVitals(metric => {
  // `window.gtag` verwenden, wenn Sie Google Analytics wie in diesem Beispiel initialisiert haben:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
  window.gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // Werte müssen Ganzzahlen sein
    event_label: metric.id, // ID eindeutig für aktuellen Seitenladevorgang
    non_interaction: true, // vermeidet Beeinflussung der Absprungrate
  });
}

Lesen Sie mehr über das Senden von Ergebnissen an Google Analytics.

useReportWebVitals