ストリーミングの効果を測定する：FCP、TTI、LCP

FCP は、ナビゲーション開始から最初のコンテンツ（テキスト、画像、背景）が画面に描画されるまでの時間を測定します。ストリーミングでは HTML シェルがすぐに送信されるため、最初のチャンクが届くとすぐに、ブラウザはレイアウト、ナビゲーション、ファーストビュー内のテキストを描画できます。

同期的な SSR（renderToString）では、レンダリング全体が完了するまでブラウザに HTML が届きません。ストリーミングでは、リクエストから数ミリ秒以内に HTML シェルがブラウザへ届き、レイアウトと静的コンテンツがほぼすぐに表示されるため、FCP が大幅に短縮されます。

LCP は、ビューポート内で最も大きな表示要素が描画される時点を測定します。通常はヒーロー画像や大きな見出しです。LCP の要素がシェルの一部であり、Suspense 境界の内側にない場合、シェルはデータ依存のセクションより先にストリーミングされるため、ストリーミングによって LCP が改善されます。

重要な最適化は、LCP の要素、つまりヒーローセクション、メイン見出し、注目画像などを Suspense 境界の外側に配置することです。LCP の要素がデータを待つ Suspense 境界の内側にある場合、そのデータが解決されるまでストリーミングは LCP の改善に役立ちません。

TTI は、ページがユーザー入力に確実に応答できるようになる時点を測定します。つまり、メインスレッドをブロックする Long Tasks がない状態です。ストリーミングと選択的ハイドレーションを組み合わせると、すべての JavaScript のダウンロード後に大きな同期ハイドレーションタスクを 1 つ実行するのではなく、ハイドレーション処理を時間的に分散できるため、TTI が短縮されます。

Time to First Byte（TTFB）は、最初のバイトが送信される前のネットワーク遅延とサーバー処理時間によって決まります。ストリーミングによって TTFB が変わることはありません。この部分にはエッジレンダリングが役立ちます。ストリーミングで FCP を改善するには、まず TTFB を低くする必要があります。そうでなければ、低速なオリジンからストリーミングしているだけです。

WebPageTestのフィルムストリップビューでは、ページの読み込み中に100msごとに撮影された一連のスクリーンショットを確認できます。ストリーミング対応ページでは、最初にレイアウトが表示され、その後セクションが段階的に埋まっていきます。ストリーミング非対応のページでは、空白の画面が表示された後、完全にレンダリングされたページが突然表示されるため、視覚的な違いが明確に分かります。

意味のあるベンチマークでは、同じページを2通りの方法でレンダリングして比較します。Next.js RSCのストリーミングを有効にした場合と、従来の同期SSRを使用した場合です。固定したネットワーク条件（例：Fast 3G、4x CPU slowdown）でWebPageTestを実行し、統計的な信頼性を確保するため、3回のテスト実行でFCP、LCP、TTIの指標を比較します。

Chrome DevToolsのNetworkタブには、Fast 3GやSlow 4Gなどのプリセットを選択できる「Throttling」ドロップダウンがあります。Fast 3G（1.6 Mbps、150ms RTT）では、HTMLドキュメント全体のダウンロード時間が長くなるため、ストリーミングと非ストリーミングの違いが強調され、段階的なストリーミングによる改善を確認しやすくなります。

Interaction to Next Paint（INP）は、ユーザーが何らかの操作をしてから次の描画が行われるまでの時間を測定します。2024年に、Core Web Vitalの1つとしてFIDに取って代わりました。ストリーミングでは、ユーザーが最初に操作する可能性の高いインタラクティブなコンポーネントのハイドレーションを優先することでINPを短縮し、それらのコンポーネントが応答可能になるまでのブロッキング時間を減らします。

最も効果の高い構成は、エッジレンダリング（近くのPoPによる低いTTFB）、ストリーミング（HTMLの段階的な配信）、選択的ハイドレーション（JavaScript処理の段階的な実行）を組み合わせるものです。この3つの技術により、読み込みの全ライフサイクルにおける主要なパフォーマンス指標をすべて最小限に抑えられます。

ストリーミングはHTMLのシェルをすぐに配信することでFCPを最も直接的に改善し、LCP要素がシェルに含まれている場合はLCPも改善します。選択的ハイドレーションによってJavaScriptの処理を時間に分散できるため、TTIも改善します。TTFBは変わらないため、エッジレンダリングで対処します。WebPageTestのフィルムストリップとChrome DevToolsのスロットリングを使ってストリーミングの効果を測定し、Core Web Vitalsではインタラクティビティの主要指標であるINPを最適化します。