[CakePHP4]CSSやJavaScript、画像のブラウザキャッシュ対策

ブラウザは、Webサイトで使用されているCSS、JavaScript、画像などのデータをキャッシュして、ウェブページの読み込み速度を向上させようとします。

その結果、サーバー上のCSSやJavaScript、画像が更新された場合でもブラウザは以前の情報を保持し続け、Webサイトが正しく表示されないことがあります。

ブラウザのキャッシュクリアにする方法として、ショートカット「Ctrl + F5」をおこなう必要がありますが、Web業界の人以外はキャッシュのクリア方法を理解している人は少ないと思われます。

Webサイトにアクセスしたユーザー全員が問題なく表示させるためには、Webサイト運営側で細工をしておく必要があります。

CakePHP4には便利なキャッシュ更新用の機能がある

CakePHP4には、最新のCSSやJavaScript、画像ファイルのブラウザキャッシュ対策機能が準備されています。

デフォルトでは無効化されているので、機能を気付いていない人が多い気がしますがブラウザキャッシュクリア機能は便利でおすすめです。

ブラウザキャッシュをクリアにする仕組み

ブラウザキャッシュをクリアするためには、同じURLを使用しないということです。

CakePHPの場合は、URLのGETパラメーターにファイルの更新日時のタイムスタンプを付与してくれるます。

つまり、CSSやJavaScript、画像ファイルを更新した場合、ファイルの更新日時が最新日付になるので、Webブラウザから見ると違うファイルを読み込んでもらう仕組みになっています。

■サンプル

<link rel="stylesheet" href="/css/style.css?1696749696"/>

開発者は、手動でタイムスタンプや任意の文字列を毎度付ける必要はなくフレームワークが自動で対応してくれます。

CakePHP4のブラウザキャッシュの設定方法

設定ファイルである「/config/app.php」の項目を修正します。

Asset部分はデフォルトで定義されていますが、もし定義されていない場合は下記を追加してください。

'Asset' => [
    // ↓ forceに書き換えてコメントアウトを外す
    'timestamp' => 'force',
    // 'cacheTime' => '+1 year'
],

 timestampの設定値は下記の動作になっています。

本番運用時（デバッグモードが無効）のみ有効にしたい場合は、「force」で設定しておきましょう。

注意点

注意点として、CSSやJavaScript、画像ファイルを読み込ます場合は、必ずCakePHPのFormヘルパーを使用してください。

<?= $this->Html->script('script.js') ?>
<?= $this->Html->css('style.css') ?>

ブラウザキャッシュ時間の操作も可能

先ほど紹介した「timestamp」以外に「cacheTime」があったかと思いますが、「cacheTime」を有効にすることでWebブラウザに対しキャッシュ時間をコントロールすることができます。

下記のように有効にすることでキャッシュ時間を設定することができます。

'Asset' => [
    'cacheTime' => '+1 year'
],

timestampを有効にした場合は、基本的にずっとキャッシュしていても問題ないはずなので1年とか長期間の設定がおすすめです。

もちろんファイルが更新された場合は、ファイルのURLが変更になるので問題なく最新のファイルを読み込んでくれます。

最後に

今回CakePHPのブラウザキャッシュをコントロールする方法を紹介しました。

デフォルトでは無効になっている機能なので気付かない機能かもしれませんが、本番運用時に便利な機能ですのでぜひ使ってみてください。

PHPフレームワーク CakePHP 3入門

• Amazonで見る
• 楽天で見る

独習PHP 第4版

• Amazonで見る
• 楽天で見る