クライアントに「キャッシュを消してください」を解消する方法

ハシビィくん

修正案件の対応をするたびに「キャッシュ消してみてください」っていうのが正直無駄に感じるっす！解決策ってあるんすか？

カピーさん

キャッシュ問題への解決策はもちろんあるぞ！双方の時間短縮にもなるのでぜひ覚えてほしいぞ。

多くのコーダーさんは、思い当たる節があるのではないでしょうか？

今回は進行を効率よく進めるために、「キャッシュを消してください」を解消できる方法を解説していきます。

キャッシュってそもそも何？

「キャッシュ」とはパソコンやスマホなどでWebページを開いた際に、ブラウザがページ内の画像などの情報が保存されます。

そして再度同じページを開いた際に、以前保存した情報を使って初めてページを開いた時よりも早くページを表示してくれます。

ページの表示速度が遅くなると、Webサイトから離れてしまう離脱率が上がってしまいますので、「キャッシュ」機能はWebサイトにとって必要なものということです。

キャッシュの悪影響

キャッシュは前述した通り、以前訪れたサイトの表示速度を上げてくれる便利な機能ですが、情報を保存してくれるからこそ悪影響もあります。

その悪影響とは、画像やテキストを更新（変更）してもすぐに反映されない場合があるということです。

ハシビィくん

クライアントに「どこを修正してくれたんですか？」

カピーさん

「画像を差し替えたはずなのに！？」

このような経験は多くのWeb制作者にとってあるあるだと思います。

この事例ではキャッシュを削除することで解決するという、キャッシュによる情報保存による悪影響というわけです。

キャッシュの削除方法

キャッシュクリア（削除）の方法はブラウザによって異なります。ですが、「ブラウザ名＋キャッシュ」などで検索すれば見つかります。

Web制作者は、サイトの修正作業後に自身でキャッシュを削除し確認するので問題はありません。ですが、クライアント側ではキャッシュが残っている状態なので、修正作業内容が反映されていない、なんてことが発生してしまうのです。

複数の修正案件の場合、修正→確認→修正etc.となりますが、毎回キャッシュの削除をセットで依頼するのは負担になってしまいます。

そこで今回紹介する方法を使うことで、制作者もクライアントも負担を減らすことができます。

キャッシュの悪影響を解消する方法

本記事では2つの方法を紹介していきます。どちらの方法も簡単に使うことができますので、案件の内容や状況で判断してください。

クエリパラメータを付与

クエリパラメータ（URLパラメータ／GETパラメータ）に変数を付与していくことで、キャッシュの悪影響が解消できます。

ただ「変数を付与」と聞いてもピンとこない方もいらっしゃると思いますので、具体例を出して説明していきます。

まずは一般的なCSSの読み込み時の書き方は以下のようになります。

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

これを以下のように追記することで完了となります。

<link rel="stylesheet" href="css/style.css?ver=1.1"

具体的に「変数を付与」というのは、?*******の部分になります。一例としてver=1.1としていますが、?以降の書き方に指定はありません。Ver表記でもいいですし、日付やプロジェクトごとの命名ルールでもOKです。

日付のパターンは以下のようになります。（2024年10月30日に更新という想定）

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

このように変数を付与することで、ブラウザは今までとは異なるファイルと認識するので新たに読み込みを開始するというわけです。

この付与に関しては、jsやimgタグでも利用することができます。

変数を付与することでファイル名が同じでも中身が変わった時に、変数を変更してあげれば別のファイルとして扱われます。

<!-- 変更前 -->
<img src="img/test.png?20241028" alt=""/>

<!-- 変更後 -->
<img src="img/test.png?20241030" alt=""/>

test.pngと同じファイル名ですが、変数が変更されているので中身は変わっていながらもキャッシュ削除は不要になります。

WordPressで利用する場合

WordPressはCSSやjsなどfunction.phpから読み込んでいるという人が多いと思います。

<?php
// CSSとJavaScriptの読み込み
function my_script_init() {
    // WordPressに含まれているjquery.jsを読み込まない
    wp_deregister_script('jquery');

    // jQueryの最新バージョンをCDNから読み込み
    wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.7.0.min.js', array(), '3.7.0', true);

    // メインスクリプトの読み込み
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.2', true);

    // メインスタイルシートの読み込み
    wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css', array(), '1.2');
}
add_action('wp_enqueue_scripts', 'my_script_init');

拡張子の後ではなく第4引数にある『1.2』がバージョン名にあたるので、更新するごとにこの数値を変えていけばOKです。

ファイル名にバージョン情報を含める

修正が大規模だったりする際には、変数ではなくファイル名ごと変えるケースもあります。

style.cssをstyle_v2.cssのようにリネームすることで対応が可能です。

ファイル名にバージョン情報が明記されるので管理が一目で分かりやすいというメリットがあります。

まとめ：クライアントに「キャッシュを消してください」を解消する方法

「キャッシュを消してください」という一言を伝えるのは簡単ですが、クライアント側では操作が困難なケースも多々あります。ビデオ会議などで方法をレクチャーするのも可能ですが、双方の時間を使ってしまうという芳しくない状態になってしまいます。

そこで今回紹介した方法を取り入れてもらえれば、無駄な時間を使わずに進めていくことができるので、ぜひ取り入れてもらえればと思います。