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

CSSを更新してもキャッシュで反映されない?
(YouTube, AdSense, Play 公認エキスパート)
2021年03月09日 in Wordpress
記事内にPR・広告が含まれる場合があります

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。