静的サイトとTTFBの話

この記事はかいげんAdvent Calenderの4日目の記事です。

どうもこんにちは、唐突に "4日目のカレンダー空いてるから書け" と言われました　かたばみです。
というわけで静的サイトと無料のCDNとTTFBについてお話します。
TTFBというのは、 Time To First Byte の略でサーバーがリクエストを受け取ってレスポンスを返すまでの時間の事を差します。
つまりTTFBが早ければ早いほどレスポンスが返ってくるのが早いというわけですね。
具体的にどのぐらいにすればいいの？という話になってきますが　Google SpeedInsightでは 200ms 以下を推奨しています。

よく無料でウェブサイトを高速化するにはCloudFlareを使うといい！というのが見かけられますが、これは場合によっては逆に低速化してしまう可能性があります。

何故CloudFlareが勧められるかというと、無料で使えて世界中にノードがあるCDNだからという理由なのですが
実はCloudFlareはTTFBはあまり重要ではないと公表しています。 (TTFBを高速化するよりもPage loadedまでの時間を高速化すべきであると言っている)
実際CloudFlareのページロードは早いので、コンテンツのサイズが大きくリクエストに長い時間がかかる動的サイト等はCloudFlareを使用することで高速化が期待できます。

ではコンテンツのサイズが小さく、リクエストが短時間で終わる静的サイトの場合はどうでしょうか？
この場合、コンテンツのサイズが小さくページロードの時間はそこまで変わらないのでTTFB(ロード中の空白の時間)が重要になってきます。

これはどういうことかというと、CloudFlareは長時間リクエストが無いとTTFBが長くなる(Herokuの様にスリープしていると思われる)のでそこまでアクセスがないサイトだと逆効果になります。
(日本のノードに置かれればいいんでしょうが、アメリカのノードにしか置かれたことがないです。無料だとやっぱり厳しいんですかね)

さて、ここで問題になってくるのは 無料で高速な静的サイトを作るためにはどうすればいいか　ということです。 この問題を解決するには 無料で静的サイトをホスト出来るのはどこか？ と 無料で使えるCDNはどこか？ の2つの視点から見ていく必要があります。

まず無料で静的サイトをホスト出来るところからです。
CDNはサイトをキャッシュしているだけで、ホストしているところは別に必要ですので、もちろんホストする場所が必要になります。
ここではGitHub Pages, GitLab Pages, Netlifyを比較していこうと思います。

  • GitHub Pages
    かの有名なGitHubがページをホストしてくれるやつです。 リポジトリのブランチがそのまま公開されるので手間がかかりません。 TTFBは普通です。
  • GitLab Pages
    GitHubと対をなすGitLabもページをホストできます。 こちらもリポジトリのブランチがそのまま公開されます。 TTFBは少し遅いです。
  • Netlify
    GitHubやGitLab、BitBucketなどのリポジトリをビルドして公開してくれます。 何も設定しなくてもブランチをそのまま公開してくれるのですが、ビルドファイル等で設定することで細かくビルドを指定できます。 TTFBは普通です。

次に無料で使えるCDNです。 ここではCloudFlareとNetlifyCDNを比較していきます。

  • CloudFlare
    CDN以外にもセキュリティの強化などが出来ます。日本語の資料が多いので手間がかかりません。Let's EncryptでSSL化出来ます。日本には東京と大阪にノードがあるらしいです。TTFBはリクエストが多いほど早いです。

  • NetlifyCDN
    Netlifyでホストしているサイトは勝手にNetlifyCDNでホストされます。日本語の資料はそこまで多くはありません。こちらもLet's EncryptでSSL化出来ます。日本には少し前まで東京ノードがあったのですが、最近無くなってしまったようです。サポートによるとコスト面などの都合上ノードは頻繁に変更されるとのことでした。TTFBは少し早いぐらいです。

kataba.meは以前までNetlify + NetlifyCDNでホストしていました(今は更に高速化出来ないか色々試しています)。その際のTTFBは70ms程でしたので、無料にしては結構な速度でホスト出来ますね。

書くのに飽きて来たので、この辺でまとめたいと思います。

TL:DL

  • 無闇にCloudFlareを使うべきではない
  • 動的サイトやDDoS対策などがしたい場合はCloudFlareが効果的
  • 静的サイトはGitHubやGitLabのリポジトリをNetlifyでホストしたほうが効果的な場合が多い

一番いいのは日本のVPSを借りてそこでホストすることですね！こういった面倒な事を考えずに安定した速度を出せます！ いろんなサービスを比較して一番ニーズにあった物を選んで見て下さい。

この記事をご覧頂きありがとうございました！