PHPを使ってCSSやJSのキャッシュ削除を自動化しよう

Web制作をしているとよくある会話

コーダー「こちら修正しました。ご確認よろしくお願いいたします」

クライアント「変わっていません…」

コーダー「キャッシュ削除してください。方法は…」

あるあるですよね？

キャッシュ削除について何度も説明するのが面倒だという話をよく聞きます。

そんな時はキャッシュ削除を自動化しませんか？

date関数だけでもいいが、難点がある

CSSのキャッシュを残さないようにする場合、一番簡単なのはリクエストパラメータにdate関数を付与するコードです。

以下のような形で書いたことがある人もいらっしゃるでしょう。

<link rel="stylesheet" href="<?php echo '【ファイルパス】style.css?ver='.date('YmdHis'); ?>">

date関数のフォーマットにもよりますが、これだと毎秒キャッシュが解除されるようになり、問題は解決！のように見えますが、デメリットがあります。

それは、「キャッシュ削除する必要がないときに削除されること」です。

キャッシュを削除するメリットとデメリット

ますは、キャッシュの簡単なメリットから。

キャッシュはブラウザにデータや情報を残すことによって2回目以降の訪問でページ速度が速くなったり、データ通信（いわゆる「ギガ」）の節約になったりとメリットが多くあります。

キャッシュを削除するとサイトを閲覧するユーザーはそれらのメリットが享受できなくなります。

ページを閲覧するたびにページ速度が遅くなったり、データ通信を無駄に使ってしまうことになるのです。

ユーザーに負担をかけないキャッシュの削除のカギは「更新時間」

ユーザーに負担をかけず、CSSやJSもきちんと反映される方法は「ファイルの更新時間の取得」です。

ファイルの更新時間を取得する関数は「filemtime()」です。

<?php $file_path = '【フルファイルパス】style.css'; ?>
<link rel="stylesheet" href="【ファイルパス】style.css<?php echo '?ver='.filemtime($file_path); ?>">

filemtime関数を利用することで、ファイルの更新時間がパラメータに付与されるだけなので、ページを開くたびにキャッシュが削除されるということはありません。

注意事項としては更新時間を取得するためのファイルパスはフルパスでないといけないので、href属性で使用ができないので分けましょう。（セキュリティ的にNG）

filemtime関数の詳細についてはドキュメントを見てみましょう。

https://www.php.net/manual/ja/function.filemtime.php

WordPressでの書き方

functions.phpで書くなら以下のような形になります

HTMLに表示されるパスは「get_template_directory_uri」関数で、filemtime関数で使用するパスはフルパスが必要なので、「get_template_directory」関数を使用します。

function enqueue_style_script(){  
  // ..省略
  wp_enqueue_style('theme_style', get_template_directory_uri().'/assets/css/style.css', "", filemtime(get_template_directory().'/assets/css/style.css'));
  // ..省略
}
add_action('wp_enqueue_scripts','enqueue_style_script');

まとめ

基本的に今の日付をパラメータ付与するdate関数を使った場合、キャッシュは削除されるものの、ユーザーがページを表示するたびに以下のような負担がかかります。

• ページ速度が遅くなる
• データ通信を無駄に使ってしまう

「ファイルの更新時間」をパラメータ付与すればこれらの課題が解決できるのです。