TTFB とは
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 の測定方法
フィールド ツール
ラボ用ツール
- Chrome の DevTools のネットワーク パネル
- WebPageTest
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 の最適化に関する詳細なガイドが公開されています。