iscle [イズクル] - あなたの生活に役立つネタを!

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

竹中文人
執筆者:
[最終更新日]2016/11/21
[カテゴリ]Wordpress

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 を頻繁に更新するサイトや、すぐに新しい内容を反映させたい時にとても便利な方法です。