ブラウザキャッシュを制御する方法：Webパフォーマンスと更新反映の両立

ブラウザキャッシュとは？仕組みとメリット

ブラウザキャッシュとは、一度アクセスしたWebページのリソース（HTML、CSS、JavaScript、画像など）をブラウザがローカルに保存し、次回以降の読み込みを高速化する仕組みです。

メリット

• 表示速度の向上：通信の回数が減ることでページ表示が速くなる
• サーバー負荷の軽減：同じリソースの再リクエストを防ぐ
• ユーザー体験の向上：リピート訪問時の快適さがアップ

キャッシュ制御の基本：HTTPレスポンスヘッダー

ブラウザキャッシュの制御は主にHTTPレスポンスヘッダーで行います。以下に代表的なヘッダーとその意味、およびApacheやNginxでの具体的な設定方法を解説します。

Cache-Control

Cache-Control: max-age=31536000, public

• max-age：キャッシュの有効期限（秒単位）
• public：共有キャッシュも許可（CDNなど）
• no-cache：キャッシュはするが、再利用前に必ず確認
• no-store：キャッシュ自体をしない

Apacheでの設定例（.htaccess）

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|jpg|png|gif|woff|woff2)$">
    Header set Cache-Control "max-age=31536000, public"
  </FilesMatch>
</IfModule>

Nginxでの設定例

location ~* \.(js|css|jpg|png|gif|woff|woff2)$ {
  add_header Cache-Control "max-age=31536000, public";
}

Expires

Expires: Wed, 31 Dec 2037 23:55:55 GMT

• 古い仕様ですが、HTTP/1.0対応として併用する場合があります。

Apacheでの設定例

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

Nginxでの設定例

location ~* \.(css|js|jpg|jpeg|png|gif)$ {
  expires 1y;
}

ETag / Last-Modified

ETag: "abc123"
Last-Modified: Tue, 14 May 2024 12:00:00 GMT

• サーバー側でリソースのバージョンを識別し、変更がなければ304 Not Modifiedでレスポンス。

Apacheでの設定例（ETagの無効化も可能）

<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

Nginxでの設定例（ETagはデフォルトで有効）

etag on;

キャッシュバスティングの実践テクニック

キャッシュの効果を活かしつつ、更新があった際に即座に反映させるには「キャッシュバスティング（Cache Busting）」と呼ばれる手法が有効です。以下に代表的な実装方法を紹介します。

クエリストリングを使ったバージョニング

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

• ?v=バージョン番号 のようにクエリパラメータを付加することで、ブラウザが新規リクエストと判断して再読み込み。

ファイル名にハッシュを埋め込む

<script src="/assets/js/main.abc123.js"></script>

• ビルド時にハッシュを自動付与する仕組み（例：Vite, webpack）で、内容が変わるたびにファイル名が変わる。

短い有効期限の指定（補足）

Cache-Control: max-age=60, must-revalidate

• キャッシュの更新頻度を高めるための手法。厳密にはキャッシュバスティングとは異なるが、即時反映を促す目的で併用される。

CMS・静的サイトでの実装例

Apache（.htaccess）でのキャッシュ設定

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

Nginxでの設定例

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
  expires 1y;
  add_header Cache-Control "public";
}

WordPressプラグイン例

• WP Super Cache：静的HTMLを生成し、キャッシュの有効期限を設定可能
• Autoptimize：CSS・JSの結合とバージョニング対応

まとめ：キャッシュ制御は戦略的に

ブラウザキャッシュはWebパフォーマンスに不可欠ですが、更新反映が遅れるとユーザー体験を損ねてしまいます。

そのため、以下の戦略的な運用が重要です：

• 静的リソースには長期キャッシュ＋ファイル名のハッシュ化（キャッシュバスティング）
• 動的なリソースは短期キャッシュやETagで検証
• サイト全体に一律の設定をせず、用途に応じて適切に分ける

特に更新頻度の高いCSSやJSなどは、キャッシュ制御とバージョン管理の両輪で運用しましょう。