ブラウザのキャッシュについて

こんにちは。webデザイナーの小川です。緊急事態宣言が解除されコロナも少し落ち着いてきたとはいえ、夏に向けての熱中症対策、第2波への対策等々まだまだ油断はできませんが、みなさん頑張って乗り越えていきましょう。

さて、今回はブラウザのキャッシュについてです。皆さんはキャッシュというものはご存じでしょうか？ご存じない方はもちろん、知ってるよという方も再確認のためにもご一読いただければと思います。

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

キャッシュとは、検索等でwebページを閲覧した時に、そのwebページのデータをパソコン内部に一時的に記憶することで、次に同じURLのwebページを閲覧する際に表示速度を早くする記憶機能のことです。

例えば、あるwebページを初めてアクセスした際、必要なデータを全てダウンロードしながら、ぺージの表示をします。その際、ダウンロードしたデータはキャッシュとして一時的に保存されます。
そして、2回目以降、同じwebページを表示する際は、既にキャッシュが存在している場合、保存されているデータ（HTMLファイル、画像など）を優先的に使用するので、ダウンロードすべきデータ量が初回のアクセス時よりも減少し、表示スピードが速くなるのです。

このように便利なキャッシュ機能ですが、webページの情報が新しいものに更新されたにも関わらず、パソコンの方には以前に記憶していたキャッシュの古い情報が表示されでしまうことがあるので注意が必要です。

ブラウザのキャッシュが残っており、古い情報が表示されてしまうケース

下記の図のように、「画像A」を「画像B」に差し替える場合、画像のファイル名は「image.jpg」のまま変えずに「画像A」に差し替えてサーバ更新すると、キャッシュが残っていたブラウザでは「画像A」のまま、、、という問題が発生するケースがあります。これは、「image.jpg」が新しいファイルとして判断されず、古いキャッシュの画像「画像A」のまま表示されていたという状況です。

※ブラウザによって期間は異なりますが、キャッシュは自然と消えて新しい情報に更新されます。

他にもサイトに新しいコンテンツを追加し、ブラウザ確認してみたものの新しいコンテンツがどこにも見当たらなかった。CSSを更新したのに、表示が崩れていた。JavaScriptで新しい効果や、制御を加えたのに、機能していない。と言ったケースも起こり得ます。画像、CSSやJavaScriptの更新時はキャッシュが残ったままになりやすいので注意が必要です。

そのため、情報更新の際の確認時に「情報が更新されていない」と思われることもあります。
そのような場合は、キャッシュの削除をしてもらわなければならないという面倒な一面もあります。

ブラウザのキャッシュの削除方法

リロード
情報の更新がされていなかった場合、まず行うのは、リロードです。ブラウザの左上にある、円形の矢印ボタンです。ショートカットキーではWindowsの場合「F5」、Macの場合「Command」+「R」
リロードを数回するだけで正しく更新されることも少なくありません。

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

Windowsの場合
「ctrl」+「F5」または「ctrl」+「リロードボタン(ブラウザ)」

Macの場合
「Command」+「R」または「Command」+「Shift」+「R」

※全てのパターンで同時押しが必須です。

シークレットウィンドウ、プライベートウィンドウで開く
こちらはキャッシュの削除とは少し違いますが、正しい情報の更新を行うにはシークレットウィンドウやプライベートウィンドウで擬似的にブラウザのユーザーを切り替えキャッシュを保存していない状態へと持っていく方法です。ただ、注意が必要なのが、シークレットウィンドウやプライベートウィンドウの状態でもキャッシュは保存されるので、通常の状況と同じく正しく情報が更新されないということが起こり得ます。そう言った場合は通常時と同様にキャッシュの削除を行うと正しい情報へと更新されます。

何かおかしいなと思ったらページのキャッシュのクリアを！

よく訪問するwebページを閲覧している中で、何かおかしいなと感じたら、そのページを離れる前に、一度リロードを試してみるのはいかがでしょうか。いち早くそのページの情報に触れられるかもしれません。

アドコミでは、軽度の更新作業はからサイトリニューアルまでまで、幅広く対応しております。
部分的に更新をしてほしい、ページの追加をして欲しい等、ご要望があればまずご連絡ください。

Twitter・Facebookでもブログ更新情報＋αを配信中！フォローお願いします！
Follow @ad_comi

インスタもやってます。こちらもぜひ！