キャッシュの消し方。変更確認WEBデザイン編 | 福岡のホームページ制作はマリオ君にお任せ

本日はウェブサイトのキャッシュの消し方（変更確認Webデザイン編）ということで、クライアント様に変更の確認をしてもらうときに、変更はすべて行っているのに

「指示した画像変わってないよ。」
「ちゃんと変更してから連絡して。」

などの問題を解決する方法を書かしていただきます。

キャッシュって何？

キャッシュとはウェブサイトの表示速度を早くしてくれる気の利いたやつです。

表示速度が速くなる理由は、一度見たサイトなどを記憶して、次に訪れた際に早く見てもらえるよう全てのデータを再読み込みするのではなく、重たい部分は前回のデータを引っ張り出して表示速度を上げてくれるイメージです。

もしキャッシュがなければ、サイトを見るたびに新規にすべて読み込むので表示速度が遅くなってしまいます。
※ちょっと違うかもしれません・・・

キャッシュのメリット

先ほども書きましたが、メリットは表示速度を早くしてくれる気の利いたやつです。

居酒屋さんに例えると常連客が来店したら注文を取る前にいつも頼んでいる商品を提供する気の利いたスタッフさんの感じです。
常連客も頼む手間が省けますし、すぐに目的にたどり着くことができハッピーですね。

ホームぺージも表示速度が速いと目的にすぐたどり着きますし、サイトが開くのが遅いと見るのをやめてしますこともありますね。

それを解消してくれるのがキャッシュです。

キャッシュのデメリット

メリットとデメリットは表裏一体のことが多いです。キャッシュのデメリットとしては、気が利きすぎるということです。早く表示させるために、最新のデータでないものを表示することがあります。

それが、冒頭に書かせていただいた、修正しているのに、お客様に変更できてないよって言われる原因です。

一度見たサイトなどを記憶して、次に訪れた際に早く見てもらえるよう全てのデータを再読み込みするのではなく、重たい部分は前回のデータを引っ張り出して表示速度を上げてくれる、これが逆に変更などが反映されない原因になることがあるということです。

テキストの変更は問題ないですが、画像（img）やCSS（style.css)などは変更が反映されないことが多々あります。

キャッシュが反映されない時の解決方法

キャッシュのせいで（言葉が悪いですね。キャッシュとの兼ね合いで）、変更しているのに変更が確認できない場合の解決方法は、大きく3つあります。

• パラメーターをつける
• ファイル名をそもそも変える
• スーパーリロード

一番のおすすめ！ファイル名にパラメーターをつける

一番のおすすめはファイル名にパラメーターをつけるです。
画像を変更した場合は画像のタグに

<img src="img/mariokun.jpg" alt="マリオ君画像">

下記の感じで拡張子の後に？＋任意の英数字をいれることで解決されます。

<img src="img/mariokun.jpg?20230801" alt="マリオ君画像">

上記は日付を入れました。何でもいいですが、少し管理しやすいよう日付などの数字がおすすめです。

CSSの場合も同じで拡張子.cssの後に？＋任意の英数字でOKです

<link href="css/style.css?0123" rel="stylesheet" type="text/css">

これを、するだけで、もうお客様から変更できてないよって言われることはなくなります。

パラメータを入れるだけで更新完了

ファイル名をそもそも変える

ファイル名をそもそも変えるのもひとつのやり方です。

<img src="img/mariokun.jpg" alt="マリオ君画像">

などを

<img src="img/mariokun02.jpg" alt="マリオ君画像">

こちらも簡単ですね。

しかし、こちらの場合ですと画像ファイルがたくさん増えますし、ファイル名を変えてしますと管理が難しくなる場合もあります。

やはり、基本はパラメーターを追加するのがおすすめですね。

スーパーリロード

スーパーリロードという機能がブラウザにはあり、ただの更新ではなく、もう一回全部読み込ませる機能となります。こちらをすることでも、キャッシュを無効にすることができます。

ざっくりの説明になりますがパソコンでは

windowsなら
コントロールボタン＋F5

macなら
コマンドボタン＋シフトボタン＋R
もしくは
シフトボタン＋ブラウザの更新ボタンをクリック

でほとんどどのブラウザでスーパーリロードします。

結構簡単ですね。しかし、これをお客様にやってくださいっていうのもなんか違いますね。

しかも、スマホの場合はスーパーリロードがないので、設定画面から入ってweb履歴の削除などをしなけらばなりません。

そんな手間をかけてもらうのもちょっとねって感じですね。

また、上記をお客さまにやっていただいて解決したとしても、公開中のサイトの場合は、見ているエンドユーザー様にも結局キャッシュが残っている可能性があるので、何の解決にもなっていませんね。


自分で確認したり、一時的にお客様に確認してもらうのにはいいかと思います。

スーパーリロードは根本的な解決にならないこともある。

最後にキャッシュさんごめんね

上記で述べたように、キャッシュが利いているため、変更を確認してもらうことができず、お客様から

「指示したところ変更されてないよ」

ていわれるのは、webデザイナーあるあるだと思いますが、

たぶんですけど、

お客様:「指示したところ変更されてないよ」
webデザイナー：「変更したんですけど、キャッシュのせいですね。キャッシュクリアしときます」
（そもそもパラメーターをいれ忘れているけど）

ていいながら、確認したら、そもそも変更してなかったこと。

こちらもあるあるですよね？？

てことでキャッシュさんごめんなさい。
変更忘れをあなたのせいにしてしまっている自分がいます。ごめんなさい。


以上になります。
いかがでしたでしょうか。ウェブサイトのキャッシュの消し方（変更確認Webデザイン編）ということでご紹介させていただきました。

それではまた。