CSSのキャッシュを自動でクリアさせてWEBサイトの更新（リロード）の手間を省こう！

WEBサイト更新したのにブラウザのキャッシュが強くてうまく反映されず、以下のような困った経験はありませんか？

• 更新したWEBサイトの確認をクライアントに見てもらいたいのに、クライアントサイドのキャッシュが強くて確認がうまくできない。
• 既に公開しているサイトで、一部WEBサイトの改修をしたが、エンドユーザーサイドでキャッシュが強くで表示がうまく反映されていない

WEBサイトの更新を確認してもらう場合には、キャッシュをクリアにする事で更新した内容が確認できるのですが、中には環境によってキャッシュが根強く残っている場合があります。

根強いキャッシュのクリアには「スーパーリロード」という、根強いキャッシュをクリアする方法があるのですが、これをわざわざクライアントやエンドユーザーに説明したり、WEBサイトを見るのにいちいちキャッシュクリアをさせるのは相手に手間をかけさせる事にもなるので、出来るならさせたくないですよね。。

という事で、今回はそんんあ手間をかけさせずに更新したWEｂサイトをみてもらう方法をご紹介していきたいと思います！

パスの末尾に?○○○○というパラメーターを付与しよう

キャッシュをクリアした状態でWEBサイトを見てもらうには、linkタグのファイルパスの末尾にパラメーターを以下のコードのように付与します。

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

上記のように「.css」の末尾に「？○○○○」というパラメーターを付与すると、キャッシュクリアされた状態で表示されますので、クライアントやエンドユーザーにキャッシュをクリアしてもらえる手間を省く事ができます。

パラーメーターは年月日やバージョンで管理すると分かりやすいかも

？○○○○にあたる部分は実際には年月日やバージョンで管理されている事が多いかと思います。

年月日であれば、いつ更新したのか日付による管理ができるので分かりやすいかと思います。

また、「?ver=1.0.2」というようなバージョンで管理する事も、運用ルールさえ設けていれば分かりやすく管理ができるかと思います。

文字自体は任意で付与できますので、管理のしやすい文字列を付与しましょう。

WordPressで更新日を取得して自動でパラメーターに付与したい場合

WordPressであれば更新日を自動で取得して、パラーメーターに付与する事もできます。

以下のようにテンプレートタグを入れます。

<!--  テーマ直下のスタイルシートの読み込みは以下のように記述  -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?<?php echo date('Ymd', filemtime( get_stylesheet_directory() . '/style.css')); ?>">

<!--  その他にディレクトリがある場合には以下のように記述  -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css?<php echo date('Ymd', filemtime( get_stylesheet_directory() . '/css/common.css')); ?>">

まとめ

CSSのキャッシュを自動でクリアさせてWEBサイトの更新（リロード）の手間を省く方法についてご紹介いたしましたが、いかがだったでしょうか？

もし、キャッシュ対策でお悩みであれば是非一度お試し下さい！