最初のバイトまでの時間(TTFB)

対応ブラウザ

  • 43
  • 12
  • 31
  • 11

ソース

Time to First Byte(TTFB)は、ラボとフィールドの両方で接続の設定時間とウェブサーバーの応答性を測定するための基本的な指標です。リソースのリクエストから、レスポンスの最初のバイトの到着を開始するまでの時間を測定します。これにより、ウェブサーバーがリクエストへの応答が遅すぎるタイミングを特定できます。ナビゲーション リクエスト(つまり HTML ドキュメントのリクエスト)の場合、他の意味のある読み込みパフォーマンス指標よりも優先されます。

ネットワーク リクエストのタイミングの図。左から右にフェーズはリダイレクト(アンロードのプロンプトと重複)、キャッシュ、DNS、TCP、リクエスト、レスポンス、処理、読み込みです。関連するタイミングは、redirectStart と redirectEnd(Unload の unloadEventStart および unloadEventEnd のプロンプトと重複)です。fetchStart、domainLookupStart、domainLookupEnd、connectStart、secureConnectionStart、connectEnd、requestStart、responseStart、responseEnd、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、dom、loadEventStart、loadEventEnd のプロンプトです。
ネットワーク リクエストのフェーズとそれに関連するタイミングの図。TTFB は startTime から responseStart までの経過時間を測定します。

TTFB は、次のリクエスト フェーズの合計です。

  • リダイレクト時間
  • Service Worker の起動時間(該当する場合)
  • DNS ルックアップ
  • 接続と TLS ネゴシエーション
  • リクエスト(レスポンスの最初のバイトが到着するまで)

接続設定時間とバックエンドのレイテンシを短縮すると、TTFB を短縮できます。

優れた TTFB スコアとは

TTFB は First Contentful Paint(FCP)Largest Contentful Paint(LCP)などのユーザー中心の指標よりも前に行われるため、ユーザーの 75 パーセンタイル「良好」なしきい値内の FCP を体験できるように、サーバーがナビゲーション リクエストに迅速に応答することをおすすめします。大まかに言えば、ほとんどのサイトでは TTFB を 0.8 秒以下にする必要があります。

良好な TTFB 値は 0.8 秒以下、不良値は 1.8 秒を超え、その間はすべて改善が必要
TTFB の望ましい値は 0.8 秒以下、低い値は 1.8 秒以下です。

重要なポイント: TTFB は Core Web Vitals の指標ではないため、優れた TTFB がサイトに絶対に必要というわけではありません。ただし、TTFB が長くなっても、重要な指標のスコア付けが難しくならない限りは可能です。読み込み時間を最適化する際は サイトがコンテンツをどのように配信するかを考慮しますシングルページ アプリケーション(SPA)ではよくあるように、サイトが最初のマークアップを迅速に提供し、スクリプトが意味のあるコンテンツを入力するのを待たなければならない場合、TTFB が短いことは特に重要です。一方、クライアント側であまり作業を必要としないサーバーでレンダリングされるサイトの FCP と LCP の値は、たとえ TTFB が高くても、クライアント側でレンダリングされるサイトよりも高くなります。

TTFB の測定方法

TTFB はラボまたはフィールドで、次の方法で測定できます。

フィールド ツール

ラボ用ツール

JavaScript で TTFB を測定する

ブラウザでナビゲーション リクエストの TTFB を測定するには、Navigation Timing API を使用します。次の例は、navigation エントリをリッスンしてコンソールにログする PerformanceObserver を作成する方法を示しています。

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

web-vitals JavaScript ライブラリを使用すると、よりシンプルにブラウザで TTFB を測定することもできます。

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

リソース リクエストを測定する

TTFB はナビゲーション リクエストだけでなく、すべてのリクエストに適用されます。特に、クロスオリジン サーバーでホストされているリソースでは、それらのサーバーへの接続を設定する際にレイテンシが発生する可能性があります。フィールド内のリソースの TTFB を測定するには、PerformanceObserverResource Timing API を使用します。

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    // Some resources might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is served without a
    // Timing-Allow-Origin header set.
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

上記のコード スニペットは、ナビゲーション リクエストの TTFB の測定に使用するコードと似ていますが、'navigation' エントリをクエリする代わりに 'resource' エントリをクエリする点が異なります。また、接続がすでに開いている場合や、リソースがキャッシュから即座に取得された場合、プライマリ送信元から読み込まれた一部のリソースが 0 の値を返す可能性があることも考慮しています。

TTFB を改善する方法

サイトの TTFB を改善する方法については、TTFB の最適化に関する詳細なガイドをご覧ください。