CSSを更新してもキャッシュで反映されない？更新内容を確実に反映させる方法

ブログなど web サイトを公開している方であれば、一度は「ファイルを更新しても反映されない」という経験があるのではないでしょうか。特に CSS や JavaScript を更新しても、全く反映されずに困ってしまうというケースが多々あります。たいていの場合はブラウザのキャッシュが影響しているため、キャッシュを削除するかF5キーや更新ボタンを押せばページがリロードされ、新しいファイル内容が反映・表示されるでしょう。

しかし、サイトにアクセスしてくれた方がキャッシュ削除やリロードをしてくれるとは限りません。だからと言って、全くキャッシュさせないようにするというのは表示スピードの観点からも現実的ではありません。

ではキャッシュを有効にしつつも、CSS や JavaScript を更新した時にはすぐに新しいものが反映・表示される方法はないのでしょうか？実は簡単にそれを実現する方法があります。

URL 末尾にタイムスタンプを付ける

通常は CSS や JavaScript を読み込む際、下記のように記述されているでしょう。この場合［style.css］のキャッシュがブラウザに保存されるため［style.css］の内容を変更しても、キャッシュされた“古い内容”が反映されてしまいます。

<link rel="stylesheet" type="text/css" href="http://example.com/css/style.css">

でも下記のように記述しておけば解決できます。

<link rel="stylesheet" type="text/css" href="http://example.com/css/style.css?20161101">

［style.css］の末尾に［?］+数字等を記載するだけ！例えばファイル内容を更新した日付・時間等のタイムスタンプを［?20161101］のように付けておくのです。末尾が変われば新しいファイルとして扱われるため、キャッシュされた古い内容が反映されなくなります。

ただ HTML や PHP のファイルに手動でタイムスタンプを付けるのは面倒です。もし WordPress であれば下記のように CSS や JavaScript のコードを変更することで、自動で最新のタイムスタンプが URL 末尾に付くようになります。

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

上記のように設定しておけば、わざわざ「更新ボタンを押してください」とか「キャッシュを削除してください」なんて言わなくても良くなりますね。CSS や JavaScript を頻繁に更新するサイトや、すぐに新しい内容を反映させたい時にとても便利な方法です。