WEBサイトのブラウザキャッシュを読み込ませない様にする方法

ブラウザキャッシュは表示速度を上げて負担を少なくできるので大変便利な機能ですが、更新した状態がすぐに確認できないデメリットがあります。

ブラウザキャッシュの影響を受けない様にするには、metaタグをheadに挿入する、.htaccessに記述する、レンタルサーバーの機能を使う方法があります。

特にno-cacheの命令は、変更されていない箇所はキャッシュを読込し、変更が合った箇所は新規に読み込むので有能と言えます。

ブラウザキャッシュのメリット・デメリット

ブラウザキャッシュは一度表示させたWEBサイトを次回素早く表示するために、画像やCSS等の情報をブラウザに保存しておくものです。

毎回一から情報を読み込まなくて済むため、2回目以降はWEBサイトがすぐに表示されて便利な訳ですね。

負担が少なくなり表示も早くなるのが、キャッシュの最大の利点です。

キャッシュのデメリット

しかしこのブラウザキャッシュ機能には1つだけ厄介なデメリットがあります。

それは、WEBサイトの更新情報（最新情報）を即座に見る妨げになる事です。

ブラウザキャッシュがあるために、サイトの修正内容をすぐに見る事ができないのです。

本記事では、キャッシュの影響を受けずに修正内容をすぐに反映させる方法について紹介します。

キャッシュがWEBサイト更新の邪魔をする

この問題は、クライアントとWEBサイトの修正を確認する際に頻繁に起こります。

一回更新しただけで終われば問題にはならないのですが、そう簡単にはいきません。

画像の入替はもちろん、文字の大きさや位置の微調整など、同じ個所を何度も修正する事が多々あります。

ブラウザの更新操作

この時私はいつもの「癖」で、更新直後にブラウザ情報を強制的に刷新するため、以下のキーを押します。

これでブラウザのキャッシュが一新され、最新情報のWEBページになってくれます。

Shift+F5は常識

本来はファンクションキーのF5だけでも良いのですが、画像の差し替えやCSSファイルの更新などはHTMLソースに違いが出ません。

そのためF5単体では反映されない場合があるのです。

ですので私は常にShiftキーとF5番をセットで押すようにしています。

WEBサイトに携わる者であれば、情報をすぐに確認できる一番簡単な方法として熟知しているはずです。

クライアントに操作を強いるのは厳しい

慣れている人ならこの操作が普通なのですが、クライアントさんはそうはいきません。

F5を押す事はあっても、毎回Shift＋F5を押す人はそういないのです。

まだまだ知られていない操作だという事でしょう。

ミスと勘違いされる事も

何度も何度も同じページを更新していると、自分と相手の見ているページに「差」が生まれる事があります。

それは相手がShift＋F5を押してブラウザキャッシュを更新していないためです。

一番まずいのは、これが「こちら側の修正漏れ」と勘違いされる事ですね。

本当は修正済みなのに「忘れている」と相手に思われるのは、良い事ではありませんよね。

だからと言って「最新情報では無いので、Shift＋F5を押して下さい」と毎回言うのも心苦しい訳です。

スマホでの確認は特に影響あり

PCはともかく、特にスマホは端末の特性上キャッシュが残りやすくなっています。

特に同じページの修正を重ねた場合、それがすぐにスマホページに反映される事はありません。

キャッシュが更新されるまで待つ必要があります。

そして何より、スマホにはShift＋F5の強制更新の機能がありません。

そのため毎回きちんと反映されるまで、時間を空けてもらう必要があるのです。

キャッシュを読まない様にする

一番の解決方法は、一時的にブラウザキャッシュを読み込まない様に設定する事です。

そうする事で毎回、初めてWEBサイトを表示させる感覚で読込がされます。

もちろんWEBサイトの表示に若干時間が掛かる場合があり、ユーザーに対してあまり良くはありません。

しかし今回は「WEBサイトの更新時」に限った一時的な対応ですので、積極的にやってみるべきと言えます。

ではここから、ブラウザキャッシュを読み込まずに直接リソースを読み込む3つの方法についてご紹介します。

headタグに埋め込む方法

まず一つ目はHTMLのhead部分にタグを挿入する方法です。

これはHTMLサイトWordpressサイトのいずれでも設置する事ができますし、簡単ですよね。

タグが設置されているページのみ、この効果対象になります。

修正更新が終わったら、このタグ部分を削除すればよいのです。

headタグ内記述

metaタグの挿入

<meta http-equiv="Cache-Control" content="no-store">

上記を埋め込んでおけば、PCからの表示リクエスト・サーバーからの応答に関して、キャッシュに何も保存されません。

リクエストするごとに毎回最新のリソースをダウンロードする様になります。

設定できるタグの種類

他にもキャッシュの内容を確認して判断したり、一定時間でキャッシュが削除される命令を掛ける事もできます。

headタグで設定できるタグを簡単に表にまとめています。

<meta http-equiv="Cache-Control" content="no-store"> <meta http-equiv="Pragma" content="no-store"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="86400">

no-cache

no-cacheは、コンテンツに変更がある場合は最新の情報を読み込みます。

さらにコンテンツ変更がない場合はブラウザキャッシュから読み込むという指定ですので、大変便利です。

秒数で指定する場合は、content内に何秒後にキャッシュを削除するか指定します。

.htaccessで制御する方法

次は.htacessファイルに記述してコントロールする方法です。

この効果は先程のタグ設置をしたページだけでなく、WEBサイト全体に及びます。

.htaccessファイルの記述

例えば、html,php,jpeg,jpg,gif,png,pdf,cssのファイルをキャッシュさせたくない場合があるとします。

その場合の記述は、以下の様になります。

記述例

<Files ~ "\.(html|php|jpe?g|gif|png|pdf|css)$"> Header set Pragma no-cache Header set Cache-Control no-cache </Files>

上記を記述したhtaccessをサーバーTOPにUPする事で有効になります（ファイルの扱いには気をつけましょう）。

記述内にあるno-cacheは、先程の表内にあったものと同じ役割です。

更新作業が済んだらこの部分だけ削除すればOKです。

サーバーのコントロールパネルで設定する

実はレンタルサーバーの中には、管理画面からキャッシュ操作ができるサーバーがあります。

この機能はレンタルサーバーごとに「ある・なし」がありますので、現在利用中のサーバーを調べてみて下さい。

今回はエックスサーバーを紹介します。

エックスサーバーのブラウザキャッシュ設定

エックスサーバーには、キャッシュを無効にする機能があります。

サーバーパネル「高速化」の欄にある「ブラウザキャッシュ設定」です。

開いたらまずはドメインを選択しましょう。

ブラウザキャッシュをOFFにする

ここからブラウザ側でのキャッシュ利用を指示するレスポンスヘッダ（Expires, Cache-Controlヘッダ）の出力を操作できます。

つまりここまでHTMLのheadタグや.htaccessに対して設定していたものが、管理画面上から実行できる訳です。

ここを「OFF」にしておく事で、ブラウザキャッシュが一切利用されないため、常に生のリソースを読み込む事になります。

更新が終わったらここをONにしておけば、ブラウザキャッシュが有効になり表示速度が上がります。

.htaccessと両方設定しないこと

この設定を利用する場合、一つ前に紹介したhtaccessの設定は消しておきましょう。

両方同じ設定の扱いになるので、バッティングしない様に注意して下さい。

今回紹介した3つのうち、どれか一つのみ選択して設定する様にしましょう。

一押し人気コーナー紹介