ushiyaDevLog

iPhoneとかMacとか、家電とか、筋トレとか、なんか色々になりました

サイトでブラウザのキャッシュを無効にするとか期限をつける方法とか

   

ブラウザキャッシュは、ユーザー側にとっては表示速度の向上という良い面がありますが、更新が反映されないという問題も存在します。

たまにしか表示しないサイトであれば、更新が反映されないということは少ないと思いますが、結構な頻度で閲覧するサイトの場合は更新が反映されないことがあります。

キャッシュがあるととても困る時

お客様よりサイトの更新を頼まれた時です。サイトの更新をしてお客様に確認をしてもらう際に更新が反映されないのです。この問題に初めて出くわしたときは悩みました。原因を知ると簡単な事だったのですけどね。

また、一般的にはブラウザキャッシュとは何ぞや?という方も多いようで、その説明をする必要もありました。

ということで無効にします

ブラウザがキャッシュ持つことを無効にすればこの問題はなくなります。それではその方法です。

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

これらを<head>に追加することにより、ブラウザがキャッシュからの読み込みをしなくなります。

画像が少ないなどコンテンツの少ないページならブラウザキャシュがなくてもユーザー側には問題ないと思いますが、1ページに大量の情報がある場合は毎回読み込みに時間がかかるといった問題が出てきますね。

期限付きキャッシュ

更新頻度の少ないサイトやコンテンツの多いサイトの場合は、こちらの方法が良いですよ。

<meta http-equiv="Expires" content="0">

上の行の青い部分で期限を日時(GMT)秒数で指定します。参照元

2014年5月1日午前0時0分を指定する場合は、

<meta http-equiv="Expires" content="Thi, 1 May 2014 00:00:00 GMT">

5時間後(18000秒後)を指定する場合は、

<meta http-equiv="Expires" content="18000">

となります。

これで指定された期限内はブラウザはキャッシュされたデータを使用します。0を指定するとキャッシュが無効になります。

忘れがちなCSS

上で紹介したのはhtmlファイルの読み込みに対してのみで、これだけではCSSの更新には対応できません。せっかくブラウザキャッシュを無効にしていても、CSSはキャッシュされたものが読み込まれるので、更新は適用されません。

その場合はスタイルシートを指定する際に、青い部分を追加します。

<link rel="Stylesheet" href="style3.css?ver=20140401" type="text/css">

?◯◯◯=△△△の形式であれば、任意の文字列を使用できます。
参照元

ブラウザにキャッシュされるのが嫌な場合は是非お試しください。

 - Other , ,