ゴロゴロ日和

WEB業界未経験だった新入社員が独立を目指しつつWEB業界を目指す人へ経験したこと、アドバイスなど書いていきます。

もうキャッシュに悩まされない!キャッシュを残さない方法

ページを作成していてキャッシュが残ってしまっていて困った経験はありませんか?

キャッシュとは、使用頻度の高いデータを記憶しておいて、次回アクセスした際に読み込む時間を短くする機能です。

多くのサイトでページ表示速度が遅いと、読み込み中に読者が離脱してしまいます。

そこで製作者は表示速度を早めるために、ソースの簡略化やブラッシュアップに躍起なっています。

 

ブログやHPを作成する場合、基本的にキャッシュを残さないように設定なんてしません。

サイトにアクセスするたびにページの表示速度が遅いと、半数の人がページを閲覧する前に離脱してしましますからね。

ただキャッシュが残っていると不都合な場合があります。

例えばPHPでフォームを作成し、ブラウザバック(前のページに戻る)するとフォームに入力した値を消去しておきたいときなどです。

若干専門的(?)なパターンを出しましたが、それ以外でもキャッシュが不必要なケースがありますので、そんな時は下記のやり方でキャッシュを残さないように設定しちゃいましょう!

 

metaタグを使ってキャッシュを残さない!

head内のmetaタグでキャッシュを残さないように設定できます。

そのmetaタグが以下の通りです。

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

上の二行がキャッシュを残さないようにする記述です。

この3行をheadタグ内の任意の行に埋め込みます。

 

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

 

どちらも赤字部分がキャッシュの扱いを決めますよ〜。

という記述になります。

この二行の違いはHTTPプロトコルの話になるのでここでは割愛します。

簡単に、バージョンの違うHTTPプロトコルに対応するためなんだなーと覚えておいてください。

そしてその二行のcontent属性(青字部分)がキャッシュするな!

という意味になります。

 

content="no-cache"とcontent="no-store"

no-cache と no-store は厳密には違います。

 

no-cache・・・キャッシュするが、キャッシュが有効か確認してしようする

no-store・・・キャッシュしない

 

そこまでこだわる必要はありませんが、基本的にはno-storeで問題ないです。

 

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

最後の一文はキャッシュの有効期限を設定するmetaタグです。

青字の値は秒数か指定した日時が入ります。

日時の指定はグリニッジ標準時になり、過去の日時を指定することも可能です。

過去の日時を指定した場合は、キャッシュをしないということになります。

content="0"と過去の日時を指定するのは、キャッシュをしないという意味で同じです。