useReportWebVitals

useReportWebVitals フックを使用すると、Core Web Vitals を報告でき、分析サービスと組み合わせて使用することができます。

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" 指令を必要とするため、最もパフォーマンスの高い方法は、root レイアウトがインポートする別のコンポーネントを作成することです。これにより、クライアント境界を専ら WebVitals コンポーネントに限定することができます。

useReportWebVitals

このフックの引数として渡される metric オブジェクトは、いくつかのプロパティを含みます：

id: 現在のページ読み込みコンテキストにおけるメトリックの一意の識別子
name: パフォーマンスメトリックの名前。Web Vitals メトリック（TTFB、FCP、LCP、FID、CLS）に関連する名前が含まれます
delta: メトリックの現在の値と前回の値との差。通常ミリ秒単位で表され、メトリックの値が時間とともにどのように変化したかを示します
entries: メトリックに関連するパフォーマンスエントリの配列。これらのエントリは、メトリックに関連するパフォーマンスイベントについての詳細な情報を提供します
navigationType: メトリック収集を引き起こしたナビゲーションの種類を示します。可能な値には "navigate"、"reload"、"back_forward"、そして "prerender" が含まれます
rating: メトリック値の定性的評価を提供します。可能な値は "good"、"needs-improvement"、および "poor" です。通常、メトリック値をあらかじめ定義されたしきい値と比較して、受容可能なパフォーマンスや最適ではないパフォーマンスを示すものとして評価されます
value: 通常ミリ秒単位のパフォーマンスエントリの実際の値または期間の長さ。この値は追跡中のパフォーマンス側面の定量的な測定値を提供します。値の発生元は測定される特定のメトリックに依存し、様々なパフォーマンス APIから取り得ます

Web Vitals

Web Vitals は、ウェブページのユーザーエクスペリエンスを捉えることを目的とした、便利なメトリクスのセットです。以下の Web Vitals はすべて含まれています：

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

TypeScript
JavaScript

app/components/web-vitals.tsx
'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP 結果を処理
      }
      case 'LCP': {
        // LCP 結果を処理
      }
      // ...
    }
  })
}

app/components/web-vitals.js
'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP 結果を処理
      }
      case 'LCP': {
        // LCP 結果を処理
      }
      // ...
    }
  })
}

Vercel での使用

Vercel Speed Insights は useReportWebVitals を使用せず、代わりに @vercel/speed-insights パッケージを使用します。 useReportWebVitals フックはローカル開発で有用であったり、異なるサービスで Web Vitals を収集する場合に役立ちます。

外部システムへの結果の送信

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

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

  // `navigator.sendBeacon()` を利用可能であれば使用し、利用できない場合は `fetch()` をフォールバック。
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

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

useReportWebVitals(metric => {
  // Google Analytics をこのように初期化した場合の `window.gtag` を使用する：
  // 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), // 値は整数でなければならない
    event_label: metric.id, // 現在のページ読み込みに一意の id
    non_interaction: true, // バウンス率への影響を避ける
  });
}

Google Analytics への結果の送信についてさらに読む。

useReportWebVitals​

Web Vitals​

Vercel での使用​

外部システムへの結果の送信​

useReportWebVitals

Web Vitals

Vercel での使用

外部システムへの結果の送信