サイト読み込み速度を上げるとなると、普通は、フロントエンドのパフォーマンス改善や最適化に着手するもの。

しかし、ウェブサイト読み込みの始点であるサーバーもお忘れ無く。

今回は、サーバー初期応答時間(TTFBの影響と、それを減らす方法についてご説明します。TTFBは見過ごされがちなパフォーマンス指標。だからこそ、サイトのスピードテストの際には意識して目を向けましょう。

TTFBとは

TTFBとは「最初の1バイトを受信するまでの時間」(Time To First Byte)を意味します。TTFBはブラウザがサーバーからのデータの最初の1バイトを受け取るまでにかかる時間のことです。このデータを受け取るまでに時間がかかるほど、ページの表示が遅くなります。よくある誤解が、DNSルックアップ後にTTFBが計算されるというもの。しかし、実際のネットワークにおけるTTFBの計算には常にネットワークレイテンシが含まれます。これは3つのステップで構成され、その間のどこでも遅延やレイテンシが発生する可能性があり、結果として合計TTFBが累積していきます。

待ち時間ttfb
待機時間(TTFB)

1. サーバーへのリクエスト

訪問者がウェブサイトにアクセスすると、クライアント(ブラウザ)からサーバーにHTTPリクエストが送信されます。ここには、遅延を起こす要因がいくつかあります。DNSルックアップに時間がかかると、リクエストの時間が長くなる可能性があります。サーバーが地理的に遠く離れていると、データの移動距離が長くレイテンシが発生する可能性があります。また、ファイアウォールのルールが複雑だと、ルートにかかる時間が長くなる可能性があります。また、クライアントのインターネット速度も要因の一つです。

2. サーバーでの処理

リクエストを受信したサーバーは、これを処理してレスポンスを生成します。ここにも、遅延を引き起こす要因がいくつかあります。例えば、データベースからのデータ取得、サードパーティスクリプトが多すぎること、最初のレスポンスがキャッシュされていないこと、コードやテーマの最適化が正しくないこと、ディスクI/Oまたはメモリなどのサーバーリソースが不十分であることなど。

3. クライアントへのレスポンス

サーバーはリクエストを処理した後、クライアントにレスポンスを返します(これが「最初の1バイト」になります)。このステップは、サーバーのネットワーク速度とクライアントのネットワーク速度の両方から大きな影響を受けます。クライアントが、例えば、低速Wi-Fiホットスポットを使用していると、TTFBはその分だけ遅くなります。

TTFBは重要なのか

ちなみに、TTFBはウェブサイトの読み込み速度とは違いますので、ご注意ください。あくまでも応答性の測定値です。TTFBが重要かどうかについて、ウェブ上で多くの議論が繰り広げられています。あまり重要ではないとする派閥(CloudflareLittleBizzy)も、重要だとする派閥(GoogleのウェブパフォーマンスエンジニアであるIlya Grigorik氏など)もあります。両者が、TTFBの重要性と計算の仕方について、もっともな論点を示しています。

Mozは、検索結果表示ランキングとTTFBの相関についての詳細な調査を実施。しかし、その結果からはっきりとしたことは言えません。TTFBの低いウェブサイトが単純に高速である可能性があります。Googleはページ読み込み速度を順位決定の一つの要素として採用しています。

ですので、今回は「重要かどうか」ではなく、「改善かつ最適化する方法」をご説明したいと思います。すべての改善策はサイトの全体的なスピードに反映され、TTFBにも影響します。当社の実施したテストでは、TTFBの長いウェブサイトは読み込み速度が遅く、ユーザーも遅さを感じました。

一般に、TTFB100ミリ秒未満であれば上出来ですGoogle PageSpeed Insightでは、サーバーの応答時間を200ミリ秒未満にすることを推奨しています。300〜500ミリ秒は、いたって普通です。600ミリ秒を超えている場合、サーバー設定の問題を疑いましょう。優れたウェブスタックにアップグレードする必要があるかもしれません。また、TTFBを低減する方法については、下記の推奨事項をご覧下さい。なお、SSL/TLSネゴシエーションも重要な要素です。

TTFBの測定方法

TTFBのテストは、さまざまな方法で実施できます。この記事ではいくつかご紹介しますが、それぞれ結果がわずかに異なる場合がありますので、ご注意ください。1つを選んで、それのみを参考にするのがいいでしょう。

Google Chrome DevToolsでTTFBを測定する

DevToolsを使用しGoogle ChromeでTTFBを測定できます。ただし、ご自分のコンピューターから試験を行う際には、TTFBがネットワークレイテンシとインターネット接続の影響を受けることにご注意ください。データセンターからテストを行う、サードパーティツール(下記参照)を使用する方が、効率がいいかもしれません。

  • Chrome メニューから「その他のツール」>「デベロッパー ツール」を選択
  • ページ要素を右クリックして「検証」を選択
  • キーボードショートカット「Ctrl+Shift+I」(Windows)または「Cmd+Opt+I」(Mac)を押す

以上のいずれかの操作で、ウェブサイトの性能を確認できます。

Google ChromeのDevtoolsのTTFB
Google Chromeのデベロッパーツールを使ってTTFBを確認

GeekflareのツールでTTFBを測定する

Geekflareには、ウェブサイトのテストやトラブルシューティングに使える無料のツールがたくさんあります。GeekflareのTTFBツールはシンプルかつ迅速で、最初の1バイトを受信するまでの時間を、世界3カ所から測定します。

GeekflareのTTFBテストツール
GeekflareのTTFBテストツール

WebPageTestでTTFBを測定する

WebPageTestでもTTFBを測定できます。同社によると、目標時間はDNS、ソケット、SSLネゴシエーションに必要な時間+100ミリ秒とのこと。目標から100ミリ秒遅れるごとに文字で表されるグレードが1つずつ下がります(A→B…といった具合)。ご覧のとおり、テストで使ったサイトのTTFBは0.256秒(256ミリ秒)でした。

WebPageTestのTTFB
WebPageTestのTTFB

PingdomでTTFBを測定する

ChromeとWebPageTestでは、TTFBと呼ばれていますが、Pingdomでは「Wait」(待機時間)と表記されます。Pingdomの使い方については、こちらの記事をご覧ください。

Pingdomツールでの待機時間
Pingdomツールでの待機時間

GTmetrixでTTFBを測定する

GTmetrixでも、Pingdomと同様に、TTFBは「Wait」(待機時間)と呼ばれています。GTmetrixの使い方は、こちらの記事をご覧ください。

GTmetrixを使用しTTFBを測定
GTmetrixを使用しTTFBを測定

KeyCDNのツールでTTFBを測定する

KeyCDNには、14カ所から同時にTTFBを測定できる、優れたウェブパフォーマンステストツールがあります。ここでは、TTFBはアメリカでは短く、他の国でははるかに長くなっています。これは、テストサイトのサーバーがアメリカにあるためです。レイテンシと距離がTTFBに影響することがわかります。

KeyCDN のTTFBテスト
KeyCDN のTTFBテスト

この他にも、Sucuri Performance ToolByteCheckなど、TTFBが測定できるツールはいくつかあります。ご存じかもしれませんが、Googleアナリティクスでも、平均応答時間が確認できます。「行動」>「サイトの速度」>「速度についての提案」をクリックします。

Google AnalyticsのTTFBレポート
Google AnalyticsのTTFBレポート

サイトのTTFBを低減する4つの方法

続いては、ウェブサイトのTTFB低減方法をご紹介します。

1. 高速サーバーを利用する

TTFBを減らす最初の方法は、高速なサーバーを利用することです。ある共用レンタルサーバー(注釈:1台のサーバーを複数ユーザーで共有するタイプ)のTTFB(アリゾナ州フェニックス)と、マネージドWordPressホスティングであるKinstaのTTFB(アイオワ州カウンシルブラフス)を比較しました。デフォルトのTwenty Seventeenテーマを使用。設定もまったく同じです。Kinstaでは現在、Google Cloud Platformのデータセンター37カ所すべての中から好きなものが選べます。サイト訪問者に近いデータセンターを選択するのが重要です。

さらにKinstaでは、べてのホスティングプランを対象にGoogle Cloud Platformのプレミアムティアネットワークを使用しています。一方で、多くの一般的なレンタルサーバーが、遅延の原因となるGoogle Cloudスタンダードティアネットワークを採用しています。

某共用レンタルサーバーのTTFB

全地域の平均TTFB520ミリ秒。アメリカとカナダのみの平均TTFB240ミリ秒でした。

共有ホスティング会社のTTFB
某共用レンタルサーバーのTTFB

KinstaのTTFB

全地域の平均TTFB412ミリ秒で、アメリカとカナダのみの平均TTFB164ミリ秒でした。Kinstaでは、ヨーロッパでもアジアでも、数あるデータセンターから選んでサイトをホストすることができます。Google Cloudデータセンターの一覧はこちらをご覧ください。

マネージドWordPressホスティングのTTFB
マネージドWordPressホスティングのTTFB

高速なサーバーを使用するだけで、世界全体のTTFBが20%減少しました。また、アメリカとカナダのTTFBは32%減少しています。

細部を考慮して設計されたアーキテクチャを持つ、優れたアプリケーションデータベースマネージドWordPressホスティングへの投資は、TTFBの改善に非常に効果的です。

訪問者の近くにあるデータセンターを選ぶこともポイントです。例えば、日本からのサイト訪問者が大多数であれば、ヨーロッパのデータセンターを選ぶのは得策ではありません(ただし、CDNを使ってある程度その影響を抑えることは可能です)。

2. CDNを使用する

TTFBを減らすもう1つの簡単な方法は、コンテンツデリバリネットワーク(CDN)を使用すること。世界各地に訪問者のいるサイトでは、CDNによりTTFBを大幅に低減できます。先にご説明したように、サーバーの場所は非常に重要です。その影響をお見せするのに、Kinsta愛用のKeyCDNで簡単なテストを行いました。各テストを5回実行し、平均を出しています。

CDNなしのTTFB

まず、CDNを無効にしてテストを行いました。合計読み込み時間は1.45秒、アセットの平均TTFBは約136ミリ秒でした。

CDNを入れる前のTTFB
CDN無効時のTTFB

CDNありのTTFB

次に、CDNを有効にしてテストを再び実行しました。ご覧のとおり、合計読み込み時間は788ミリ秒に下がり、平均TTFBは今や37ミリ秒です!CDNは確かな違いを生みます。それに、場所をストックホルムにしたことも非常に重要です。というのも、結果がどれだけ改善するのかを示すためです。ストックホルムにはCDN POP(接続ポイント)があります。ですので、ストックホルムからコンテンツが配信されます。

TTFBを入れてからのCDN
CDN有効時のCDN

注)Cloudflareをご利用の場合は、TTFBが少し長くなる場合があります。これは、オーバーヘッドが増え、完全なプロキシサービスが実行されているためです。Cloudflareには、ファイアウォールや、その他のCDNにはない機能が含まれています。大事なのはサイト毎に適切なセットアップを判断すること。サイトが完全に最適化されていない場合には、TTFBが若干長くてもCloudflareを利用する価値はあるかもしれません。

なお、WP Bulletの記事では、Cloudflareのページキャッシュを使用してTTFBを下げる方法が解説されています。これには、追加のセットアップとテストが必要になります。各環境で状況は異なるため、採用前に必ずご自分のサイトに合っているかどうかテストしてください。

関連して、WordPressにCloudflare APOを設定する方法はこちらをご覧ください。

3. サイトでキャッシュを使用する

3つ目がこちら。おそらく最も簡単なTTFB低減方法が、サイトでのキャッシュ利用です。多くの人が「キャッシュは読み込み時間削減だけのもの」と誤解しています。しかし実際には、サーバーの処理時間を短縮し、TTFB削減にも貢献します。キャッシュを使う場合と使わない場合のテストを実施してみました。各テストは5回実行し、平均を算出しています。

キャッシュなし

Pingdomを使用してスピードテストを行った結果、キャッシュなしでは、ウェブサイトの読み込み時間は1.17秒、TTFBは560ミリ秒でした。

キャッシングを実行していないままのTTFB
キャッシュなしのTTFB

キャッシュあり

次にキャッシュを有効にし、Pingdomスピードテストを再度実施します。今回のサイト読み込み時間は643ミリ秒、TTFBは57ミリ秒でした。

キャッシングを実行したままのTTFB
キャッシュありのTTFB

ご覧のとおり、キャッシュを有効にしただけで、TTFB90%削減できました!Kinstaのキャッシュについての記事もあわせてご覧下さい。当社では、サーバーレベルのキャッシュを採用しています。キャッシュ系プラグインは必要ありません。マネージドWordPressホスティングサービスをご利用でない方には、無料で使えるCache Enablerなどのプラグインをお勧めします。

4. プレミアムDNSを利用する

最後に、DNSもTTFBに影響します。影響の度合いを正確に計測するのは簡単ではありません。しかし、合計DNSルックアップ時間を確認すると、ピンからキリまであることがわかります。SolveDNSスピードテストツールを使用しテストを実施してみました。NameCheapの無料DNSを使用するドメインの応答時間は以下のとおりです。

NameCheapのDNS(無料)

無料のDNSスピード
無料DNSのスピード

次に、Amazon Route 53のプレミアムDNSを使用した例です。ご覧のとおり、AmazonではDNSルックアップ時間が大幅に短縮されています。普通、プレミアムDNSのスピードの方が圧倒的に優れています。ちなみに、Cloudflareは無料で使えますが、パフォーマンスは優秀です。

Amazon Route 53のDNS

AmazonのプレミアムDNSのスピード
AmazonプレミアムDNSのスピード

プレミアムDNSを使用すべき理由もあわせてご確認ください。KinstaはAmazon Route 53を採用。すべてのお客様に無料でご利用いただけます。

まとめ

TTFBを減らすために最適化または修正できるものは数多くあります。データベースのキャッシュ、ディスクI/O、スワップ使用状況、RAM、PHP設定、MySQL設定、ネットワーク設定、TLSオーバーヘッドなどなど。ただし、今回ご紹介した対策は実施しやすく、その割に大きな影響をもたらします。もし誰かにTTFBを減らすコツを尋ねられたら、迷うことなく、「高速サーバー、CDN、キャッシュ、DNSが肝だ」と答えましょう。これらのボトルネックを修正、改善すれば、TTFBは削減できます。

TTFBの施策などについて、ご経験があればコメント欄から教えてください。

Brian Jackson

Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。