えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック

ブラウザキャッシュに負けないサイト制作(WordPress編)

20180608_03.png

ページ更新が反映されない?ブラウザキャッシュを確認しよう!でもにゃんぺろうが頭を悩ませていたように、修正作業の確認をお客様にしていただいても更新が反映されていないというこもしばしば。。。
このやりとりだけでもお客様に余計な手間をかけさせてしまい、バカにならない程時間をロスしてしまう。
そして何よりの問題が、お客様のその先のお客様(エンドユーザー)にも影響が出てしまうこと。
エンドユーザーがキャッシュを保持した状態でサイトを閲覧しても最新の状態で表示されないからです。

今回は制作部として、この問題を回避するための取り組みを紹介しようと思います。

  • 1.画像ファイルやPDFファイルに同じ名前を使用しない。
  • 2.cssを更新する日時でヴァージョン管理する

1.画像ファイルやPDFファイルに同じ名前を使用しない

これはWordPressに限定した話ではないですが、画像やPDFの変更があった場合にファイル名を変えずに新しいファイルをアップロードしても、キャッシュを保持したブラウザは自分のPCに一時保存されている古い画像を表示してしまうのです。
制作側としてはありがた迷惑な話と思ってしまいがちですが。。。
一度読み込んだ画像データを保持しておくことで再び同じページを訪れた際、ネットワークを介せず自分のPCに一時保存されているデータを見るので表示スピードが早くなるわけです。
ならば新しい画像には新しいファイル名をつける。
これでブラウザは常に新しい画像を見に行ってくれるようになります。
名前の管理は侮れません。

2.cssを更新する日時でヴァージョン管理する

WordPressでcssを呼び出す際に使用する関数「wp_enqueue_style()」
通常「wp_enqueue_style()」を使ってcssを読み込むとWordPressのヴァージョンがパラメータとしてファイル名の末尾にくっついてきます。
20180608.png
「wp_enqueue_style()」の第四引数には任意の文字列を指定することができます。
つまり第四引数にcssの更新日時を渡すことでcssのヴァージョンも更新することができるというわけです。

運用段階であれば、日にちまでの指定で十分だと思います。
開発段階ではcssファイルの更新は頻繁に行うので更新日時(秒数まで)を設定するとよりキャッシュの影響を受けにくくなります。

20180608_02.png

キャッシュに翻弄される日々とおさらばです!

ここで紹介した方法を徹底するだけでもかなりの予防策になると思います。
お客様に無駄なストレスを与えることのないサイト制作を心がけて参りたいと思います。

えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック