こんにちにはカササギです。
久しぶりの投稿になります。
時間が出来たなーと思ったら、企画書や仕様書などを作っていてバタバタしてました。
また一段落したので、一度ブログの記事を書き溜めてしまおうと、筆を取らせて頂きました。キーボードですが。
さて、今回の記事はタイトル通りCSSを更新した際のキャッシュ問題についてです。
よく聞く声としては修正が終わったあとにクライアント様に確認依頼を出したときに、「レイアウトが崩れている」や「変わっていない」など耳にするかと思います。
そんなとき我々は「ブラウザの更新ボタンを押してください」と言ってしまいがちです。
キャッシュの自動で読み直す対策をしているのであれば、この一言でほぼ解決するかと思いますが、対策していない場合は「更新ボタン」を押しても変わらないことがほとんどです。
だからと言って「ブラウザのキャッシュを一度クリアしてください」とお願いしても、お客様に取っては何のことか分からなかったり、キャッシュをクリアすることによって他に履歴やパスワードなども削除してしまう可能性がある少し危険な行為になってしまいす。
このようなケースを防止するために、CSSファイルを更新したときにだけ、最新のCSSを読み直させるための対策を今回はご紹介したいと思います。
キャッシュとは
ブラウザのキャッシュは、ウェブページの要素やファイルを一時的に保存するためのストレージ領域です。ウェブページを表示する際に、ブラウザはそのページに関連する画像、スタイルシート、JavaScriptファイルなどをダウンロードし、キャッシュに保存します。次回同じウェブページにアクセスする際には、キャッシュからファイルを取得することで、ページの読み込み速度を向上させることができます。
キャッシュの種類
ちなみにですが、このキャッシュ
- ブラザキャッシュ
- サーバーキャッシュ
と種類がありますが、今回はブラザキャッシュを削除する方法のご紹介となります。
サーバーキャッシュに関しては、お使いのサーバーによって方法が異なりますし、ワードプレスを使っている場合はご利用のキャッシュ系プラグインの設定でも変わってきますので今回はご紹介しない形となります。
キャッシュクリア方法
比較的簡単な方法としましては、CSSファイル名の後ろにパラメーターを加える方法になります。
<link type="text/css" rel="stylesheet" href="pc.css?000000">ファイル名の後ろに「?000000」と追加するだけでキャッシュクリア（スーパーリロード）などせずにCSSを読み込ませることが出来ます。
? 000000の中の文字は一般的には日付だったり1.01などのバージョンだったりします。
<link type="text/css" rel="stylesheet" href="pc.css?202301011230">私は上記の通り更新した日付と時間（2023(年)01(月)01日12(時)30(分)）にしております。
CSSをアプロードする度にクエリを書き換えるデメリットはありますが、お客様やユーザーの負担にならないので未対応の方はぜひ検討してみてください！
WordPressをご利用の場合
WordPressで運営している場合、パラメーターを自動で生成することも出来ます。
手動でパラメーターを編集するデメリットがなくなるので、おすすめです。
テーマ直下
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?<?php echo filemtime( get_stylesheet_directory() . '/style.css'); ?>">サブディレクトリ
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/common.css?<?php echo filemtime( get_stylesheet_directory() . '/css/common.css'); ?>">filemtimeの関数で更新ファイルの読み込みパス末尾にパラメータで付与するので、スタイルシートが更新されたときだけ、パラメーターが書き換わるようになりのでおすすめです。
まとめ
CSSを更新する際に発生するキャッシュ問題について今回は紹介させていただきました。
こちらの対応をすれば、クライアント様に「キャッシュを削除してください」や「プライベートモードで確認してください」などのお願いをすることがなくなるかと思います。
CSSのキャッシュ問題でお困りの方は一度試してみてはいかがでしょうか？
