タイムスタンプでCSSやJSファイルのキャッシュ対策

WEB制作をしていると何かとキャッシュに悩まされます。
「更新しても変わらないんだけど・・・なんで？」等とリテラシーのあまりない方には、キャッシュというものから説明して、キャッシュクリアやスーパーリロードの方法等を説明しなければなりませんよね。

そんなやり取りを減らすために、予めCSSやJSファイルのキャッシュ対策をしてしまおうという内容です。

CSSやJSファイルにパラメータを付与する

下記のように ?ver=1.2 というように手動でバージョンをパラメータに付与する方法をたまに見かけます。

<link type="text/css" rel="stylesheet" href="/assets/css/style.css?ver=1.2" />

この方法ですと、CSSやJSファイルを更新する度にバージョンを変更しなければいけません。

ですので、アクセスされた時間からタイムスタンプを取得してそれをパラメータに入れてしまおうという方法が便利です。
PHPでtime関数でUnixタイムスタンプを取得します。

<?php $timestamp = time(); ?>
<link type="text/css" rel="stylesheet" href="/assets/css/style.css<?php echo '?'.$timestamp ?>" />

このようにすれば、アクセスされた時間で毎回パラメータが更新されるのでキャッシュ済みのファイルとは別物として扱われます。
実際に出力されるソースは下記のようになります。

<link type="text/css" rel="stylesheet" href="/assets/css/style.css?1670409191" />

まとめ

この対策を行うようにしてから、「更新しても変わらない」というようなやり取りは激減しました。
ただせっかくキャッシュされているものを、毎回読み込ませてたらページ表示速度にも少なからず影響を与えますので、私はあくまでも開発時のみとし、公開直前にこの記述は削除するようにしています。
削除し忘れないように注意しましょう。