サイト更新時、キャッシュを読み込ませず最新の内容を反映させる方法【HTML】

サイト更新時、キャッシュが読み込まれず最新の内容を反映させる方法

便利ですよねー、キャッシュ。(解決方法をサクッと知りたい方はコチラ

キャッシュについて
サイト訪問時、サイトのデータをブラウザ側で一時的に保存。再訪問した際、ブラウザに保存されたデータが読み込まれる為、通常より表示速度が速くなる仕組みのこと。

ただ、作り手側からすると、ちょっと面倒な機能でもあります。

制作会社に勤めている方であれば、クライアントから一度は”下記の様な指摘”を受けたことがあるんじゃないでしょうか…

ぼくは、自社運営の会社に勤めている為、クライアントから指摘を受けることはありませんが、たまに「あれっ!?反映されてない..」と焦ることはあります。

特にキャンペーン対応など金銭が絡む案件の時。

同じ名前のJS・CSS・画像データを使い続ける限り、キャッシュのデータが優先されて読み込まれてしまう為、サイトのヘビーユーザー程、古い情報が表示される可能性が高くなる訳です。

まぁ、スーパーリロード(Ctrl + F5)するかキャッシュをクリアにすれば、解決する話なんですが、クライアントならまだしも、サイトを訪れたユーザーにそれを伝えることは基本できません。

じゃあ、コッチ側で何とかするしかないよね。

…というのが、この記事で伝えたいことです。

キャッシュを読み込ませず最新の内容を反映させる方法は?

拡張子の後ろに「?(半角のはてな)」と「半角の英数字(更新日とか)」を入れましょう。それで解決です。

画像
<img src=”img/sample.png?date=180617” alt=”○○キャンペーン”>
CSS
<link href=”css/sample.css?date=180617” rel=”stylesheet”>
JS
<script src=”js/sample.js?date=180617“></script>

画像の差し替え、CSSやJSデータの修正がある度、「?(半角のはてな)」の後ろの日付を変えるだけで、違う画像・データと認識され、キャッシュが読み込まれることはありません。

よって、更新された最新の情報をユーザーに提供できるという訳です。

ぼく
大事なのは「?(半角のはてな)」です。

ぼく
「?」以降に関しては、半角の英数字であれば、何を入力しても問題ありません。

こんなんでもあり
<img src=”img/sample.png?abcd123” alt=”○○キャンペーン”>

ただ、意味のない文字をあてがうと、なんのこっちゃ分からなくなるので、先に示した通り「?」以降は「更新日」を入力するのがオススメです。

そんな感じで。終わりッ!!

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください