ユーザーのブラウザに保存されているJavaScript、CSS、画像のキャッシュを削除するにはどうすればいいですか？

ウェブサイトの開発やテスト公開時には、静的リソース（JavaScript、CSS、画像など）が頻繁に更新されるため、ブラウザのキャッシュにより古いファイルが表示されてしまう問題がよく起きます。 これを防ぐために「バージョン番号（キャッシュバスター）」をURLの末尾に付けて、ブラウザに「これは新しいファイルだ」と認識させ、必ず最新のリソースを読み込ませるのが一般的な対策です。

方法の例

HTMLや静的ファイルでのバージョン番号付与

<link rel="stylesheet" href="style.css?v=20230604">
<script src="script.js?v=20230604"></script>
<img src="image.jpg?v=20230604" alt="">

「?v=」の部分は任意で、「?ver=」「?version=」など何でも良い。日付やバージョン番号を変えることでブラウザが新しいファイルと認識。

JavaScriptを使い動的にタイムスタンプを付与（あまり推奨されない）

<script>
document.write('<link rel="stylesheet" href="style.css?v=' + new Date().getTime() + '">');
document.write('<script src="script.js?v=' + new Date().getTime() + '"><\/script>');
</script>

常に現在のタイムスタンプを使うため毎回違うURLになり、キャッシュを無効化できる。ただし、キャッシュ効果がほぼゼロになるためパフォーマンスは悪化。

WordPressでのバージョン番号設定

wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', array(), time());
wp_enqueue_script('js', get_stylesheet_directory_uri() . '/js/script.js', array(), time(), true);

time() を使うと毎秒バージョンが変わり、キャッシュ効果がほぼ無くなる。date('YmdH') のようにすれば1時間ごと、date('YmdHi')なら1分ごとにバージョンが変わり、バランスが取れる。

PHPでのバージョン番号付与

<link rel="stylesheet" href="style.css?ver=<?php echo date('YmdHi'); ?>">
<script src="script.js?ver=<?php echo date('YmdHi'); ?>"></script>
<img src="image.jpg?ver=<?php echo date('YmdHi'); ?>" alt="">

これにより、リソースは1分ごとに更新されるとみなされる。

コード解説

• ウェブサイトの静的ファイル（JavaScript、CSS、画像など）はブラウザにキャッシュされるため、更新しても古いファイルが表示されることがあります。
• これを防ぐため、ファイルのURLにバージョン番号や日時などのパラメータを付加して、ブラウザに「新しいファイル」と認識させる方法がよく使われます。
• こうすることで、キャッシュを強制的に更新し、常に最新のリソースをユーザーに提供できます。
• ただし、毎回異なるタイムスタンプを付けるとキャッシュが無効化され、ページの読み込み速度が遅くなる可能性があるため、更新頻度に合わせて適切に管理することが重要です。

まとめ

ブラウザのキャッシュを確実に更新するには、静的リソースURLにバージョン番号を付与する「キャッシュバスター」が最も簡単で効果的。毎回タイムスタンプを付ける方法は確実だが、キャッシュ効果が失われるため推奨されない。手動でバージョン番号を管理するか、PHPやCMSの仕組みを使い適切なタイミングでバージョンを更新するのがベスト。画像も同様にURLにパラメーターを付けてキャッシュ回避可能。