2026.05.08
筆者について
WEBマーケティングの人間が、Geminiに聞いたり、Google公式情報を調べたりしてまとめた記事です。フロントエンジニアの方や開発エンジニア、インフラエンジニアの方には物足りない記事内容の可能性があるかと思います。その点予め含みおきいただけますと幸いです。
ブラウザキャッシュの仕組み
HTTPレスポンスヘッダーでCSSやJavaScriptをどのくらいの期間クライアント側にキャッシュを保持してほしいかの希望を記述できます。WEBサイトの環境や設定にもよりますが、例えば.htaccessで設定可能です。
上記のようにchromeのデベロッパーツールで、ブラウザキャッシュが何日間設定されているかを確認できます。
なお、GoogleのクローラはHTTPレスポンスヘッダーに記載されているブラウザキャッシュの期間を無視して、
最長30日程度キャッシュを保持するそうです。
HTTPレスポンスヘッダーに上記の設定が無い場合、iPhoneのsafariなどは
【参考記事】
・GooglebotがCSSを最大30日間キャッシュすることについて。 https://developers.google.com/search/blog/2024/12/crawling-december-resources?hl=ja
抜粋：WRS は、表示するページで参照されているすべてのリソース（JavaScript や CSS）をキャッシュに保存しようとします。 WRS キャッシュの有効期間（TTL）は、HTTP キャッシュ ディレクティブの影響を受けません。 WRS はすべてを最大 30 日間キャッシュに保存し、クロール バジェットを他のクロールタスクに回せるようにします。
Google Search Central Blog より
なお、iPhoneなどの端末は必ず指定の期間ブラウザキャッシュを保持するとは限らないようです。（Gemini調べ）
HTTPレスポンスヘッダーのブラウザキャッシュ期間は、あくまでWEBオーナー側の希望という形ですね。
最新HTML ＆ ブラウザキャッシュの古いバージョンのCSS の組み合わせでWEBページが読み込まれた場合
ユーザー画面やGoogleのWRS（ウェブレンダリングサービス）レンダリング結果でレイアウトが崩れる恐れがあります。
CSSのブラウザキャッシュを強制的にクリアさせて、前述のレイアウト崩れを防ぐ方法
CSSの内容を変更した際には都度CSSのURLを変更するようにする。例えばURLの後ろにパラメータをつけて、このパラメータを更新するなど。
CSSのURLがかわると、強制的に新しいCSSが読み込まれるため、ブラウザキャッシュの古いCSSが読み込まれるのを防げます。
【参考記事】
・WRS はキャッシュヘッダーを無視することと、これの対応策
https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=ja
抜粋：Googlebot は、ネットワークリクエストとリソースの使用量を減らすために、積極的にキャッシュに保存しますが、WRS はキャッシュヘッダーを無視することがあります。このため、WRS は古い JavaScript や CSS リソースを使用することがあります。
Google Search Centralより
この問題は、ファイル名の一部をコンテンツのフィンガープリントにすることで回避されます（などmain.2bb85551.js）
・ファイル（CSSやJavaScript）の中身を変更したらファイル名を変更して、強制的に再ダウンロードさせる、という仕様を推奨
https://web.dev/articles/use-long-term-caching?hl=ja
抜粋（一部意訳）： 1. ファイルを非常に長い期間（1 年など）キャッシュに保存するようブラウザに指示します。 2. 変更されたらファイル名を変更して、強制的に再ダウンロードさせます。
web.devより
PHPのフレームワークによって、初期設定が異なるそう
聞きかじりの内容ですが、FuelPHPというフレームワークでは初期設定でCSSのURLにユニックスタイムスタンプのパラメータが付くようになっていて、ファイルが編集されたときにパラメータが更新されるようになっているそうです。
デプロイの仕方によっては、「デプロイ＝ファイルが更新された」とみなされ、デプロイする度にユニックスタイムスタンプが更新されるそうです。この場合、デプロイの頻度が高いと、ユーザー側はブラウザキャッシュのCSSを使用できず、毎回読み込みが遅くなり、もったいないですね。
おわりに
以上、マーケの私がGeminiに聞きながら、またGoogleの公式情報を見ながら、CSSのブラウザキャッシュ強制クリアの方法について調べた内容でした。
参考になれば幸いです。
