ホームページを更新したのにクライアント側から「変わってませんけど」という連絡がくるのは、ホームページ制作会社で勤務している人にとってあるあるの話です。

この場合の原因となるのが、99パーセント『ブラウザキャッシュ』と呼ばれるものが原因です。
今回は『ブラウザキャッシュ』についてのご紹介と、WordPressで制作されたブログやホームページでブラウザキャッシュを残さない方法をご紹介します。

スポンサーリンク




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

まず、『ブラウザキャッシュ』とはどのようなものなのでしょうか？
簡単に説明すると、ブラウザキャッシュとは一時的にホームページの表示をブラウザが覚えておいてくれる機能です。

どういうことかというとChromeやFirefoxなどの各ブラウザは、毎回アクセスした時に最新の状態のデータをサーバーからダウンロードしているわけではありません。
サイトの情報をいち早く表示させようと、以前アクセスしたときの状態を憶えており、その状態を表示させようとします。
その以前アクセスした状態のことをキャッシュと呼ばれるもので、日本語で表すと「過去の閲覧履歴」といったところでしょうか。

ブラウザキャッシュをクリアするには

このブラウザブラウザのキャッシュをクリアするためには、閲覧しているブラウザ上で、リロードと呼ばれる以下の操作をキーボード上で行うことでキャッシュをクリアすることが可能です。

  • Windowsの場合：「F5」ボタンを押す
  • Macの場合「command」ボタンを押しながら「R」ボタンを押す

また、かなり多くのキャッシュが存在する時に、上記の方法でも最新の状態が表示されない場合がたまにあります。その場合は、スーパーキャッシュクリアと呼ばれる以下の方法で最新の状態を表示させることが可能です。

  • Windowsの場合：「Ctrl」ボタンを押しながら「F5」ボタンを押す
  • Macの場合「command」と「shift」を押しながら「R」ボタンを押す

ブラウザキャッシュの影響で不毛なやりとり展開される

少し話が冒頭の内容に戻りますが、このブラウザキャッシュと呼ばれるものの影響で、ホームページ制作会社側とクライアント側で表示の違いが起き、以下の会話が毎日のように展開されます。

「ホームページ修正したのご確認お願いします」
「ぜんぜん変わってないですよ？」
「恐らくキャッシュの影響なので、「F5」ボタンを何度か押してみてください」
「あ、変わりました！」

このやりとりって正直不毛だなぁと常々思っていました。制作会社側としては、毎回言ってるんだから覚えてくれよとストレスMAXになりますし、クライアント側にしても、変わってないことでイライラします。

そんなことならいっそのこと、『ブラウザキャッシュを残さない設定』にしちゃえということで、WordPressで制作したサイトでブラウザキャッシュを残さない設定方法をご紹介します。

.htaccessへコード追加しキャッシュを残さない方法

WordPressで制作されたサイトの場合には、.htaccessファイルにコードを追加してキャッシュを残さない方法があります。
※.htaccessファイルはWordPressにとって非常に重要なファイルです。変更する際には必ずバックアップを取得しておきましょう！

.htaccessファイルをダウンロードしたら、ファイルを開き以下のコードを追加して再度アップロードします。

<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

この方法で、ほぼ全てのキャッシュが残らないようになります。
ただし、この方法はあくまでキャッシュを残さない方法です。今までのキャッシュをクリアするものではありませんので、設定前のキャッシュがクリアされるまでは、古い表示がされる場合があります。

コードについての解説

ここで上記でご紹介した.htaccessファイルへのコードの解説をご紹介します。
まず、コードの2行目と3行目はキャッシュさせないでという意味のコードになります。

注目してほしいのが1行目の部分です。１行目では、どのファイルに対してキャッシュをさせないかの命令を出してる部分になり、上記で紹介したコードの場合は、html,php,jpeg,jpg,gif,png,css,js,pdfの各データに対してキャッシュをさせないという指定をしています。

つまり各データに対してキャッシュをさせないように設定を変更することができます。
例えば、キャッシュが残るのは主に画像系やPDFデータなので、画像系とPDFだけキャッシュをさせないようにしたい場合には、以下のようなコードを追記することになります。

<Files ~ "\.(jpe?g|gif|png|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

まとめ

いかがでしたでしょうか？
今回はブラウザキャッシュとは何か？またWordPressで制作されたサイトのキャッシュを残さない方法をご紹介しました。

コードをコピペするだけで簡単に更新された最新の状態を表示してくれるだけでなく、クライアントとの不毛な時間のやりとりが軽減されるため、非常にオススメです。
ぜひ一度実装してみてはいかがでしょうか。
最後までお読みいただきありがとうございました。

スポンサーリンク