技術Note

WebディレクションNote「ブラウザキャッシュ」のばかやろう

こんにちは。ホームページの運用や更新保守を行っている会社のWebディレクターさんはたびたびブラウザキャッシュに悩まされていませんか?

ブラウザキャッシュとは?

パソコンやスマートフォンのブラウザは、ホームページの表示速度を早くするために、一定期間、一度開いたページの画像やCSS、JSファイルなどを端末内に保存しています。

そのため、同一名称でファイルをアップすると、あれ変わってない?!ってなことになるんです。
パソコンは画面更新だけで解決する場合もありますが、特にスマートフォンはキャッシュが強いため、この問題がよく発生します。

プロジェクトの人間関係に傷を入れかねないブラウザキャッシュ

例えば現場の方がファイルをアップ〜営業さんが特に確認せずお客様に報告〜お客様変わってないよ!と営業さん怒られる〜営業さん現場の方に怒る〜現場の方「いやいやキャッシュです」みたいなことってありませんか?

さらに上記のやりとりで実はキャッシュでなかったパターンなど最悪ですね(笑
些細なことではあるんですが、やり取りの中でコミュニケーションに失敗すると特にお客様との間で関係が悪くなってしまうこともあると思うんです。たかがキャッシュ、されどキャッシュです。

ブラウザキャッシュのトラブルを事前に防止しよう!

いくつかトラブルを防ぐ方法がありますよ。

1)パラメーターを付与する

たとえば「/image.jpg」を「/image.jpg?20220801」のようにソースにパラメーターを付与して更新すればブラウザは別の画像と認識するので、確実に更新内容が反映されます。反映されてない!となっても画面を更新してもらえれば確実に反映するのでディレクションもやりやすいですね。

デメリットはいちいちパラメーターをふるのが手間だったり、抜けてしまうこともあることでしょうか。うちではキャッシュの強いCSSファイルを更新する時や、確実にお客様の環境で更新させたい時(お客様がキャッシュの説明を理解できない場合や期間指定のあるキャンペーン更新時など)にこの方法を用います。

2)あらかじめお客様報告時にキャッシュの説明を行う

例えば私は報告の際に下記の文面を添えます。コピペで使ってもらっても大丈夫ですよ(笑

//////////////////

普段からホームページを閲覧されているPCやスマホですと、
ブラウザのキャッシュの影響で更新が反映されない場合がございます。
その際はお手数ですが下記の方法で更新をお試しください。
(はじめてアクセスされる一般のお客様にはきちんと反映されています)

●PC(Mac)の場合
commandキーを押しながらブラウザの更新ボタン

●PC(Windows)の場合
ctrlキーを押しながらF5キー

●スマホ(iPhone)の場合
設定 ⇒ Safari ⇒ 履歴とWebサイトデータを消去

●スマホ(Android)の場合
Chrome右上の…のアイコンをクリック ⇒ 履歴 ⇒ 履歴データを削除

//////////////////

スマホもPCみたいにブラウザ開いたままコマンド入力で消せたらいいんですけどね。なんでこんな面倒な仕様なんだ〜

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

カテゴリー

最近の投稿

アーカイブ