「キャッシュクリアして」と言わずに済む方法【web制作】

この記事の前提条件

対象: HTML・CSS・サーバー設定
難易度: ★★☆
所要時間: 約10分

サイトを修正して納品したのに、クライアントから「まだ直ってないです」と連絡が来て確認したら、実際にはちゃんと直っている…というすれ違い、Web制作の現場では本当によくあります。原因の多くはブラウザキャッシュ、つまり相手のブラウザが古いCSS・JSファイルを覚えたまま使い続けてしまっていることです。毎回「キャッシュクリアしてください」とお願いするのではなく、そもそもキャッシュされにくい仕組みを作っておく方法を紹介します。

目次非表示

なぜ相手だけ古い表示のままになるのか
解決法1(手軽): ファイルの末尾にバージョン番号を付ける
解決法2(より確実): ファイルの更新日時を自動で反映する
WordPressサイトで直らない場合はサーバー側キャッシュも疑う
まとめ

目次へ

なぜ相手だけ古い表示のままになるのか

ブラウザは通信量を減らすため、一度読み込んだCSSやJSファイルを端末に保存し、次回以降は保存済みのファイルを使い回します。ファイル名(URL)が全く同じままだと、サーバー側の中身を更新しても、ブラウザは「同じURLだから前と同じ内容のはず」と判断し、古い保存データをそのまま使い続けてしまいます。

解決法1(手軽): ファイルの末尾にバージョン番号を付ける

一番手軽なのが、CSS・JSファイルの読み込みURLの末尾に、「?」に続けてバージョン情報を追記する方法です。

<link rel="stylesheet" href="style.css?v=2">
<script src="script.js?v=2"></script>

ブラウザは「URLが違う=別のファイル」と判断するため、?v=1から?v=2に変えるだけで、キャッシュを無視して新しいファイルを読み込みに行ってくれます。修正のたびに末尾の数字を1つ増やすだけなので、実装コストがほぼゼロなのがメリットです。

⚠️ この方法の弱点: 更新を忘れやすい

手動でバージョン番号を書き換える運用は、シンプルな反面、修正したのに番号を上げ忘れるというヒューマンエラーが起きがちです。特に急ぎの修正時ほど忘れやすいので、「CSS/JSを直したら必ず末尾の番号も1つ上げる」をルーティンとして徹底する必要があります。

解決法2(より確実): ファイルの更新日時を自動で反映する

PHPが使える環境なら、手動でのバージョン管理を卒業できます。ファイルの最終更新日時を取得して、自動的にバージョン番号として付与してしまう方法です。

<link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">

filemtime()はファイルの最終更新日時を数値で取得するPHPの関数です。CSSファイルの中身を1文字でも変更して保存すれば、この数値が自動的に変わるため、番号の上げ忘れが原理的に起こりません。WordPressのテーマファイル内でCSS・JSを読み込んでいる場合も、同じ考え方でwp_enqueue_style()の第4引数(バージョン)にfilemtime()を渡す形で応用できます。

WordPressサイトで直らない場合はサーバー側キャッシュも疑う

上記を実施してもまだ「直っていない」と言われる場合、原因はブラウザキャッシュではなく、サーバー側のキャッシュ機能(LiteSpeed Cacheなど)にあることも多いです。この場合はブラウザではなくサーバー側でキャッシュをクリアする必要があるため、ファイル名の変更だけでは解決しません。使っているキャッシュプラグイン・レンタルサーバーの管理画面から、該当ページのキャッシュを削除する操作もあわせて確認しましょう。