静的サイトのロード速度をCloudflareのキャッシュで高速化してみた

静的サイトホスティングのロードはなぜ遅いのか？

単純にサーバーの性能が良くないのもあるかもしれませんが、Github PagesやGitlab Pagesだとサーバーが海外（大体アメリカ）にあるので、物理的距離が原因でロード・レスポンスは日本国内のサーバーよりもどうしても遅くなってしまいます。

Cloudflareでキャッシュしてしまおう

物理サーバーの距離はどうしようもないので、CDNを利用することにしました。最近困ったらCloudflareって感じになっています。

Cloudflareをネームサーバーにしている場合、サーバーへのリクエストは下記のような流れでブラウザに到達します。

Gitlab Pages
↓ (1) 400〜800msくらい
Cloudflare
↓ (2) 100ms台
ブラウザ

この(1)のところが遅いので、Cloudflareのキャッシュ機能を利用して(1)の流れを削除します。

デメリットとしては、オリジン（今回の場合はGitlab Pages）での更新があっても、Cloudflareのキャッシュが表示されてしまう点です。

ここは、今回は静的サイトジェネレータを使ったサイトなので、ビルド時にCloudflareのAPIを叩いて全てのキャッシュをクリアすることにします。

キャッシュの設定方法

Cloudflareで「全てをキャッシュ」

Cloudflareは、CSSやJS、画像ファイルなどはプロキシしていればデフォルトでキャッシュしてくれますが、HTMLファイルはキャッシュしません。

そこで、ページルールを使ってHTMLもキャッシュさせます。

ページルールから新規ルールを作成して、

• exmaple.com/*
• キャッシュレベル
• Cache Everything

で全てのファイルがキャッシュされます。ドメイン名はサンプルです。利用するドメイン名を入れてください。

ビルド時にAPIからキャッシュを削除

このままだとサイトを更新してもキャッシュが更新されず、「ページが更新されないサイト」になってしまうので、静的サイトジェネレータのビルド時にCloudflare APIを叩いてキャッシュを削除します。

curl -X DELETE "https://api.cloudflare.com/client/v4/zones/ゾーンID/purge_cache" \
-H "Content-Type:application/json" \
-H "X-Auth-Email: Cloudfalre ID(メールアドレス)" \
-H "X-Auth-Key: APIトークン" \
--data '{"purge_everything":true}'

最後のpurge_everythingが「全てのキャッシュを削除」になります。

• ゾーンID
• Cloudfalre ID(メールアドレス)
• APIトークン

は、アカウント、サイトによってそれぞれ異なりますので、置き換えて使ってみてください。

CI/CDに上記のcurlコマンドを追加しておけば、完全自動化できるので便利です。CI/CDによってはデフォルトでcurlが入っていない場合もあるので、その場合はインストールコマンドを入れましょう。

Debian系なら、

sudo apt install curl

で入ります。

実際に運用してみて

基本的には問題なく運用できています。

ロードタイムは、実装前はHTMLファイルのレスポンスが返ってくるまで900msくらいかかっていたのですが、キャッシュを設定したことで100ms台後半まで短縮されました。エッジサーバーのキャッシュを返すので、CDNなしの国内ホスティングサービスよりも速いですね。

毎日数百回とか数千回更新されるようなサイトでは難しいですが、ページ更新・追加頻度が1日1回程度のサイトであればと問題ないと思います。もっとも、更新頻度が高いサイトであれば、静的サイトではなく動的になることが多いかもしれませんが。

一点、CloudflareのCDNからデータが完全に削除されるまでに、タイミングによっては30分くらいかかることがありました。もし急ぎの場合は、Cloudflareの管理画面から削除した方が速いのでそちらを使うと良いです。

動的な部分はどうするか？

静的サイトなので動的な部分は基本的にはないかと思いますが、部分的に動的なページがある場合もあるでしょう。その場合は、Cloudflareのページルールでキャッシュを除外するのが良いです。

自分の場合は、動的な部分は最近はCloudflare Workerで構築してしまうことが多いので、動的な部分だけCloudflare Workerでオーバーライドしています。

参考:Cloudflareで静的サイトをキャッシュする時のベストプラクティス