︙

useReportWebVitals

useReportWebVitalshook は、Core Web Vitals を報告するのに使用でき、あなたの analytics サービスと組み合わせて使用することができます。

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>
  )
}

useReportWebVitals フックは "use client" ディレクティブを必要とするため、最も効率的なアプローチは、ルートレイアウトがインポートする別のコンポーネントを作成することです。これにより、クライアントの境界を WebVitals コンポーネントに限定します。

useReportWebVitals

hook の引数として渡されるmetric object は、いくつかの number のプロパティで構成されています：

id：現在のページ読み込みの context における、メトリックの一意の識別子
name：パフォーマンス指標の名前。可能な値には、Web アプリケーション特有のWeb Vitalsメトリクス(TTFB、FCP、LCP、FID、CLS)の名前が含まれます。
delta：指標の現在の value と前回の value との差。 value は通常ミリ秒単位で、指標の value が時間経過とともにどのように変化したかを示します。
entries: このメトリックに関連付けられたPerformance Entries の配列です。これらのエントリは、メトリックに関連するパフォーマンスイベントの詳細情報を提供します。
"navigationType: これは、メトリックスの収集を引き起こすtype of navigation を示します。可能な値には"navigate"、"reload"、"back_forward"、"prerender"が含まれます。
"rating：メトリックの value を評価する定性的な評価。可能な値は、"good"、"needs-improvement"、および"poor"です。評価は通常、メトリックの value をあらかじめ定義されたしきい値と比較することで決定され、これによりパフォーマンスが許容可能か、あるいは最適でないかを示します。
value: パフォーマンスエントリの実際の value または期間で、通常はミリ秒単位です。 value は、メトリックが追跡しているパフォーマンスの側面を定量的に測定します。 source の value は、測定されている特定のメトリックによりますし、さまざまなPerformance API から得られます。

Web Vitals

Web Vitals は、ウェブページのユーザーエクスペリエンスをとらえることを目指す一連の有用な指標です。以下の Web Vitals がすべて含まれています：

name プロパティを使用して、これらのメトリックのすべての結果を処理できます。

app/components/web-vitals.tsx

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
}

app/components/web-vitals.js

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
}

Usage on Vercel

Vercel Speed Insights は Vercel のデプロイに自動的に設定されており、useReportWebVitalsの使用を require する必要はありません。この hook はローカルの development や、別の analytics サービスを使用している場合に便利です。

Sending results to external systems

サイトの実際のユーザーパフォーマンスを測定し追跡するために、結果を任意のエンドポイントに送信することができます。例えば：

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

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: "POST", keepalive: true });
  }
});

Good to know: Google Analytics を使用する場合、id 値を使用すると、メトリックの分布を手動で構築することができます（パーセンタイルを計算するなど）。

useReportWebVitals(metric => {
  // Use `window.gtag` if you initialized Google Analytics as this example:
  // 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), // valueは整数でなければなりません
    event_label: metric.id, // id unique to current page load
    non_interaction: true, // avoids affecting bounce rate.
});
}

sending results to Google Analytics について詳しく見る。