Web制作

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

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

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

例えば、

修正したのでご確認よろしくお願いします!
修正されていません
・・・キャッシュクリアお願いします!
キャッシュクリアってどうするんですか??
あれをこうしてああして・・・

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

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

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

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

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


キャッシュとは?

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

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

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

ページの表示が遅くなるとサイトに訪れた人が離脱する確率が上がってしまうので、キャッシュはとても重要なものとなります(読み込みに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です。

以上になります。

やっている事は簡単ですがクライアントに負担をかけさせず、自分も無駄に時間を消費しないで済むのでぜひ活用しましょう。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作