キャッシュ（一時保存データ）は使用者にやさしい機能
一度見たWEBサイトを高速で表示させるために使われる一時保存データを「キャッシュ」と呼びます。そのキャッシュのおかげで、WEBサイトへアクセスする事にかかるデータ通信量を減らしてくれています。
もしキャッシュがなければ、アクセスする毎にページを表示させるために必要な画像やアクションを付けるJavaScript、ページレイアウトを表示させるCSSなどのデータを全て読み込まなければなりません。
実際に1ページ表示させるために、どの程度の容量が使われているかというと、平均して4から5MB程度でしょうか・・・
スマートフォンなどの機器を使ってインターネットに接続する際、契約しているプランによって高速で通信できるデータ通信容量に制限があるかと思います。
毎回何MBも通信をしていては、スグに契約容量を超えてしまう事になってしまいますし、そもそもWEBサイトを表示させるまでに時間がかかりすぎてしまいます。
では、どのくらい表示までに時間がかかると「遅すぎる」と思われるのでしょうか？
実は検索結果などからWEBサイトを見る時に、2秒以内に表示させるべきという意見が多くあります。これは見る方が2秒、遅くとも3秒までしか待てないというデータがあるためです。
表示までに5秒以上かかってしまうと、ページを見ることなく検索一覧に戻ってしまう方がグンッ！と増えるそうです。
え？そんなことないよ？？と思いましたか？おもいましたよね？
実際に情報を検索して、自分がどのくらい待っていられるのかを思い返すと、ボタンを押してから何も変化がない時、1秒で「おかしいな」と考えてしまいます。2秒では「押せてなかったかな」と考えるでしょう。3秒では「遅いなぁ」と思ってしまっていました。
最近は高速で通信ができる環境がもはや当たり前になりつつあります。アクションを起こしたら、すぐに反応が返ってくるという事が当たり前になりつつあります。こういった背景から、待てる時間が減少してきているのでしょう。
WEBサイト制作をしていると、どうしても問題になる「スマートフォンのキャッシュ」
キャッシュ自体は、使用者にとっては便利な機能なのですが、情報を提供する側からすると、厄介な物となる場合があります。それは「更新した画像が差し替わらない」という問題です。
ブラウザにある矢印がクルッと丸まっているアイコン。これをタップすると表示しているWEBページを更新してくれます。
変更した画像もこの操作で読み込めばOK～～～とはならない場合があるのです。
それは「容量の大きな画像を設置した場合」です。
キャッシュはページの表示を早くするため、1度表示させた画像などのファイルを自身に保存させる機能です。なのでいくら新しい画像ファイルがあったとしても、ファイル名が同じだと、自身に保存済みの画像を優先的に表示させるために、差し替わらないという現象が起こってしまいがちです。
再度読み込みなおしをさせるには、一度インターネットブラウザのアプリ（SafariやGoogle Choromeなど）を終了させるか、それでもダメであれば設定からブラウザのキャッシュを削除するといった操作が必要です。
こんな操作方法を誰もが知っているわけもなく、また操作自体も面倒です。
重ねてブラウザのキャッシュを削除する際の操作を間違えると、記憶させていたパスワードがクリアされてしまうといった事も起こるので、できれば避けたい操作です。
面倒な操作を求めることなく、確実に新しい画像を読み込んで欲しい時にはコレ
どうしても最新の画像（情報）を見てもらわないと、意味がない！！という事もありますよね。そんな確実に読みこんで欲しい画像は
・ファイル名を変える
・URLパラメータを使う
などの工夫が必要です。
ファイル自体の名前を変えてあげる事で、ブラウザがHTMLを再読み込みした時、参照しに行く画像ファイルが変わるので、キャッシュを無視して新しい物を見に行ってくれます。
快適な閲覧をしてもらう為にできること
ブラウザのキャッシュによって、2回目以降の表示までに必要な時間を大幅に減らすことができます。ですが、1回目は全てのファイルを読み込まなければならないので、どうしても時間がかかってしまいます。
待てる時間は3秒程度というデータもあるので、大きすぎる画像は配置しないといった設計段階での配慮が必要でしょう。
ですが端末画面のサイズアップ・高解像度化によって、大きな写真を配置しないと、他と比べて見劣りしてしまうケースがあるので難しいポイントです。
そういった際は、表示していない画像はJavaScriptを使って読み込みを遅延させるといった工夫で、ひとまずは解決できます。
WEBサイトは見られる事で初めて機能します。
この情報を見せたい！この画像は綺麗に見せたい！といった作り手の想いにプラスして、どうやったら快適にWEBサイトを閲覧してもらえるか、欲しい情報を引き出すことができるのかを考えて設計しましょう。
