サイトを更新しても、更新内容がすぐに反映されないことがあります。
その原因は、ブラウザキャッシュが残ってしまっており、更新前の内容がサイトに反映されてしまっているためです。
今回は、サイトの更新、特にCSSの更新と同時にブラウザキャッシュも更新し、更新内容を即座に反映させる方法をご紹介します。
ブラウザキャッシュとは？
ブラウザキャッシュとは、一度アクセスしたサイトのデータを一時的に端末上のブラウザに保存しておく仕組みのことです。
ブラウザキャッシュとして保存されるデータには、HTMLデータ・CSSデータ・Javascriptデータといったサイトの内容や修飾に関わるデータや画像データなどがあります。
ブラウザキャッシュは通常デフォルトで有効化されています。
ブラウザキャッシュのメリット
ブラウザキャッシュを使用するメリットには以下のようなものがあります。
- サイトの読込み時間を短縮できる
- データ通信量を削減できる
サイトを読み込む際、サーバーからサイトのHTMLや画像などのデータを取得します。それらのデータを取得するとき、データの取得時間やデータの通信が発生します。
同じサイトを繰り返し閲覧する場合、毎回サーバーから同じデータを取得することになり、読込み時間やデータ通信量の観点で非効率になります。
ブラウザキャッシュの仕組みを使い、一度サーバーから取得したデータをブラウザに保存しておくことで、次にそのサイトを表示する場合はそのブラウザキャッシュのデータを使ってサイトを表示できるので、サーバーからデータを取得し直す必要がなくなります。
これにより読込み時間やデータ通信量、つまりは通信コストを節約できるのです。
ブラウザキャッシュのデメリット
一方、ブラウザキャッシュを使用することによるデメリットも存在します。
- デバイスの容量を圧迫する
- サイトの更新・修正がすぐに反映されない可能性がある
デバイスの容量を圧迫する
まず、「デバイスの容量を圧迫する」について説明します。
ブラウザキャッシュはPCやスマホといった端末の内部にデータとして保存されるため、溜めすぎると端末のストレージ容量を圧迫してブラウザの動作が遅くなってしまいます。
ブラウザキャッシュを溜めすぎてブラウザが重くなった場合は、キャッシュを削除（クリア）したり、キャッシュの保持期間を短めに設定したりなどすると良いでしょう。
サイトの更新・修正がすぐに反映されない可能性がある
次に、「サイトの更新・修正がすぐに反映されない可能性がある」についてです。
ブラウザキャッシュに保存されているデータは、「前回アクセスした際に保存したデータ」ですので、リアルタイムのサイトデータとの間に違いがある可能性があります。
つまり、サイト構築者の立場で考えると、せっかくサイトを更新したのにユーザーのブラウザではその更新が反映されずにサイトが表示されてしまうということが起こってしまうわけです。
以下では、サイトデータのうち最も更新頻度が多いであろうCSSデータを、
更新する都度、ユーザーのブラウザキャッシュをしっかり更新して最新のサイトを表示できるようにする方法を紹介します。
CSS更新の都度、ブラウザキャッシュを更新させる方法
方法はズバリ、
CSSを更新してサーバーに上げるたびに、CSSのバージョンを変更することです。
CSSのバージョンを変更すると、ブラウザ側は「前回のCSSデータと違うんだな」と認識して、サーバから最新データを取得してきてくれます。それによりCSSに関するブラウザキャッシュも更新されます。
例えばWordPressサイトでは、デフォルトでCSSのバージョンにはWordPressのバージョンが指定されています。
WordPressのバージョンは頻繁に変わるわけではないので、このままだとCSSが更新されたからといって最新データをサーバーから取得してくれず、古いブラウザキャッシュのデータが表示されます。
CSSを更新してサーバーに上げるたびに、CSSのバージョンを変更するように、CSSのバージョンの指定をカスタマイズします。
WordPressサイトの場合、CSSファイルはfunctions.phpのregister_stylesheet関数で読み込まれます。
デフォルトでregister_stylesheet関数は以下のように記述されています。
function register_stylesheet() {
wp_register_style(
'style',
get_stylesheet_directory_uri().'/style.css'
}このままですと、バージョンを指定するregister_stylesheet関数の第４引数に指定がなく、デフォルトが反映されます。
CSSのバージョンが更新の都度変わるように、バージョンにはCSSの更新日時を設定するよう修正します。
function register_stylesheet() {
wp_register_style(
'style',
get_stylesheet_directory_uri().'/style.css',
array(),
date_i18n( 'YmdHis', filemtime(get_stylesheet_directory_uri().'/style.css'));
}filemtime関数を使ってCSSファイルの更新時間を取得して、それを第４引数のバージョンに指定することで、CSSのバージョンにCSSの更新日時が設定されるようにします。
まとめ
ブラウザキャッシュは、サイトの読み込み時間を短縮し、通信量を少なくする役割があり、サイトのUX向上には欠かせない仕組みです。
一方で、サイト運営においては、更新した内容をユーザー側でリアルタイムに表示されないといった不便が生じます。
本記事では、WordPressサイトでの実装を例に、更新したサイトデータをユーザー側に間違いなく表示させるための方法を紹介しました。
コメント