キャッシュを残さずcssを反映する方法

お客さん

ここの背景ピンクにしてください！

~背景をピンクに修正~

うさぎ

できたよ〜〜URLはhttps://××××××.comで確認してねん

しばらくして………….

お客さん

あのぉ〜〜背景がピンクに変わってないようなんですが…(ゲホゲホ)

うさぎ

あ、それはたぶんキャッシュが残っていてですね、あーしてこーすれば正常に見れるようになりますよ〜〜

こんな状況ありますよね？

ありすぎますよね？？？

なんならお客さんじゃなくて一緒に働いている会社の人にも言われますよね？？

その度にキャッシュが残っているとかどうすればいいかとか教えるのって大変ですよね！

サイト制作に携わる人なら、

(Mac版Google Chrome)

⌘　＋　shift　＋　R

でちょちょいとキャッシュを残さずページを更新すると思いますが、

お客さんとかだとこの方法知っている人ってまずいないと思います。

そんなこんなでお客さんに修正後のサイトを見せるときに

こちら側であらかじめキャッシュを残さずに更新できるようにしてあげれば

冒頭のような状況は生まれないのではにでしょうか？？

ではどうするか！

行ってみましょ〜〜！

キャッシュを残さずcssを反映する方法

cssにパラメーターをつけてあげます。

以上！！！！！

具体的には以下のようなかんじ。

静的なサイトならHTMLにちょっとだけ付け足しておわり。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css?210901"><!-- ここに注目！！！ -->
  <title>Title</title>
</head>

注目すべきところは7行目。

?以降が大事です。

ちなみに210901は任意の文字列なのでなんでもOKです。

今回の場合は日付(21年09月01日)の意味で210901を指定しています。

自動でキャッシュを残さず更新してくれるようにする

上記の方法だと、修正を行いcssが更新されるたびにパラメーターを変更する必要性が出てきて面倒なので、自動で変更する方法ないかな….と考えました。

ということで、やってみた。

方針(時間を動的に付与すればいいのでは？！！)

PHPをつかう
ファイルが更新されたとき”だけ”その更新された時間を取得。
取得した時間をパラメーターとしてくっつける。

CSSのファイルが更新された時の時間を取得する

なんとPHPにはファイルが更新された時間を取得する関数があります。

使うPHP関数

filemtime

ファイルの更新時刻を取得する

参考PHP: filemtime – Manualu003cbru003ePHPマニュアル

fileetimeを使った実践的なcssの読み込み方

・filemtime関数のみ使った方法

・filemtimeとdate関数を組み合わせた方法

とにかく動的にパラメータがつけられれば良い場合（filemtime関数のみ使った方法）

ディレクトリの構成によってpathが人それぞれ異なるのでコピペの場合は気をつけてください。

WordPressの場合↓

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css?<?php echo filemtime( get_template_directory().'/css/style.css'); ?>">

出力結果

<link rel="stylesheet" href="(PATH)/css/style.css?1630925695">

php関数filemtimeはUnixタイムスタンプを返すので、?以降にcssの最終更新日時のタイムスタンプが出力されます。

視覚的にわかりやすい日付をパラメータにする書き方（filemtimeとdate関数を組み合わせた方法）

*ディレクトリの構成によってpathが人それぞれ異なるのでコピペの場合は気をつけてください。

WordPressの場合↓

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css?<?php echo date("ymd",filemtime( get_template_directory()."/css/style.css")); ?>">

出力結果

<link rel="stylesheet" href="(PATH)/css/style.css?210906">

date関数を使ったため、?以降が日付になっています。（210906→21年09月06日）

date関数を使っていれば、ブラウザでソースの確認をするときにいつがcssの最終更新日かがひと目でわかりますね。

おわりに

個人的にはできるだけこの方法は取り入れるべきだと思う(静的でもいいから)。

そもそもWebサイトを閲覧するときにわざわざキャッシュを削除する人はいない。

(閲覧者はstyleの更新があったかどうかなんて知る由もありませんしね。)

案件などお客さんがいる場合、たとえキャッシュのせいであってもお客さん的には「え・・・、スタイル崩れてるやんけ」とかマイナスの印象を受けてしまうに違いありません。

さらには、自社の案件や個人のサイトでもスタイルの崩れは直帰率や離脱率の上昇などにより機会損失を招く要因になりかねません。

対策方法がないならまだしも、対策方法があるならやったほうがいいに決まっている。

そうだろう？(｀・∀・´)