TTFBとは？サイト表示速度を左右する“最初の一歩”を改善する方法

日々ページスピードインサイト（PageSpeed Insights）に取り組んでいますが、弊社としても毎回最後に悩むのがLCP「最大コンテンツの描画」要素の対策です。

LCPとは「Largest Contentful Paint」の略で、表示領域内の最も大きな要素が表示されるまでの時間です。LCPの指摘はさらに下記4つに細分化されます。

• TTFB
• 読み込み遅延
• 読み込み時間
• レンタリング遅延

今回は上記の中のTTFBについて解説・改善策を掲載します。

TTFBとは何か？

TTFBとは「Time to First Byte」の略で、ブラウザが最初のバイトを受け取るまでの時間を指します。TTFBは以下の時間の合計値となります。

• リダイレクト時間
• サービスワーカーの起動時間（バックグラウンドで実行するJavaScript）
• DNSルックアップ
• 接続とTLSネゴシエーション
• リクエスト（レスポンスの最初のバイトが到着するまで）

TTFBはサーバー側の応答時間の指標で、表示速度に対して基礎的な部分です。

TTFBが遅くなる主な原因

TTFBは以下要因に影響されます。

• サーバーレスポンスの遅延
• 過剰なリダイレクト
• サーバーサイド処理の遅延（CMS・DB）
• ネットワーク遅延

共用サーバーのように他のサイトの影響を受けるサーバーはレスポンス遅延に繋がる可能性があります。専用サーバー、少なくともVPSサーバーを使う、などサーバーレスポンスを高めることができます。

リダイレクトもTTFBに影響します。特に複数回リダイレクトが発生する場合は影響が大きいので避けるべきです。

CMSやDBといったサーバー側の処理遅延も影響します。SQL（構造化クエリ言語）を際限なく使用するエンジニアもいますので場合によってはシステム設計の見直しまで行う必要があります。

サーバーサイド処理の遅延はネットワーク遅延にも繋がります。1件あたりの処理が重い上に接続数が多いとネットワーク遅延発生に繋がります。TTFBの数値が良くない場合はサーバー・システム設計の見直しが必要な可能性もあるため対応工数が大きい箇所となります。

TTFBの計測方法

TTFBの計測方法は以下です。

• PageSpeed Insights
• curlコマンド（技術者向け）

PageSpeed Insightsで任意のページについて計測すると結果レポートで確認ができます。ただし、「実際のユーザーの環境で評価する」セクションにあり、アクセス数が一定数ないと表示されません。

他にもcurlコマンドで計測できます。例えばcurlコマンドを使ってTTFBを計測するには、-w オプションで time_starttransfer を指定します（下記例）。

curl -o /dev/null -s -w "TTFB: %{time_starttransfer}\n" https://example.com

なお、TTFBのスコアは緑（高速：0〜800ミリ秒未満）、オレンジ（中程度：800ミリ秒以上〜1800ミリ秒以下）、赤（遅い：1800ミリ秒超）となります。

TTFBの改善策と実践方法

TTFBの改善方法は以下です。

1. サーバーの応答速度改善（PHPバージョン、キャッシュ）
2. .htaccess記述
3. CDNの活用
4. DNS応答時間短縮

まず改善について考えたいのはPHPバージョンです。PHPのバージョンが低い場合、バージョンアップすることでサーバーの応答速度改善が期待できます。PHPはバージョンアップと共に処理速度が高速化されているため、バージョンアップだけで改善できる場合もあります。

ただ、PHPのバージョンに依存しているプログラムがある場合はシステム改修も必要となります。WordpressもPHPバージョンアップにより動かなくなるプラグインもありますので注意が必要です。

次に.htaccessは「ブラウザのキャッシュ活用」と「サーバー圧縮」を有効にします。サーバーキャッシュを有効化することで応答速度向上が可能です。Apacheの場合の記述例は古い記事ですが、下記にございます（基本部分は一緒です）。

上記に取り組んだ上でさらに検討したいことがCDN（Contents Delivery Network）の利用です。CDNを利用してキャッシュサーバーを分散する方法もあります（コスト増になりますが）。

また、DNS応答時間短縮の方法はプレミアムDNSを使用することです。無料のDNSよりも高速化が期待できます。もちろん費用対効果も踏まえて検討してください。

今後の指標との関係

以上がTTFBの解説と改善策です。TTFBはLCP「最大コンテンツの描画」要素へ影響する指標です。Core Web Vitals（コアウェブバイタル）の指標であるINPにも影響します。サーバー設定の基本部分なので後から改善すると工数規模が大きくなる可能性もあります。

なお、TTBF改善は表示速度向上に繋がるのでSEOにも間接的に効果があります。ユーザービリティにも影響がありますので、特にスコアが赤い場合は改善に取り組んでください。まずは自社サイトの状態を確認し、難しければ専門家に相談するのも一つの方法です。