【Next.js和訳】Advanced Features/Measuring performance

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Advanced Features/Measuring performanceの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

パフォーマンス計測

Next.js Analyticsでは、さまざまな指標を使ってページのパフォーマンスを分析・測定することができます。

Vercel のデプロイメントでは、ゼロコンフィグレーションでReal Experience Scoreの収集を開始できます。また、セルフホスティングの場合は、Analytics もサポートしています。

このドキュメントの残りの部分では、Next.js Analytics が使用するビルトインのリレーについて説明します。

Build Your Own

まず、custom Appコンポーネントを作成し、reportWebVitals関数を定義します。

pages/_app.js

export function reportWebVitals(metric) {.
  console.log(metric)
}
function MyApp({ Component, pageProps }) { 。
  return <Component {...pageProps}. />
}
export default MyApp

この関数は、いずれかのメトリクスの最終的な値がページ上で計算され終わったときに実行されます。結果をコンソールに記録したり、特定のエンドポイントに送信したりするのに使用できます。

この関数に返される metric オブジェクトは、いくつかのプロパティで構成されています。

• id : 現在のページロードのコンテキストにおける、メトリックの一意の識別子。
• name : メトリックの名前。メトリックの名前
• startTime : パフォーマンスエントリの最初に記録されたタイムスタンプ。単位は ミリ秒 (該当する場合)
• value: 値。値`: パフォーマンス・エントリの値、または時間（ミリ秒）。
• label: メトリクスの種類 (web-vital または custom)
  追跡されるメトリクスには 2 つのタイプがあります。
• Web Vitals
• Custom metrics

Web Vitals

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

• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
  これらのメトリクスのすべての結果は、web-vitalラベルを使って扱うことができます。

export function reportWebVitals(metric) {
  if (metric.label === "web-vital") {
    console.log(metric) // メトリクス・オブジェクト（{ id, name, startTime, value, label }）がコンソールに記録されます。
  }
}

また、それぞれのメトリクスを個別に処理するオプションもあります。

export function reportWebVitals(metric) {
  switch (metric.name) {
    case "FCP":
      // handle FCP results
      break
    case "LCP":
      // handle LCP results
      break
    case "CLS":
      // handle CLS results
      break
    case "FID":
      // handle FID results
      break
    case "TTFB":
      // handle TTFB results
      break
    default:
      break
  }
}

これらの指標の測定には、サードパーティのライブラリであるweb-vitalsが使用されています。ブラウザの互換性は、特定のメトリクスに依存するので、どのブラウザがサポートされているかについては、Browser Supportのセクションを参照してください。

カスタムメトリクス

上記のコアメトリクスに加えて、ページが水和してレンダリングされるまでの時間を測定するカスタムメトリクスがいくつかあります。

• Next.js-hydration : ページのハイドレーションを開始してから終了するまでの時間（単位：ミリ秒）。
• Next.js-route-change-to-render : ルート変更後にページのレンダリングが開始されるまでの時間（単位：ミリ秒）。
• Next.js-render : ルート変更後、ページのレンダリングが完了するまでの時間 (単位: ミリ秒)

これらのメトリクスの結果は、customラベルを使ってすべて処理することができます。

export function reportWebVitals(metric) {
  if (metric.label === "custom") {
    console.log(metric) // メトリクス・オブジェクト（{ id, name, startTime, value, label }）がコンソールに記録されます。
  }
}

また、それぞれのメトリクスを個別に処理するオプションもあります。

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をサポートするすべてのブラウザで動作します。

アナリティクスへの結果送信

リレー機能を使えば、任意の結果をアナリティクスのエンドポイントに送り、サイト上のリアルユーザーのパフォーマンスを測定・追跡することができます。例えば、以下のようになります。

export function reportWebVitals(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 })
  }
}

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

export function reportWebVitals({ id, name, label, value }) {
  // この例のようにGoogle Analyticsを初期化した場合は、`window.gtag`を使用してください。
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
  window.gtag("event", name, {
    event_category: label === "web-vital" ? "Web Vitals" : "Next.js custom metric",
    value: Math.round(name === "CLS" ? value * 1000 : value), // 値は整数でなければなりません。
    event_label: id, // 現在のページロードに固有のid
    non_interaction: true, // バウンス率に影響を与えないようにしています。
  })
}

Google Analytics への結果の送信については、こちらをご覧ください。

TypeScript

TypeScript を使用している場合は、組み込み型の NextWebVitalsMetric :

pages/_app.tsx

import type { AppProps, NextWebVitalsMetric } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric)
}
export default MyApp