TTFB（Time to First Byte）は、ブラウザがWebページをリクエストしてからサーバーから最初の1バイトのデータを受信するまでにかかる時間を指します。

このページではTTFB改善の6つの施策をわかりやすく解説します。

TTFBの仕組みや内容を把握したい方は「TTFBとは」の記事をご覧ください。

TTFBの数値を低下させる主な要因

主にTTFBの速度に関係のある要素としては、DNSからSSL/TLSのハンドシェイクなどHTTPリクエストを送る前の段階での接続部分、サーバーのスペック、CDNのエッジキャッシュ部分、アプリケーションの最適化部分などが主に要因として挙げられます。

TTFBを改善させる6つの施策

具体的な6つの改善施策をまとめました。

1. 高速サーバーの利用
2. CDNの導入とキャッシュの活用
3. ブラウザキャッシュの設定
4. PHPを最新のバージョンにする
5. HTTP/2またはHTTP/3の使用
6. 外部リソースへの事前接続

下記で詳しく解説していきます。

高速サーバーの利用

サーバーの処理能力でも応答速度が変わり、高速サーバーの利用で処理能力もアップしTTFBの改善につながります。

サーバーの種類は専用サーバー、VPS、共有サーバーとありますが、専用サーバーが一番処理速度も速くなるので専用サーバーを利用するようにしましょう。

それ以外にも、サーバー選定の際は下記のポイントをチェックしておくといいでしょう。

• 専用サーバーを利用する（共用サーバーなどを利用の場合）
• 高性能CPUを選ぶ
• ストレージはSSDにする
• ネットワークのスペックが高いものを選ぶ（特にアクセス集中時に効果あり）

また、更に高度な技術が必要な方法ではありますが、サーバープログラム自体を修正し処理効率を上げるという方法もあります。

これに関しては別の記事でご紹介します。

CDNの導入とキャッシュの設定

CDN（コンテンツ配信ネットワーク）の導入とキャッシュの設定は非常に効果的な方法です。

ウェブサイトにアクセスした場所からサーバーまでの距離が遠いとその分、サーバーの応答時間がかかります。

CDNを導入することで、アクセスした場所から近いCDNサーバーに接続ができるのでサーバーの応答時間も速くなります。

また、CDNはエッジキャッシュが残せるため、キャッシュが残った状態でCDNサーバーにアクセスすることでわざわざ本家のサーバーへ問い合わせをする必要がなくなります。

DNSキャッシュの仕組み

通常、ウェブサイトを読み込む際にDNSサーバーにIPアドレスを読み込みにいく動作が発生します。

下記の画像の①〜⑧の流れでIPアドレスを取得します。（サーバーにも負荷がかかったり、読み込み時間がります）

DNSキャッシュを活用すると、問い合わせ結果をキャッシュとして保存できるので、下記の画像のようにサーバーの読み込みや負荷も減り応答速度が格段と上がります。

この応答速度を上げることで、TTFB（Time to First Byte）も上がり、結果的にLCP評価向上にも繋がります。

DNSキャッシュは、DNSレコードを管理する場所（ドメインサービスやサーバーサービスの管理画面など）でDNSの設定を行います。

DNSキャッシュの設定は「DNS情報を何秒間キャッシュしていいか」をTTL（Time To Live）の値（時間）で決めます。

運用方針にもよりますが、下記の時間を目安とすることが多いです。

DNSキャッシュの設定の目安

• 1時間 → 3600秒
• 6時間 → 21600秒
• 24時間 → 86400秒

TTLの設定については、DNSレコードごとに設定するようにしましょう。（Aレコード、CNAMEレコードなど）

このキャッシュの設定でも応答速度が早くできるのでTTFBの数値改善にも影響します。

CDNについて詳しくは「CDNとは？仕組みやキャッシュについて初心者にもわかりやすく解説」をご覧ください。

ブラウザキャッシュの活用

一度読み込んだファイルをブラウザが保存して、次回アクセス時に瞬時に表示させます。

ブラウザの場合は、個のユーザーが閲覧したブラウザにキャッシュされ、2回目以降のアクセスが早くなります。

下記は.htaccessファイルへの記述例ですが、HTMLのメタタグやJavaScriptなどでも指定できます。

ブラウザキャッシュの設定例（.htaccess）

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/html "access plus 5 minutes"
</IfModule>

ブラウザキャッシュの設定では、どのファイルに対して、どの程度の期間キャッシュをするか設定ができます。

あくまで参考ですが、各ファイルとキャッシュ期間の値の例をまとめた表になります。

PHPを最新のバージョンにする

PHPを使ってる場合は、PHPを最新のバージョンにしておくことで処理速度も向上されサーバーの応答速度も改善されます。

よって、TTFBの数値改善にも役立ちます。

古いバージョンを使っていると、処理の効率も下がります。

ここではPHPのバージョンについて触れていますが、他の言語を活用している場合は（node.js、python、JavaScriptなど）、それぞれのバージョンも同様に最新にしておきましょう。

HTTP/2またはHTTP/3を使用する

HTTP/2およびHTTP/3は、従来のHTTP/1.1よりも通信効率が大幅に改善され高速化されます。

HTTP/1.1を使用している場合は、HTTP2かHTTP3を使用するようにしましょう。

HTTP/1.1と比べ、HTTP2かHTTP3では下記の点が大きく改善されます。

HTTP/2、HTTP/3のレスポンスの速度に関する大きな違いとしては下記となります。

• 複数のリクエストを同時に送れる
• 1つの接続で並列に処理が可能
• 1回のコネクションは長期間使用できる

これらの理由からHTTP2かHTTP3の方がリクエストの処理が早くなるため、ウェブページの読み込みも早くなります。

通信プロコトルのTCPはパケットを順番通りに安全に順番に送られる方法で、UDPはTCPより転送は速いが順番関係なしで送りますがパケット損失が発生する可能性もあります。

HTTP2とHTTP3は、速さを求めるか安全性を求めるかで選定していくといいでしょう。

HTTP/3やHTTP/2について詳しくは「HTTP/3とは？HTTP/2の違いや特徴を比較」の記事でも詳しく説明しています。

外部リソースへの事前接続

外部リソースへの事前接続とは、ページが完全に読み込まれる前に、外部のサーバーやリソース（API、CDN、フォント、画像など）との接続を予測して早期に確立しておくことです。

これにより、実際にそのリソースが必要になったときに、接続がすでに確立されているため、待機時間が短縮され、TTFBが改善されます。

主に下記の方法があります。

DNSとTLSハンドシェイクを事前接続する

DNS解決とTLSハンドシェイクを事前接続することは、ページの読み込み速度を向上させTTFB（Time to First Byte）改善するために重要な技術です。

これらの操作を事前に行うことで、ユーザーが実際にリソースを要求する前に接続が準備され、遅延を最小限に抑えることができます。

DNSの場合は、DNSプリフェッチ（dns-prefetch）を使用し、ページが読み込まれる前にブラウザがドメイン名を解決します。

HTMLヘッダー内に以下のタグを追加することで、外部ドメインへのDNS解決を事前に行うことができます。

<link rel="dns-prefetch" href="//example.com">

TLSハンドシェイクの事前接続は（preconnect）を使うことで、ブラウザが実際にリソースを要求する前に、TLSハンドシェイクを完了させ接続を確立できます。

これにより、リソースを要求した際に即座にデータを送受信でき、待機時間を削減します。

HTMLヘッダー内に以下のタグを追加することで、簡単に設定ができます。

<link rel="preconnect" href="https://example.com" crossorigin>

注意点とポイント

1. dns-prefetchやpreconnectを両方活用する
2. 不要なリソースには適用しない

TTFBの6つの改善施策まとめ

TTFBの改善は、サーバー側とネットワーク側の最適化を組み合わせることで大きな効果が得られます。

サーバーの性能向上や、キャッシュ、CDNの活用、HTTP/2やHTTP/3の導入、データベースの最適化など、さまざまな方法があります。

これらの方法を適切に組み合わせて実装することで、TTFBを最適化し、ユーザーの待機時間を短縮し、サイト全体のパフォーマンスを向上させることができます。