【Next.js和訳】Advanced Features/Measuring performance
この記事について
この記事は、Advanced Features/Measuring performanceの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
パフォーマンス計測
Next.js Analyticsでは、さまざまな指標を使ってページのパフォーマンスを分析・測定することができます。
Vercel のデプロイメントでは、ゼロコンフィグレーションでReal Experience Scoreの収集を開始できます。また、セルフホスティングの場合は、Analytics もサポートしています。
このドキュメントの残りの部分では、Next.js Analytics が使用するビルトインのリレーについて説明します。
Build Your Own
まず、custom Appコンポーネントを作成し、reportWebVitals
関数を定義します。
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 })
}
}
TypeScript
TypeScript を使用している場合は、組み込み型の NextWebVitalsMetric
:
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
Discussion