サイトにサーバーキャッシュがあるかないか（ヒットしているかしていないか）を確認する方法を詳しく解説します。
キャッシュの有無は、基本的にはブラウザを使ってサイトのレスポンスヘッダーを見ることで確認できますが、この方法では確認できない場合もあります。
以前、キャッシュHITの確認方法を調べていた時に情報不足で困ったので、色々調べました。その内容をこの記事で皆さんと共有したいと思います。
レスポンスヘッダー内にCacheの項目がない時の原因についても解説します。
サーバーキャッシュの有無の調べ方
サイトの高速化を考えた時、キャッシュの利用は不可欠といえます。
今はWordPressなどのCMSが普及し、キャッシュプラグインを使うことで誰でも簡単にサーバーキャッシュを導入できる時代になりました。そこで気になるのが、
- サイトにキャッシュを導入したけど、本当に使えているのか？
- サーバーキャッシュがHITしているか？していないか？の調べ方は？
- キャッシュHITの確認方法を調べたけど、肝心のCacheの項目がない…！
といった内容だと思います。
といった具合ですね。
当サイトはLiteSpeedのサーバーで運営しているのですが、nginxを使った別のサイトも手掛けています。実は以前に、これらのサーバーでキャッシュの有無を確認しようとした時にサーバーキャッシュが有るか無いか？の調べ方が分からず困りました。
ネットで調べるとブラウザを使ってキャッシュを確認する方法は出てくるのですが、肝心の「Chace」の項目が応答ヘッダーに無いんですよ…特にnginxサーバー。
そんな経緯もあり、この記事ではサーバーキャッシュの有無を確認する方法を詳しく解説していきたいと思います。では早速参りましょう・ｗ・
ブラウザでキャッシュの有無を調べる方法
「サーバーキャッシュが有るかどうか？ヒットしているかどうか？」を調べるには、ブラウザのデベロッパーツール（開発者ツール）を使って調べる方法が有名です。
この方法で調べれないサーバーもあるのですが、ややこしいので理由は後述します。
ブラウザを使ってサーバーキャッシュを調べる方法は以下の通りです。
ポイント
以降Chromeを使って解説していきますが、他のブラウザでも同じ感じです。
１．デベロッパーツールを起動する（F12でも起動可）
まずは、キャッシュを調べたいページを開いて「右クリック→検証」を押してChromeのデベロッパーツールを起動します。（F12を押しても起動できます。）
２．Network（ネットワーク）タブを開いてリロードする
デベロッパーツールが起動したら続いて「Network（ネットワーク）」タブを開き、そのまま「Ctrl + R」や「F5」を押してページをリロード（更新）します。
３．Typeが「document」になっているファイルの名前をクリックする
ずらずら～っとページ内のファイル達が読み込まれます。
ファイルが読み込まれたら「Type」のところが「document」になっているファイルの名前部分をクリックします。
４．Response Headers内のCacheの項目を確認する
ファイル名をクリックしたらタブが「Headers」になっているか確認。
「headers」タブ内に表示される「Response Headers（応答ヘッダー）」の欄にある「xxx-xxx-Chace」という項目を探しましょう。（名称はサーバーにより異なる）
当サイトの場合は「X-Litespeed-Cache:」というところに「hit」とあります。
これがページキャッシュです。キャッシュがない場合は「miss」と表示されます。
このように「xxx-xxx-Chace」の部分が存在していれば、
- hitならキャッシュ有り（documentをキャッシュから読み込んでいる）
- missならキャッシュ無し（documentをキャッシュから読み込んでいない）
という事が分かります。なお、hitとmiss以外のステータスもありますが、キャッシュ確認方法という事でこの記事ではこれ以上は割愛します。
FireFoxで同じ項目を確認した様子
今回はChromeを使いましたが、EdgeやFireFoxでも同様の手順でサーバーキャッシュの有無（hit,missなど）が確認可能です。ChromeがダメならFireFoxも試してみて！
レスポンスヘッダーに「X-Cache」がない理由
この記事はココからが本番。書きたかったところです。
先ほど紹介したブラウザを使ってサーバーキャッシュを確認する方法ですが、
というケースが多々あるかと思います。例を挙げると以下のような感じです。
Response Headersに「X-Cache」なんて項目はないぞ！
僕は過去にNGINX（エンジンエックス）を使っているXserverで、サーバーキャッシュをブラウザから確認しようとした時に肝心の「X-Cache」という項目が見当たらず、困ったことがあります。これどういうこと？？
調べてみるも、どこもかしこも「X-Cache」の項目を見る！としか書いていません…。
nginxサーバーではレスポンスヘッダーの設定が必要
調べていると、CDNを使っているサーバーの場合は“レスポンスヘッダーにキャッシュステータスを載せる”という設定がしてあり、CloudFlareを使っていれば「X-Cache」という項目が出現するとかなんとか・・・
さらに調べるとnginxサーバーの場合は、サーバー上の設定ファイル（nginx.conf）に以下のようなコードを記述しないと、レスポンスヘッダーにキャッシュステータスが載らないそうです。
nginx.conf
#キャッシュステータス（X-Cache）をレスポンスヘッダーに載せる
add_header X-Cache $upstream_cache_status;
nginx.confってのはサーバーの設定ファイルなので、権限がないと編集できません。
つまりつまり、Xserverなどの共有サーバーを使っている場合はキャッシュステータスをレスポンスヘッダーに載せるように設定されていないという訳です。
なるほどLiteSpeedサーバーでは元々この設定がされているのか…そもそも無い？
ちなみに自分のサーバーが何系なのかは、先ほどの手順で確認可能です。
ふむ、X-Cacheを載せない設定なのか。そりゃーキャッシュ確認できないわけだ。
「X-Cache」という名前はCDNによって変わる
レスポンスヘッダーに「X-Cache」がないよ～！なぜ～！？
という話をしましたが、この「X-Cache」という名前もどうやらサーバー（CDN）によって名称が異なるようです。
調べてみるとなかなかにややこしくなっておりました。
まずnginxサーバーで、nginxのリバースプロキシを使っている場合。
こちらは.confに設定が書かれているのか「X-Cache」という名前になっています。
続いてCDNにCloudFlareを使っているサーバーの場合。
こちらは「Cf-Cache-Status」という専用のステータスが付与されていました。
更にWordPressプラグインの「Super Page Cache for Cloudflare」というプラグインを使っているサイトは、CloudFlare経由ですが「x-wp-cf-super-cache」という専用のステータスが付与されていました。
うちのサイトはLiteSpeedサーバーなので「X-Litespeed-Cache:」です。
キャッシュステータスの名前も千差万別みたいなので、自分のサーバーでは何というステータスがキャッシュの有無なのかも知る必要がありそうですね。
まとめ
長くなったので最後に記事のポイントをまとめます。伝えたかった内容は以下。
ポイント
- キャッシュの有無やhitの有無はブラウザで調べられる
- キャッシュステータスを載せない設定のサーバーもある（特に共有サーバー）
- nginxサーバーはnginx.confにコードを書いて「X-Cache」を出力する
- nginxの共有サーバーでキャッシュを確認する方法はない？コマンドもダメ？
最後になりましたが、当サイトのようにLiteSpeedを使っているサーバーの場合は、以下のようなサイト様でも簡単にキャッシュヒットの確認ができます。
外部リンク
LiteSpeedサーバーなら上記のサイト様にアクセスし、キャッシュの有無を調べたいページのURLを入力して「CHECK」ボタンを押すだけです。
調べ方は記事の冒頭で紹介したブラウザを使った方法と同じで、ページのレスポンスヘッダーを見ているだけですかね？
nginxサーバーに関しても調べると同じようなキャッシュチェックサイトが出てきましたが、共有サーバーでX-Cacheの出力設定ができないので調べられませんでした。
nginxサーバーでもキャッシュあり・なしだけでも判定してくれるサイトがあればよいのですがね。そもそもキャッシュステータスが出力されてないから無理か…。
おわりに
シェルコマンドを使えば何とか調べられる？と思ったのですが、僕はメインサーバーがLiteSpeedなのでそこまで調べませんでした…nginxの共有サーバーでもキャッシュの有無を調べられる良い方法があれば教えて下さーい！
Copyright © 2024 ソロ学 All Rights Reserved.