ファイル更新日時を付加してCSS/JSファイルのキャッシュ対策!結局これが一番

CSS や JSファイルを更新しても、ブラウザのキャッシュが読み込まれてしまい、更新後の新しい状態が確認できないということがあります。

更新したことを知っている人であれば、[Ctrl]+[F5] や [Ctrl]+[R] などのスーパーリロードすれば済むことですが、そうでない場合、閲覧者のブラウザ環境によっては古い状態が表示され続けてしまうなんてこともあり得ます。コレ、顧客先のWebサイトの更新で、担当者がPC初心者担当者だったりすると結構大変・・。

従来の方法

そこで良く紹介されている対策は、下記のように参照するCSSやJSファイルの後に ?ver=3.3 のように任意のパラメータを付加するという方法。CSSやJSファイル更新時に、このパラメータを一緒に変えてあげることで、ブラウザはキャッシュ済みファイルとは別物と認識し、結果、特別なリロードをすることなく最新のファイルを読み込むようになるわけです。

手動で任意の文字列を付加
<link rel="stylesheet" href="./style.css?ver=3.3" />
<script type="text/javascript" src="./js.js?ver=3.3.0"></script>

しかし、複数のHTMLファイルでそれぞれCSSやJSファイルを読み込んでいるような場合、更新の度に全てのファイルのパラメータを更新しないとならず、とっても不便。そこで上のものを改良し自動化したのが下記。こちらはPHPを利用し、パラメータとして現在の日付や時間などを付加しています。下記の例では「年月日-時」なので1時間ごとにパラメータが変わるイメージです。

自動で日時を付加
<link rel="stylesheet" href="./style.css?<?php echo date('Ymd-H'); ?>" />
<script type="text/javascript" src="./js.js?<?php echo date('Ymd-H'); ?>"></script>

しかし、日時を付加する場合、仮にファイルの更新がなくても、指定した日時の単位で更新されることになるので、あまり効率の良い方法とは言えません。

ファイル更新日時(タイムスタンプ)を付加

おそらくこの方法が一番ベストだと思います。

ファイルを更新した日時がパラメータに付加されます。要するに、ファイルを更新した時だけパラメータが更新されるということなので、誰もが希望する理想の状態になるわけです。

それでは早速コードを紹介します。環境によってパスの指定の仕方が異なるので、今回はいくつかの例を紹介しておきます。

通常のHTML/PHPファイルの場合

ファイルの更新日を取得するには filemtime 関数を使用します。filemtimeは、相対パス or 絶対パスでファイルを指定しますが、絶対パスを使用する場合はサーバー側から見た絶対パス(/var/www/html など)を指定する必要があります。

相対パスで指定する場合
<link rel="stylesheet" href="./style.css?<?php echo date('YmdHis', filemtime('./style.css')); ?>" />
<script type="text/javascript" src="./js.js?<?php echo date('YmdHis', filemtime('./js.js')); ?>"></script>
絶対パスで指定する場合
<link rel="stylesheet" href="/style.css?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/style.css')); ?>" />
<script type="text/javascript" src="/js.js?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/js.js')); ?>"></script>

WordPress の場合

WordPress の場合は、パスを取得する独自の関数を使用します。

WordPress の各ファイルに直接記述する場合
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css?<?php echo date('YmdHi', filemtime(get_template_directory() . '/css/style.css')); ?>" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/js.js?<?php echo date('YmdHi', filemtime(get_template_directory() . '/js/js.js')); ?>"></script>
WordPress で Function.php 内に記述する場合
wp_enqueue_style( 'mycss', get_stylesheet_directory_uri() . '/css/style.css', array(), date('YmdHi', filemtime(get_template_directory() . '/css/style.css')) );
wp_enqueue_script( 'myjs', get_stylesheet_directory_uri() . '/js/js.js', array(), date('YmdHi', filemtime(get_template_directory() . '/js/js.js')), true );

サーバー側のキャッシュ

Webサイトの閲覧キャッシュはブラウザごとに保存していますが、その他、利用しているサーバーによってはアクセラレータというキャッシュ機能を提供している場合があります。ロリポップの場合はデフォルトで有効になっています。

ロリポップ!アクセラレータ設定・解除方法
https://lolipop.jp/manual/hp/content-cache/

今回紹介した方法を使えば、これらが有効になっていたとしても対策になるはずですが、もしうまくいかない場合はサーバー側のコントロールパネルより、 アクセラレータの機能を無効にしてみるなど試してみてください。

この記事を書いた人

日本では主にUNIXサーバーの構築、運用などに携わり、2006年に仕事を辞めてカナダに来てそのまま永住。

カナダでは、日本からカナダに留学や永住、ビジネスで渡航する人たちのサポートを行う傍ら、専門分野+趣味でもあるWeb制作、運用を継続しながら、最近では写真/動画撮影、動画制作、モーショングラフィックなど、新しい分野のスキルアップに励んでいます。

Peas Code は、僕が過去の経験の中で学んだことを、特定の分野に限定せず公開していくことを目的としています。中にはコードに見えてしまうような意味不明な僕独自の理論も含まれますが、知っていると平和になれると言う意味で、Peas(peace → peas) Code と名付けました。これが意味不明か・・・。

僕について、もうちょっと詳細を知りたいという変わった人は[About me]を見てください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です