TTFB（Time To First Byte）

要点：最初のバイトまでの待ち時間。 本ページでは、現場での判断軸/実装/検証までをまとめます。

定義

TTFB（Time To First Byte）はWebの体感速度を数量化する指標です。ページ種類/端末/回線ごとに分布で見て、p75を改善対象にします。

なぜ重要か

正しく測れなければ改善できません。**事実（RUM）と再現（Lab）**の両輪で、投資対効果の高い箇所へ集中します。

実務での活用（判断基準付き）

• RUMでp75をモニタリング。端末/回線セグメントを分ける。
• Labで原因切り分け（JS/画像/ネット）。改善の因果を確認。
• ダッシュボードで回帰検知とアラートを構築。

実装例

// Paint Timing / PerformanceObserverでLCP/INPを収集
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 送信先はRUMエンドポイント
    navigator.sendBeacon('/rum', JSON.stringify({ name: entry.name, value: entry.value }));
  }
});
po.observe({ type: 'largest-contentful-paint', buffered: true });
po.observe({ type: 'event', buffered: true, durationThreshold: 40 });

検証と失敗例

• 計測軸: コネクション再利用/エッジ配置の有無とDNS/SSL/TTFB内訳を分解。
• 失敗例: オリジン遠距離・Cold start・ブロッキングI/OでTTFBが肥大。
• 判断軸: TTFB p75≤800ms（静的CDN）/ ≤1.2s（動的）。バックス圧抑制の有無。

チェックリスト

• 指標のp75をモニタリングしRUMとDevToolsの差異を把握
• ボトルネックをJS長タスク/画像デコード/ネットで切り分けたか
• 改善施策後に回帰がないかダッシュボードで監視したか
• ロールバック手順とメトリクスのガードレールを設定したか

関連用語

lcp, inp, ttfb, long-tasks