WEBでもっと営業支援

新米WEB担当者のための
知恵袋

企業内のWEB担当者として知っておかなければいけない基礎知識や
日頃の業務で使えるTipsをシーエスアールSTAFFよりお届けします。

ブラウザの「キャッシュクリア」とは

ブラウザの「キャッシュクリア」とは
  • #ブラウザ
登録日：  最終更新日：

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

WEB担当者の方も「キャッシュ」って言葉、耳にしたことがありますよね？
ご存知の方も多いと思いますが、今回はキャッシュのクリアについてまとめておきます。

「キャッシュ」とは、WEBページを表示した時に、ページで使われている 画像やHTMLファイルなどのデータをローカル（使用しているパソコン）へ一時的に保存する仕組み です。

それによって、再度同じページへアクセスする際、サーバから再度データをダウンロードするのではなく、一時保存しておいたデータを使って表示することで、初回時よりも速く表示することができるメリットがあります。

図を使ってわかりやすく仕組みをご説明します。

まず、初回Webページを表示する際は、必要なファイルデータを全てダウンロードしながら、ぺージを表示します。その際にダウンロードしたデータはキャッシュとしてブラウザ内に一時保存されます。

cache1

 

そして、2回目以降、同じページを表示する際は、既にキャッシュが存在している場合、パソコン内に保存されているデータ（画像、HTMLファイルなど）を優先的に使用されるので、 ダウンロードすべきデータが初回アクセス時よりも減少し、表示スピードが速くなるのです 。

cache2

 

便利なキャッシュ機能ですが、保存されているキャッシュが 常時最新であるとは限らないので注意が必要です 。

下にあります図例のように、ダックスの紹介をパグの紹介に差し替える場合、写真画像のファイル名はdog.jpgのまま変えずにパグの写真に差し替えてサーバ更新すると、紹介文のテキストは変更が反映されてるのに写真はダックスのまま・・、という問題が発生するケースがあります。これは、紹介文の書かれているHTMLファイルのみ再取得されたが、写真画像は新しいファイルとして判断されず、古いキャッシュの画像（ダックス）のまま表示されていたという状況です。

cache3-2

WEB担当者も、サイトに新しいコンテンツを追加、ブラウザ確認してみたが、新コンテンツがどこにも見られなかった。CSSを追記・更新したのに、表示が崩れていた。JavaScriptで新しい効果や、制御を加えたのに、機能しなかった。このような経験、何度かあるかと思います。特に、 CSSやJavaScriptの更新時はキャッシュが強く影響する可能性 がありますので注意が必要です。

まずは、リロード

更新されていなかった場合、まず行うのは、リロードですよね。ブラウザの左上にある、円形の矢印ボタンです。これだけで正しく更新されることも少なくありません。

そして、スーパーリロード

キャッシュを無視し、 強制的に、画像やHTMLなどを再取得する方法 です。ショートカットキーを使うのでとても簡単ですので、リロードしても更新されていない場合にお試しください。
該当のぺージを開いた状態で、キーボードと一部ブラウザで以下の操作を行ってください。

Windows :「ctrl」+「F5」 ／  「Shift」 + 「リロード ボタン（ブラウザ） 」
Mac : 「Command」+「R」  ／   「Command」+「Shift」+「R」
※全てのパターンで同時押しが必須です。

スーパーリロードという名前からして、全てクリアになりそうなのですが、実際は、 スーパーリロードでも及ばないことがあります 。「動的に読み込まれた外部ファイル」などですが、その詳細については専門的な内容ですので、ここではとても簡単に申し上げておきます、「 キャッシュが強すぎてクリアできなかった 」という事です。

スーパーリロードでも更新されない可能性がある事を知っていただけたかと思いますので、もしそのような状況でこのぺージをご覧になっている方には以下で説明します、ブラウザのキャッシュクリア方法（手順）も試していただけたらと思います。

ブラウザのキャッシュクリア方法（手順）

キャッシュはご使用の各ブラウザから削除が可能です。またブラウザごとに方法は異なります。以下では、主要なPC、スマートフォンでの手順を紹介しております。

Microsoft Edge（マイクロソフト　エッジ）Windows10標準ブラウザ

  1. 画面右上のハブをクリックし、履歴タブをクリックし、「すべての履歴をクリア」をクリックします。
    img-edge1
  2. 閲覧データの消去 ウィンドウで、以下の操作を行います。
    「キャッシュされたデータとファイル」にチェックを入れます。
    ※その他の項目も必要に応じてチェックを入れてください。
    「クリア」ボタンをクリックします。
    img-edge2

Firefox（ファイアーフォックス）

  1. 右側にあります、メニューボタンをクリックし、メニューからオプションをクリックします。
    img-firefox1
  2. オプション設定画面が表示されたら、「プライバシーとセキュリティ」をクリックします。
    「キャッシュされたウェブページ」の「今すぐ消去」をクリックします。
    img-firefox2

Chrome（クローム）

  1. ウィンドウ右上の「Google Chrome の設定」ボタン／履歴と最近使ったタブ／履歴　をクリックします。
    img-chrome1
  2. 履歴が表示されたら、ウィンドウ上部にある「閲覧履歴データの消去」ボタンをクリックします。
    img-chrome2
  3. 閲覧履歴データを消去する ウィンドウが表示されたら、以下の操作を行います。
    • 「次の期間のアイテムを消去」で「すべて」をクリックします。
    • 「キャッシュされた画像とファイル」にチェックを入れます。
      ※ その他の項目は、必要に応じてチェックを入れてください。
    • 「データを消去」ボタンをクリックします。
      img-chrome3

Safari（サファリ）Mac標準ブラウザ

  1. メニューのSafariから環境設定をクリックします。
    sfari1
  2. 環境設定ウィンドウが表示されたら、詳細タブをクリックし、ウィンドウ下部の「メニューバーに”開発”メニューを表示」にチェックを入れ閉じます。
    img-safari2
  3. メニューに表示された開発をクリックし、「キャッシュを空にする」をクリックします。
    img-safari3

Safari（サファリ）iPhone標準ブラウザ

  1. iPhoneのホーム画面で「設定」をタップします。
    img-iphone1
  2. 「Safari」をタップします。
    img-iphone2
  3. 「履歴とWebサイトデータを消去」をタップします。
    img-iphone3
  4. 「履歴とデータを消去」をタップします。
    img-iphone4
  5. 「履歴とWebサイトデータを消去」がグレーに変わり、タップできなくなったら消去は完了です。
    img-iphone5

Chrome（クローム）Android標準ブラウザ

  1. 「設定」をタップします。
    img-ad1
  2. [プライバシー] をタップします。
    img-ad2
  3. [閲覧履歴データを消去する] をタップします。
    img-ad3
  4.  [キャッシュされた画像とファイル] の横にあるチェックボックスをオンにします。
    [データを消去] をタップします。
    img-ad4

キャッシュクリアする際の注意点

上述で、キャッシュを削除する必要性・方法はご理解いただけたかと思いますが、キャッシュクリア後、再度ページを表示する際に、画像等を再度読み込み、新規でキャッシュが作成されますので、一時的にデータ通信量が増加します。

例えば、外出時にスマートフォンでモバイルネットワーク通信を使用している状況で、キャッシュクリアをして、再読み込みする時に、データ量が大きくなり、表示までに時間を要する場合がありますので、ご注意ください。

まとめ

今回の記事では、ブラウザのキャッシュクリアのやり方を中心にお伝えしましたが、同様な操作はアプリの利用でも求められるものです。現代の生活では、WEB担当者に限らず、知っていて損は無い知識でございます。

「CSR」は、ホームページの表示が遅い、管理画面の操作が重いなどの問題を抱えていらっしゃる企業様からのお問い合わせも受け付けております。
「相談だけ・見積もりをお願いしたい」というご連絡もお気軽に！

ご質問、ご相談など、お気軽にお問い合わせください