その手があった！ウェブサイトのブラウザキャッシュを削除する最も簡単な方法

あなたがWeb制作に携わっているのであれば、一度はブラウザのキャッシュに悩まされたことがあると思います。

例えばこんなシーン。

これは、7割ぐらいブラウザキャッシュが原因で起こることです。残りはサーバ側のFast CGIキャッシュなど、様々な要因が考えられます。こちらの記事では、そんなブラウザキャッシュをものすごく簡単に削除する方法をご紹介します。

ブラウザキャッシュとは？

まず、キャッシュとは何かをご紹介します。

訪問した “ ウェブページの情報 ” を一時的に保存する仕組み（またはその一時的なデータそのもの）のことで、よく訪問するページの表示スピードが上がるというメリットがある。ページを表示する際には、そのページのデータをダウンロードする必要があるが、画像やテキスト情報など、キャッシュという一時的な保存データがスマホやPC内にあることで、再表示のスピードが上がるというわけだ。

https://time-space.kddi.com/ict-keywords/20191210/2798

ウェブページの情報を一時的に保存して、ページの表示速度を早くしてくれる仕組みがキャッシュです。実はこのたいしょんブログも、このキャッシュを使用してページの高速化を図っています。

このキャッシュですが、先程のやりとりの内容と関わってきます。制作側がページを更新したにも関わらず、クライアント側で見るとレイアウトが崩れていると言われていましたね。

実は、HTMLという骨組みは更新されていても、CSS（デザインの設定に関わるファイル）とJavaScript（プログラムでアニメーションをつけたりする言語）はキャッシュされたままのことが多いんです。なぜかと言うと、この2つのファイルはまともに読み込むとページの読み込みが重くなるという懸念があるからです。

現在は非同期通信の技術や、CSSファイルやJavaScriptファイルを圧縮して工夫することもできるのですが、Google Chromeを始めとするブラウザはキャッシュをしやすくなっています。

キャッシュを消す最も簡単な方法は適当なURLパラメータをつけてあげる方法

では、キャッシュを削除する最も簡単な方法をご紹介します。それは、適当なURLパラメータをつけてあげる方法です。

では、例をご紹介しましょう。下記のアドレスにアクセスしてみてください。

https://taishon.nagoya/?aaa

さて、表示は元のたいしょんブログのトップページと変わりましたでしょうか？恐らく全く同じページが表示されたと思います。

実は、全く同じページでもブラウザに全く別のページだと思い込ませる方法がこのURLパラメータをつける方法なんです。

ちなみにURLパラメータとは以下のようなものです。

URLパラメータとは､ サーバーに情報を送るためにURLに付け加える変数を指します｡クエッションマーク「?」をURLの末尾に付けることで、「変数（パラメータ）＝値」の形式でサーバーに送信するデータをURLに含めることができます。

https://www.seohacks.net/basic/terms/what-is-urlparameters/

もしページのデザインが変わらないとクライアントさんから指摘されたら、URLパラメータつきのURLを送ってあげるようにしましょうね。

この方法のメリット

まず、どのブラウザでも同一の方法でキャッシュクリアが可能になるという点です。

ブラウザごとにキャッシュの削除方法がことなるため、通常の方法では手間がかかりそうですが、URLパラメータを使用する方法はどの環境でも再現でき、同一の方法でキャッシュを消せるのでお手軽です。

また、相手に共有する時点でキャッシュが削除された状態でURLを共有できることもメリットです。相手がキャッシュを削除する方法を知らなかったとしても、URLパラメータを付与したURLを共有すれば解決しますね。

この方法のデメリット

すでにURLパラメータを付与する前提のページでは使用できません。例えばCMSによっては「?page=2」のように2ページ目のURLを表現する場合もありますが、こちらの場合はすでにURLパラメータが設定されているので今回の方法は使えません。

ただし、「?page=2&aaa」のようにすればURLパラメータの条件を追加できるので、場合によっては回避できそうです。

シークレットウィンドウを使う方法

上記の方法が最も簡単な方法ですが、次点で簡単な方法がシークレットウィンドウを開く方法です。Chromeではシークレットウィンドウですが、同じような機能はどのブラウザにも搭載されています。

Chromeの場合は点のボタンをクリックして、「新しいシークレットウィンドウ」をクリックしてください。

ここで開かれたウィンドウでURLを入力して開けば、キャッシュがない状態でウェブページを開くことができます。

ただし、クライアントの方にこの方法をわざわざ説明する手間も出てきますので、URLパラメータをつけたリンクを共有してあげたほうが親切ですね。