︙

useReportWebVitals

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

pages/_app.js

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

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

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

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 プロパティを使用して、これらのメトリックのすべての結果を処理できます。

pages/_app.js

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

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

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

Custom Metrics

上記のコアメトリクスに加えて、ページがハイドレート(hydrate)し、 render するまでの時間を測定する追加のカスタムメトリクスがいくつかあります。

Next.js-hydration: ページがハイドレートを開始して終了するまでの時間(ミリ秒単位)
Next.js-route-change-to-render: route 変更後にページが start rendering を開始するまでの時間(ミリ秒単位)
Next.js-render: route 変更後にページが render を完了するまでの時間(ミリ秒単位)

すべてのメトリックの結果を個別に処理できます：

export function reportWebVitals(metric) {
  switch (metric.name) {
    case "Next.js-hydration":
      // handle hydration results
      break;
    case "Next.js-route-change-to-render":
      // handle route-change to render results
      break;
    case "Next.js-render":
      // handle render results
      break;
    default:
      break;
  }
}

これらのメトリクスは、User Timing API をサポートするすべてのブラウザで機能します。

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 について詳しく見る。