useReportWebVitals

Der useReportWebVitals-Hook ermöglicht es Ihnen, Core Web Vitals zu melden und kann in Kombination mit Ihrem Analyse-Dienst verwendet werden.

app/_components/web-vitals.js

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

app/layout.js

import { WebVitals } from './_components/web-vitals'
 
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

Da der useReportWebVitals-Hook die "use client"-Direktive erfordert, ist der leistungsfähigste Ansatz, eine separate Komponente zu erstellen, die das Root-Layout importiert. Dies beschränkt die Client-Grenze ausschließlich auf die WebVitals-Komponente.

useReportWebVitals

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 Seitenladens
name: Der Name der Leistungsmetrik. Mögliche Werte umfassen Namen von Web Vitals-Metriken (TTFB, FCP, LCP, FID, CLS), die spezifisch für eine Webanwendung sind.
delta: Der Unterschied zwischen dem aktuellen Wert und dem vorherigen Wert der Metrik. Der Wert ist typischerweise in Millisekunden und repräsentiert die Änderung des Metrikwerts im Laufe der Zeit.
entries: Ein Array von Performance Entries, die mit der Metrik verbunden sind. Diese Einträge liefern detaillierte Informationen über die Leistungsereignisse, die mit der Metrik zusammenhängen.
navigationType: Zeigt den Navigationstyp an, der die Metriksammlung 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 Leistungseintrags, typischerweise in Millisekunden. Der Wert liefert ein quantitatives Maß für den Leistungsaspekt, der durch die 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 darauf abzielen, die Benutzererfahrung einer Webseite zu erfassen. Folgende Web Vitals sind enthalten:

Sie können alle Ergebnisse dieser Metriken mit der Eigenschaft name verarbeiten.

app/components/web-vitals.tsx

TypeScript

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP-Ergebnisse behandeln
      }
      case 'LCP': {
        // LCP-Ergebnisse behandeln
      }
      // ...
    }
  })
}

Vercel Speed Insights verwendet nicht useReportWebVitals, sondern das @vercel/speed-insights-Paket. Der useReportWebVitals-Hook ist nützlich in der lokalen Entwicklung oder wenn Sie einen anderen Dienst zur Sammlung von Web Vitals verwenden.

Senden von Ergebnissen an externe Systeme

Sie können Ergebnisse an jeden Endpunkt senden, um die reale Benutzerleistung auf Ihrer Website zu messen und zu verfolgen. Beispiel:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
 
  // Verwenden Sie `navigator.sendBeacon()`, falls verfügbar, andernfalls fallen Sie auf `fetch()` zurück.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Hinweis: Wenn Sie Google Analytics verwenden, kann die Verwendung des id-Werts Ihnen ermöglichen, Metrikverteilungen manuell zu konstruieren (um Quantile zu berechnen usw.)

useReportWebVitals(metric => {
  // Verwenden Sie `window.gtag`, wenn Sie Google Analytics wie in diesem Beispiel initialisiert haben:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
  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 Seitenaufruf
    non_interaction: true, // vermeidet Einfluss auf Absprungrate.
  });
}

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

useReportWebVitals

useReportWebVitals

Web Vitals

Verwendung auf Vercel

Senden von Ergebnissen an externe Systeme