パフォーマンス測定

デフォルトで、Create React Appには、様々な指標を使用してアプリケーションのパフォーマンスを測定および分析できるパフォーマンスレイヤーが含まれています。

サポートされている指標を測定するには、`index.js` の `reportWebVitals` 関数に単に関数を渡すだけです。

reportWebVitals(console.log);

この関数は、指標の最終値がページで計算を終了したときに呼び出されます。これを使用して、結果をコンソールにログ出力したり、特定のエンドポイントに送信したりできます。

Web Vitals

Web Vitals は、ウェブページのユーザーエクスペリエンスを捉えることを目的とした、一連の有用な指標です。Create React Appでは、これらの指標を測定するためにサードパーティライブラリが使用されています（web-vitals）。

指標値が計算されたときに関数に返されるオブジェクトの詳細については、ドキュメントを参照してください。ブラウザのサポートセクションでは、サポートされているブラウザについても説明しています。

分析への結果の送信

reportWebVitals 関数を使用すると、分析エンドポイントに結果を送信して、サイトでのリアルユーザーのパフォーマンスを測定および追跡できます。例：

function sendToAnalytics(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 });
  }
}

reportWebVitals(sendToAnalytics);

注記： Google Analyticsを使用する場合は、`id` 値を使用して、指標分布を手動で構築しやすくします（パーセンタイルなどを計算する場合）。

function sendToAnalytics({ id, name, value }) {
  ga('send', 'event', {
    eventCategory: 'Web Vitals',
    eventAction: name,
    eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    eventLabel: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate
  });
}

reportWebVitals(sendToAnalytics);

Google Analyticsへの結果の送信の詳細については、こちらを参照してください。