[Cloudflare Pages]Cache Rulesを設定してwebサイトを高速化する

最近はJamStackサイトのホスティングサービスにCloudflare Pagesを採用する方が増えていると思います。

特に設定を入れることなく高速に動作するのが特徴ですが、Cache Rulesの設定をすることでwebサイトをさらに高速化することができます。ここでは設定方法について記載します。

※Cloudflare Pagesに限らず、Cloudflareの全サービスで有効な手順です

現状の確認

JamStackサイトの任意のページにアクセスし、ブラウザの開発者ツールでレスポンスヘッダを確認します。

このとき、以下の様にCf-Cache-StatusにDYNAMICが設定されていたり、そもそもCf-Cache-Statusが存在しない場合はエッジキャッシュが有効になっておらず、オリジンサーバーがレスポンスを返却しています。

更新頻度が少ないブログサイト等では、積極的にキャッシュを利用してレスポンスを高速化したいところです。

Cache Rulesの設定

Cache Rulesを設定してエッジキャッシュを有効にするための手順を記載します。

設定画面の表示

Cloudflareのダッシュボードにアクセスし、左メニューの「webサイト」> 対象のwebサイトを選択します。

遷移後の画面の左メニュー「Caching」>「Cache Rules」をクリックすることで設定画面に遷移します。

ルールの作成

「ルールを作成」ボタンをクリックしてキャッシュを有効化するためのルールを作成します。

ここは人によって設定内容が変わるところですが、参考までに私の設定内容を紹介します。

私の場合は https://ebifran-roadbike-blog.com/ 全体でエッジキャッシュを有効にしつつ、キャッシュさせたくない一部のページのみURIパス指定でキャッシュ対象外とする設定にしています。
ここでは記事の作成時に下書きをプレビューするためのSSRページをキャッシュの対象外としています。

ステータスコードが200の場合のみキャッシュさせたいので、「ステータスコード TTL」にはそのための設定を入れています。
ここでは期間を1日に設定していますが、更新頻度が少ないwebサイトならもっと長めに設定してもいいかもしれません。
※後述の手順で、任意のタイミングでキャッシュをパージすることができます

ルールの作成後、「展開」ボタンをクリックし、対象のルールを有効にすることでwebサイトへルールが適用されます。

動作確認

任意のページのレスポンスヘッダを確認し、Cf-Cache-StatusがHITとなっていればエッジキャッシュからレスポンスが返却されています。

Ageにはキャッシュされてからの経過時間(秒数)が設定されています。

キャッシュパージ

webサイトの更新後、エッジキャッシュが有効なままだと更新が反映されないため、キャッシュをパージする必要があります。

Cloudflareのダッシュボード左メニューの「Caching」>「構成」をクリックし、以下のいずれかよりキャッシュパージが可能です。

• カスタムパージ
  URLを指定してパージ
• すべてパージ
  webサイトのすべてのキャッシュをパージ

まとめ

SSGサイトであれば基本的にCache Rulesの設定は入れておいた方がいいと思います。無料でここまでできるCloudflare Pagesは凄いですね。