Web it Works

2022.07.08

【PHP / WordPress】CSSのキャッシュを削除する方法、date関数でやってない?

【PHP / WordPress】CSSのキャッシュを削除する方法、date関数でやってない?

こんにちは、伊東です。

今回はCSSやJavaScriptファイルのブラウザキャッシュを残さないようにする「最適解」をご紹介します。

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="<?php echo $file_path.'?ver='.filemtime($file_path); ?>">

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

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

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

まとめ

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

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

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

>
Web制作
>
【PHP / WordPress】CSSのキャッシュを削除する方法、date関数でやってない?