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

対応ブラウザ

  • 43
  • 12
  • 31
  • 11

ソース

TTFB とは

TTFB は、リソースのリクエストからレスポンスの最初のバイトが到着し始めるまでの時間を測定する指標です。

ネットワーク リクエストのタイミングの図。左から右にフェーズはリダイレクト(アンロードのプロンプトと重複)、キャッシュ、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 ネゴシエーション
  • Request(レスポンスの最初のバイトが到着する時点まで)

接続セットアップ時間とバックエンドのレイテンシを短縮すると、TTFB が短縮されます。

優れた TTFB スコアとは

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

良好な TTFB 値は 0.8 秒以下、不良値は 1.8 秒を超え、その間はすべて改善が必要

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 を測定するには、PerformanceObserver 内で Resource Timing API を使用します。

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

  for (const entry of entries) {
    // Some resources may have a responseStart value of 0, due
    // to the resource being cached, or a cross-origin resource
    // being 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 の最適化に関する詳細なガイドが公開されています。