Web制作

【キャッシュ削除のお願い】なくす方法(工数削減)

※ 当サイトではアフィリエイト広告を利用しています

キャッシュ削除方法解説記事のアイキャッチ画像

こんな経験ありませんか?

Web制作会社の方から初稿の修正がきました。

 

Web制作会社の人
一部表示崩れがあるので修正していただけますか?

 

修正完了したのでご確認の方お願いします!
kodai

 

Web制作会社の人
???修正されていません・・・

 

キャッシュ削除の方お願いします・・・。
kodai

 

Web制作会社の人
了解しました。

 

という様な無駄なコミュニケーションコストがかかってしまい、お互い良い印象が持ちにくくなります。

こういった対応をなくしてお互い気持ちよく仕事をするための解決策をまとめています。

 

キャッシュとは

キャッシュとは、データや情報を一時的に保存する仕組みのことです。

例えば、ウェブブラウザにおいて、ウェブサイトを表示する際に、キャッシュ機能が使われます。

一度表示したウェブサイトは、再度アクセスした場合に再度サーバーから情報を取得せず、一度取得したデータをキャッシュに保存しておきます。

そのため、再度アクセスした場合には、ロード時間が短縮され、快適に閲覧することができます。

 

キャッシュが効いて更新されない

キャッシュは一見ウェブサイトの表示速度を上げるメリットがあるものの、開発者側からすると自動で更新されないので厄介です。

こういった自動で更新されない部分を開発者、クライアント、閲覧者が快適に閲覧をできる様にするのが今回の目的となります。

 

CSSのキャッシュを削除する方法

CSSを読み込む際は下記の様に<link>タグを使用して読み込みます。

こちらの記述にはクエリ(パラメータ)は使用されていないCSSを読み込んでいる状態となります。

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

 

キャッシュの影響を受けない様にするためには

CSSを読み込んでいる<link>タグの.cssの後に「?ver=1.0.1

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

この記述をするだけで、ブラウザ側で別のファイルだと認識してくれます。

 

「?ver=1.0.1」をクエリと言い、ここを自由に変更することも可能です。

例えば、

「?20230515」など更新した日にちを入れることも可能です。(2023年5月15日に更新した場合)

この辺りは特に指定はなく、分かりやすくアレンジすることも可能です。

 

WordPressのキャッシュを削除する方法

WordPressでキャッシュの影響を受けない様にしていきます。

functions.php内で読み込んでいるcssファイル、jsファイルを先ほどと同じ要領でバージョン管理していきましょう。

バージョンを「1.0.1」の様に入れることでWordPressでもキャッシュの影響を受けなくてよくなります。

wp_enqueue_style( 'common-style', get_theme_file_uri('/asset/scss-common/common.css'), array('reset-style'), '1.0.1');
wp_enqueue_style( 'slick-style', get_theme_file_uri('/asset/plugin/slick/slick.css'), array(), '1.0.1');
wp_enqueue_script( 'slick-script', get_theme_file_uri('/asset/plugin/slick/slick.min.js'), array( 'jquery' ), '20220315', true );

この「1.0.1」の部分をスタイルを変更するたびに「1.0.2」「1.0.3」の様に変えると管理もしやすくなります。

 

ポイント

バージョンを「1.0.1」の部分は「1.0.2」「1.0.3」と変更しなくても、キャッシュの影響を受けない様になります。

 

まとめ

キャッシュ削除方法についてまとめました。

キャッシュ削除のお願いをなくすことで工数の削減ができます。

クライアント側、開発者側どちらもコミュニケーションコストが削減できるので気持ちよく作業していきましょう!

 

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作についてお気軽にお問い合わせください

-Web制作
-