Time to First Byte(TTFB)バジェットと最適化

Time to First Byteバジェットの設定と追跡。TTFBが他のすべてのパフォーマンスメトリクスに与える影響と、CDN、キャッシング、エッジコンピューティングによるサーバーレスポンス時間の削減戦略。

Timing Metrics

詳細な説明

TTFBパフォーマンスバジェット

Time to First Byte(TTFB)は、ブラウザがリクエストを送信してからレスポンスの最初のバイトを受信するまでの時間を測定します。基盤メトリクスです — 他のすべてのタイミングメトリクス(FCP、LCP、TTI)は遅いTTFBによって遅延します。

TTFBしきい値

評価 TTFB
良好 < 800 ms
OK < 1800 ms
不良 > 1800 ms

バジェット推奨

アーキテクチャ TTFB目標
静的サイト(CDN) < 100 ms
SSG + CDN < 200 ms
SSR + CDN < 400 ms
SSR(CDNなし) < 600 ms
動的(API) < 800 ms

TTFBの構成要素

TTFB = DNSルックアップ + TCP接続 + TLSハンドシェイク + サーバー処理 + ネットワーク遅延

最適化戦略

  1. CDN — ユーザーに近いエッジロケーションから配信
  2. HTTP/2またはHTTP/3 — 接続の再利用で後続リクエストのオーバーヘッドを削減
  3. サーバーサイドキャッシュ — データベースクエリ、レンダリングHTML、APIレスポンスをキャッシュ
  4. エッジコンピューティング — CDNエッジノードでサーバーロジックを実行
  5. データベース最適化 — インデックスクエリ、コネクションプーリング、リードレプリカ
  6. プリコネクト — サードパーティオリジンに<link rel="preconnect">を使用

ユースケース

TTFBバジェットは、サーバーレンダリングアプリケーションや動的コンテンツを持つサイトにとって重要です。2秒のTTFBを持つEコマースサイトは、2.5秒のLCPを達成することは不可能です — リソース読み込みとレンダリングに500 msしか残りません。TTFBバジェットを設定することで、フロントエンド最適化と並んでサーバーサイドパフォーマンスへの投資を促します。

試してみる — Performance Budget Tracker

フルツールを開く