「Webサイトの表示を高速化」する一環として、.htaccessやサーバー側の設定で画像やCSSファイルなどにキャッシュを設定している方もいらっしゃると思います。

キャッシュの「有効期限」について

キャッシュを設定する際には、あわせて「有効期限」も設定することがあります。

例えば・・・

私のこのブログのロゴマークはsvgファイルで「logo.svg」というファイルなのですが、キャッシュの有効期限は1日に設定しています。

ロゴマークはめったに変えないので、キャッシュの有効期限をもっと延ばしてもいいかもしれませんね～。

といった具合でキャッシュの有効期限を調べることで、

• 画像ファイルはもっとキャッシュの有効期限を長くしてもいいんじゃないかな
• CSSファイルは最近サイトのリニューアルで頻繁に変えるんだよな。それに合わせてキャッシュの有効期限を変えよっか～

など、検討する手段の一つにもなります。

さっそくキャッシュの有効期限を調べてみよう

キャッシュの有効期限を調べる方法はいくつかありますが、今回はGoogle Chromeで手っ取り早く調べる方法を書きましたので、興味がありましたらご参考ください。

※この方法はデスクトップやノートPCで行います。

調べたいページを開こう

まずは調べたいページをGoogle Chromeで開きます。今回は例として私のブログのトップページ「https://www.imamura.biz/blog/」で試してみます。

右上にメニューボタンがあるので押しましょう。

メニューボタンを押して「その他のツール」→「デベロッパーツール」を開きます。

Windowsの場合は「Ctrl+Shift+I」（Macの場合は「command+option+I」）を押しても「デベロッパーツール」を開けますし、表示されているページ上で右クリックして「検証」を選択しても「デベロッパーツール」を開けます。

「デベロッパーツール」を開いてページを再度読み込み（リロード）しよう

「デベロッパーツール」を開くと、画面が左右に分割されます（上下に分割されたり、ウィンドウが2つ出る場合もあります）。下の画像の例では、右側に表示されているものが「デベロッパーツール」です。

この「デベロッパーツール」の「Network」を選択しましょう。「Network」の選択後は、ページを再度読み込み（リロード）してください。

読み込まれているファイルの一覧を表示しよう

下の画像の「Name」に注目してください。ページを再度読み込み（リロード）すると、このページで読み込まれるファイルがずらっと一覧で表示されます。

このファイルの一覧から、キャッシュの有効期限を調べたいファイルを選択します。

ファイルの「HTTPレスポンスヘッダー」を調べよう

例として、ロゴマーク「logo.svg」ファイルを選択します。

すると、さらに下の画像のように画面が分割されるので「Headers」を選んで「Response Headers」を見ます。

「HTTPレスポンスヘッダー」という言葉を聞いたことがある方もいらっしゃるかもしれません。この「Response Headers」がまさにその「HTTPレスポンスヘッダー」の箇所ですね。（「Response Headers」の英字でなんとなくわかりますね）

キャッシュの有効期限を調べよう

「HTTPレスポンスヘッダー」を見て、キャッシュの有効期限が設定されていれば「Cache-Control」という項目が見つかります。

今回の例では「logo.svg」ファイルのキャッシュの有効期限が設定されていることがわかります。

キャッシュの有効期限の例

Cache-Control:max-age=86400, public

「Chache-Control」に設定されている「max-age」の値が「86400（秒）」となっています。つまり、一日ですね。60（秒）×60（分）×24（時間）＝86400（秒）の計算です。（publicの説明は今回は省略してます）

という感じで、キャッシュの有効期限を調べることができます。

まとめ

慣れないうちは少し手間取るかもしれませんが、何度も調べる機会があると要領が掴めると思います。

• Webサイトの表示をもっと高速化させたいな。そうだ、キャッシュの設定を見直そう

という場合などには使える方法だと思いますので、機会がありましたらお試しください！