Time to First Byte（TTFB）は、ラボとフィールドの両方で接続の設定時間とウェブサーバーの応答性を測定するための基本的な指標です。リソースのリクエストから、レスポンスの最初のバイトの到着を開始するまでの時間を測定します。これにより、ウェブサーバーがリクエストへの応答が遅すぎるタイミングを特定できます。ナビゲーション リクエスト（つまり HTML ドキュメントのリクエスト）の場合、他の意味のある読み込みパフォーマンス指標よりも優先されます。
startTime から responseStart までの経過時間を測定します。TTFB は、次のリクエスト フェーズの合計です。
- リダイレクト時間
- Service Worker の起動時間（該当する場合）
- DNS ルックアップ
- 接続と TLS ネゴシエーション
- リクエスト（レスポンスの最初のバイトが到着するまで）
接続設定時間とバックエンドのレイテンシを短縮すると、TTFB を短縮できます。
優れた TTFB スコアとは
TTFB は First Contentful Paint（FCP）や Largest Contentful Paint（LCP）などのユーザー中心の指標よりも前に行われるため、ユーザーの 75 パーセンタイルが「良好」なしきい値内の FCP を体験できるように、サーバーがナビゲーション リクエストに迅速に応答することをおすすめします。大まかに言えば、ほとんどのサイトでは TTFB を 0.8 秒以下にする必要があります。
重要なポイント: TTFB は Core Web Vitals の指標ではないため、優れた TTFB がサイトに絶対に必要というわけではありません。ただし、TTFB が長くなっても、重要な指標のスコア付けが難しくならない限りは可能です。読み込み時間を最適化する際は サイトがコンテンツをどのように配信するかを考慮しますシングルページ アプリケーション（SPA）ではよくあるように、サイトが最初のマークアップを迅速に提供し、スクリプトが意味のあるコンテンツを入力するのを待たなければならない場合、TTFB が短いことは特に重要です。一方、クライアント側であまり作業を必要としないサーバーでレンダリングされるサイトの FCP と LCP の値は、たとえ TTFB が高くても、クライアント側でレンダリングされるサイトよりも高くなります。
TTFB の測定方法
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 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 の最適化に関する詳細なガイドをご覧ください。