TTFB最適化 — Time to First Byteのベストプラクティス

Time to First Byte (TTFB) を800ms以下に最適化します。CDNデプロイ、サーバーサイドレンダリング最適化、キャッシング戦略、リダイレクトチェーンの削減をカバーします。

Supplementary Metrics

詳細な説明

Time to First Byte (TTFB) の最適化

TTFBは、ナビゲーションリクエストの開始からレスポンスの最初のバイトがブラウザに到着するまでの時間を測定します。基盤となる指標であり、他のすべての指標(FCP、LCP)は遅いTTFBによって遅延します。

TTFBに含まれるもの

TTFB = DNS検索 + TCP接続 + TLSネゴシエーション
     + リダイレクト時間 + サーバー処理時間

TTFB閾値

評価
良好 ≤ 800ms
要改善 ≤ 1800ms
不良 > 1800ms

TTFB遅延の一般的な原因

1. CDNなし CDNなしでは、オリジンサーバーから遠いユーザーは高いレイテンシを経験します。

2. 遅いサーバーサイド処理 複雑なデータベースクエリ、最適化されていないAPI呼び出し、重いサーバーサイドレンダリング。

3. 複数のリダイレクト 各リダイレクト(HTTP 301/302)にはネットワークの完全なラウンドトリップが必要です。

最適化戦略

CDNのデプロイ:

  • 静的および半静的ページのHTMLをエッジでキャッシュ
  • 動的コンテンツにはリージョナルエッジ関数を使用

サーバー処理の最適化:

  • データベースクエリキャッシング(Redis、Memcached)を追加
  • コネクションプーリングを使用
  • 遅いAPIエンドポイントをプロファイルして最適化

圧縮の有効化:

brotli on;
brotli_types text/html text/css application/javascript;

ユースケース

TTFB最適化はWebパフォーマンスの基盤です。サーバーレンダリングアプリケーション(Next.js SSR、Rails、Django、Laravel)で特に重要で、サーバー処理時間がTTFBの大きな部分を占めます。グローバルサイトはCDNデプロイにより劇的な改善が見られます。

試してみる — Web Vitals Reference

フルツールを開く