【キャッシュ対策】修正が反映されない『キャッシュクリアお願いします！』をなくす方法

サイトの修正をするたびにクライアントにキャッシュクリアをお願いせずに済む方法ない？

これを知らないとクライアントとのやりとりが増え、無駄な時間を消費してしまいます。

例えば、

修正したのでご確認よろしくお願いします！

修正されていません

・・・キャッシュクリアお願いします！

キャッシュクリアってどうするんですか？？

あれをこうしてああして・・・

というやり取りをコーダーはほぼ100%経験したことがあるかと思います。

これは自分の時間はもちろん相手の時間も奪ってしまうことになるので避けたい所です。

今回はこの無駄なやりとりを無くすための方法について解説していきたいと思います。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

830部突破！※ 4月15日値上げ予定

キャッシュとは？

まず『キャッシュとは何か？』というところから解説したいと思います。

パソコンやスマホはページを開いた際、ブラウザが画像などの情報を保存します。

そして次にそのページを開いた時にはその保持していた情報を元に、最初見たときより早くページを表示させることが出来ます。

ページの表示が遅くなるとサイトに訪れた人が離脱する確率が上がってしまうので、キャッシュはとても重要なものとなります（読み込みに3秒以上かかると50%以上の人が離脱すると言われています）

なので基本的にはキャッシュは『必要なもの』となります。

キャッシュのデメリットとは？

キャッシュは再度サイトを訪れた際に表示速度を早くしてくれる便利なものですが、デメリットも存在します。

それはブラウザがページのデータを保持しているので、画像やテキストなど更新してもすぐに反映されないことがあるということです。

Web制作をしていて修正をしたのに反映されない・・・どこか間違っているんだろうか？？

ということがあるかと思います。

そしてキャッシュを削除したら解決した、といったことはWeb制作に置いて超あるあるだと思います。

キャッシュの削除方法

キャッシュクリアの方法はブラウザによって異なるので、ググって貰えばすぐ見つかると思います。

全部書くと長くなるのでこの記事では書きません。

自分でサイトの修正などをしてキャッシュを削除する分には問題ないのですが、クライアント側がその方法を知らない場合はやり方を説明して実行して貰う必要が出てきます。

実務ではサイトの修正は1度ではなく複数回あると思うので、これを毎回クライアント側にやらせてしまうと負担をかけさせてしまうことになります。

そしてクライアントが変わるたびに説明するのは自分にとってもしんどいので、このやりとりを無くす方法をこれから書いていきます。

URLパラメータ（GETパラメータ）を付ける

それではいよいよ本題です。

URLパラメータとは『URLの末尾に付け加える変数』のことです。

と言ってもよく分からないと思うので、実際に見てみます。

例えばCSSの読み込みをするときは次のように書くと思います。

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

それをこのように書けばOKです。

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

拡張子の後に『?』を付けてその後に適当にVer名や日付などを書きます。

『?』以降の書き方に決まりはないので、分かりやすいように書いておきましょう。

日付の場合だと次のようになります。

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

これを書くとどうなるかと言うと、この数値を変えるとブラウザは別のファイルだと認識するので、同じファイルでもキャッシュは別のファイルとして新たに読み込むということです。

またjsやimgタグでも同様です。

<script src="js/main.js?ver=1.0.1"></script>

<img src="img/profile.png?20220915" alt=""/>

また、ファイル名が同じで中身が変わった時は、URLパラメータの数値変えればまた別のファイルとして認識されます。

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

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

これでファイル名が同じままでもキャッシュを削除する必要がなくなります（更新するたびにファイル名を変えるわけにはいきませんからね）

WordPressの場合

WordPressの場合は以下のようにCSSやjsを『functions.php』から読み込んでいる人が多いと思います。

<?php
/* CSSとJavaScriptの読み込み */
function my_script_init()
  { // WordPressに含まれているjquery.jsを読み込まない
    wp_deregister_script('jquery');
    // jQueryの読み込み
    wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.1.min.js', "", "1.0.1", true);
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.1', true );
    wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1' );
  }
  add_action('wp_enqueue_scripts', 'my_script_init');

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