更新したはずなのに表示されない！？ウェブブラウザのキャッシュ色々

Web制作をしていると、画像やHTMLを更新したのに表示されない！ もしくは、Web制作を発注していて、更新しました！と来たのに変更されていない・・・なんてことありますよね。 もしかしたらキャッシュが原因かもしれません！ 今回はブラウザのキャッシュについて代表的なものをお伝えできればと思います。 ※主にここで言うキャッシュとは、ネットワークや、サーバの負荷や表示速度高速化のために用いられている データを一時的になんらかの方法で保存をしておき、高速に表示する仕組み。 と、すごーくざっくり考えていただければと思います。

疑うべきキャッシュの原因

• ウェブブラウザによるキャッシュ
• アプリケーションによるキャッシュ（例えばWordpressのプラグインなどによる）
• コンテンツ配信サーバによるキャッシュ
• ウェブサーバ側のキャッシュ

などが代表的な部類かと思います。 それぞれ説明していきます！

ウェブブラウザによるキャッシュ

まず、よくあるのがこちらです。 ウェブブラウザ側でデータがキャッシュされている場合です。 一定期間がすぎればキャッシュが自動的にクリアされます。 が、確認しないといけませんので、いくつか方法を紹介しておきます。

Chromeのキャッシュクリア方法

Windows OS： Shift + Ctrl + Rキー macOS： Shift + Command + Rキー もしくは、デベロッパツールを開いている状態で、Chromeの更新マークを長押しでも可能。

Edge

Ctrl + F5

Safari

Shiftを押下しながら更新ボタン Ctrl + Shift + R

IE11

Ctrl + F5

アプリケーションによるキャッシュ（例えばWordpressのプラグインなどによる）

代表的な例とすれば、Wordpressを利用している場合に、例えば「WP Super Cache」プラグインなどを利用していた場合です。 こういった場合には、ブラウザ側で一生懸命キャッシュクリアをしても更新されません。 また、独自のプログラムや、その他のCMSなどを利用している場合でも起こり得るため、 プログラムを用いて表示している場合などは、一度疑ってみると良いかもしれません。

コンテンツ配信サーバによるキャッシュ

昨今増えているのがこのパターンです。 画像やCSS、HTMLなどを高速に配信する仕組みとしてCDN（コンテンツデリバリネットワーク）という仕組みを用いいている場合です。 AWS Cloud Frontや、Cloudflareなどを用いている場合です。 一見非常にわかりにくいため、大ハマリすると更新されないがために１日を潰してしまうことも・・・。 やや特殊ですが、サーバからのレスポンスヘッダを確認することで判断が可能です。 例えば、CloudFrontの場合

下記のようなヘッダが含まれているか否かで判断可能です。

x-cache: Hit from cloudfront

サーバ側のキャッシュ

こちらも似たようなものですが、余計に厄介です。 コンテンツを配信しているサーバ側でのキャッシュの場合です。 ↑の方法でも改善されない場合には、ApacheやNginxその他の可能性を疑うのが良いかもしれません。

上記でも改善されなければ・・・。

大概のキャッシュはURLを元にキャッシュを出しわけしていることが多いので、 URLのお尻にクエリを付与することでキャッシュがクリアされた状態になることがあります。 例えば、

https://blog.maromaro.co.jp/hogehoge.html

を

https://blog.maromaro.co.jp/hogehoge.html?nanikatekitouni

「nanikatekitouni」のところは日付でもなんでもOKです。 などとするとキャッシュクリアされる場合があります。 ただし、画像などの場合にも有効ではあるのですが、 個別に付与する必要があり、HTML側で同様にクエリを付与する必要があります 例えば、下記のようなタグがあったとして・・・

<img src="https://blog.maromaro.co.jp/hogehoge.png" />

↓下記のようにすることでも改善できます。

<img src="https://blog.maromaro.co.jp/hogehoge.png?nanikatekitouni"/>