【徹底解説】ブラウザキャッシュを無効化して残さない設定方法

RELEASE / 2024.4.24 UPDATE / 2024.04.17

.htaccess

GETパラメータ

PHP

ブラウザキャッシュ

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

ブラウザキャッシュは一度読み込んだことのある画像やCSSなどを読み込むことでページが表示するまでの時間を短縮してくれる効果が期待出来ます。
しかし、ブラウザキャッシュの影響で、変更したはずのデザインや画像などが古いままで最新の状態に変更されないということも起こってしまいます。
そこでこの記事ではブラウザキャッシュを無効化して残さない設定方法をご紹介したいと思います。

この記事の目次を表示

1 使用してブラウザキャッシュを無効化する方法
2 まとめ

使用してブラウザキャッシュを無効化する方法

ブラウザキャッシュを無効化して残さない方法はいくつもあります。この記事では以下の方法をご紹介します。

GETパラメータを使用する方法
PHPを使用する方法
.htaccessを使用する方法
メタタグを使用する方法

それでは順番にご紹介していきます。

GETパラメータを使用してブラウザキャッシュを無効化する方法

CSSファイルやjsファイル、そして画像ファイルをHTMLにリンク設定する際、そのURLにGETパラメータをセットすることでキャッシュを無効化して残さないようにすることが出来ます。
URLにGETパラメータをセットすることでWEBブラウザは別のURLと認識するためキャッシュを読み込まず、常に新しいデータを読み込み表示してくれます。

GETパラメータを使用してブラウザキャッシュを無効化する方法はこちら。

<link rel="stylesheet" href="/assets/css/style.css?ver=●●●●●●">

<script src="/assets/js/script.js?ver=●●●●●●"></script>

<img src="/assets/images/example.jpg?ver=●●●●●●">

ファイルを編集するたびに?ver=●●●●●●の部分を書き換えることで新しいデータと認識するのでキャッシュを読み込むことなく常に最新のデータを読み込むようになります。
この方法は非常に分かりやすい上に簡単なのですぐに取り入れることが出来ますね。

PHPを使用してブラウザキャッシュを無効化する方法

PHPを使用する方法は2通りの方法があります。

HTTPヘッダーを使用する方法
date()関数を使用する方法

それでは順番にご紹介していきます。

HTTPヘッダーを使用してブラウザキャッシュを無効化する方法

PHPのHTTPヘッダーを使用することでブラウザキャッシュを無効化して残さない設定にすることが出来ます。

PHPのHTTPヘッダーを使用するはこちら。

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // 過去の日付を指定
?>

これにより、WEBブラウザは常に最新のデータを読み込むようになります。

date()関数を使用してブラウザキャッシュを無効化する方法

PHPのdate()関数を使用することでブラウザキャッシュを無効化して残さない設定にすることが出来ます。

PHPdate()関数を使用するはこちら。

<link rel="stylesheet" href="/assets/css/style.css?date=<?php echo date('YmdHis'); ?>">

<script src="/assets/js/script.js?date=<?php echo date('YmdHis'); ?>"></script>

<img src="/assets/images/example.jpg?date=<?php echo date('YmdHis'); ?>">

こちら実は、GETパラメータを使用する方法のご紹介した方法の応用版です。
PHPのdate()関数で常に現在の日時をGETパラメータとしてセットするようにしています。
GETパラメータを使用する方法でもご紹介した通り、セットすることでWEBブラウザは別のURLと認識するためキャッシュを読み込まず、常に新しいデータを読み込み表示してくれます。

.htaccessを使用する方法

.htaccessを使用することでブラウザキャッシュを無効化して残さない設定にすることが出来ます。

.htaccessを使用する方法はこちら。

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

これにより、WEBブラウザは常に最新のデータを読み込むようになります。

メタタグを使用する方法

メタタグを使用することでブラウザキャッシュを無効化して残さない設定にすることが出来ます。

メタタグを使用する方法はこちら。

<meta http-equiv="Cache-Control" content="no-cache"><!-- ブラウザキャッシュを無効化して残さない設定 -->
<meta http-equiv="Pragma" content="no-cache"><!-- http-equiv="Cache-Control"に対応していない環境向けの設定 -->
<meta http-equiv="Expires" content="0"><!-- ブラウザキャッシュの有効期限を0（残さない）に設定 -->

この3つをセットで記述するだけです。これにより、WEBブラウザは常に最新のデータを読み込むようになります。