【画像で解説】キャッシュとは？設定方法からブラウザ別の削除手順も紹介

キャッシュが残っているなど、何かと耳にする言葉だと思いますが、具体的にはキャッシュはどのような仕組みなのでしょうか。

ここでは、キャッシュのメリットや設定するポイントまで、キャッシュについてわかりやすく解説します。

キャッシュとは

キャッシュとは、ブラウザが一度表示したページのデータを保存する機能です。

ブラウザ側でCSSやJavaScript等を保存するため、再度ページにアクセスした際にデータを再利用し、初回アクセス時より高速にページを表示することが可能になります。キャッシュの有効期限を指定した場合、指定した期間内はキャッシュされている情報が強制的に反映されます。

なお、キャッシュと似た仕組みとして、Cookie（クッキー）があります。

CookieはWebサイトに訪問したユーザー側の情報を一時的に保存するものです。閲覧にログインが必要なWebサイトで、IDやPASSの入力を省略したり、ECサイトで購入したい商品をカートに残したまま買い物を続けたりといった機能のために使用されます。

キャッシュを設定する2つのメリット

キャッシュを設定するメリットには、下記の2つがあります。それぞれについて詳しく見ていきましょう。

メリット1　ユーザー体験の向上につながる

メリットの1つ目は、「ユーザー体験の向上につながる」ことです。キャッシュを使用すると、再び同じページにアクセスした際により速くページが表示され、ユーザーが情報収集する際のストレスを軽減できます。

サイトを運営する上で、できるだけユーザーのストレスを軽減するのは、重要な要素です。なぜなら、ユーザーはストレスを感じると、すぐにほかのページに移って（＝離脱）しまうからです。

離脱率が高くなると、CVRの低下につながるため、キャッシュを設定してユーザビリティの向上に努めることが重要です。

メリット2　通信量を抑制できる

キャッシュを使用することで、受信データを抑えられます。一度表示したページのデータはデバイス内に残るため、次から通信サーバーを介す必要がなくなるからです。

令和4年版 情報通信白書によると、パソコンよりスマートフォンを保有している人が多く、サイトの閲覧もスマートフォン経由の割合が増えています。

一方でスマートフォンは、契約した料金プランによって、一定の通信量を超えると通信速度が低下したり、月額料金が変動したりするケースがあります。

そこで、キャッシュによって、通信するデータ量を減らすことで、ユーザーのストレス軽減や出費の節約につながります。

キャッシュを設定する2つのデメリット

キャッシュを設定すると、デメリットが生じます。ここで、下記2つについて、詳しく見ていきます。

デメリット1　ユーザーに古い内容でページが表示されてしまう

キャッシュを取得した後に、ページの内容に変更が加えられた場合、再びアクセスしても、新しい内容が反映されないケースがあります。最新の内容を確認したい場合には、キャッシュを削除し、再度ページを読み込まなければなりません。

一方、キャッシュの影響を受けていることは、リアルタイムでサイト上に表示されないため、古い情報が表示されている状態に気が付かないユーザーもいます。

サイト内でキャッシュの削除を促していても、すべてのユーザーが読むとは限らないため、「表示に不具合がある」と問い合わせを受ける可能性があります。

デメリット2　端末が重くなってしまう

キャッシュは、取得するごとに使用している端末の中にデータとして蓄積されます。そのため、キャッシュ自体のデータ量が増えすぎると、読み込みに時間がかかり、端末の動作が重くなるデメリットが生まれます。

なおナイルでは、キャッシュの設定など、サイト運営で必要な基礎知識が学べる研修サービスをご提供しています。

資料ではSEO対策の研修を例にご紹介していますが、ヒアリングの上、貴社にとって最適な研修のご提案が可能です。まずはこちらから無料資料をご覧ください。

キャッシュの設定のポイント

キャッシュ設定のポイントを確認しておきましょう。

キャッシュの有効期限を設定する

キャッシュ時のデータを再利用してページを表示するため、キャッシュ後にページ内容が変更されると、最新の内容が正しく表示されない場合があります。

それを避けるため、サイトの更新頻度に合わせた適切なキャッシュの有効期限を設定することが望ましいです。具体的には、ニュースサイトのような日々更新するサービスでは有効期限を短く設定し、比較的更新頻度の低いコーポレートサイトのようなサイトは有効期限を長めに設定する、などが考えられます。

また.htaccessを利用して、ファイルタイプごとにキャッシュの有効期限を変えることができます。これを活用することで、同じサービス内でも、たとえばユーザー情報や商品マスタといった比較的スタティックな情報には長い有効期限を設ける、などの工夫が可能です。

キャッシュを最新状態にする

キャッシュの有効期限が設定されていないページの場合、ユーザー側でキャッシュした後にページ内容が変更されると、ユーザーはキャッシュを最新状態に更新しなければなりません。Webサイトの管理側としては、ページ内容を更新した後、ブラウザで該当ページを表示してキャッシュの影響を確認しましょう。

ページが正しく更新されていなかったら、リロードを実行します。リロードボタン（丸い矢印のボタン）は、多くのブラウザで左上部に位置しています。

リロードをしても正しく更新されない場合は、スーパーリロードを試してください。スーパーリロードは、キャッシュを無視してサーバーから強制的にファイルを呼び出す方法です。

スーパーリロードは、Windowsであれば、ctrlキーとF5キーの同時押し、もしくはShiftキーを押しながらブラウザのリロードボタンを押します。Macであれば、CommandキーとRキーの同時押し、もしくはCommandキーとShiftキーとRキーの同時押しです。

キャッシュの設定方法

サーバー側で.htaccessが設定可能な場合、ExpiresヘッダーやCache-Control ヘッダーを使って、キャッシュの有効期限を設定することができます。

Expiresヘッダーでは有効期限を年月日時で指定します。一方Cache-Controlヘッダーの場合は、日時指定ではなく、サーバーがレスポンスを受け取ってからキャッシュを削除するまでの期間を秒数で指定します。

また、.htaccessを設定せずとも、HTMLソースのhead内にmetaタグとしてcache-controlやexpireを設定することで、有効期限を設定することができます。

もしここまで読まれて、内容や設定方法が難しいようでしたら以下のバナーよりナイルへご相談ください。ナイルが力になります。

【ブラウザ別】キャッシュを削除する方法4選

キャッシュをクリア（削除）する方法は、ブラウザによって異なります。以下では、主なブラウザにおける、スマートフォンとパソコンでの削除方法を紹介します。

Google Chrome

パソコンでキャッシュを削除する

スマートフォンでキャッシュを削除する

Microsoft Edge

パソコンでキャッシュを削除する

スマートフォンでキャッシュを削除する

Safari

パソコンでキャッシュを削除する

スマートフォンでキャッシュを削除する

Firefox

パソコンでキャッシュを削除する

スマートフォンでキャッシュを削除する

補足

キャッシュの他にサイトの高速化について、さらに詳しく知りたい方はこちらもご参照ください。

参考：Webサイト高速化・表示速度改善のために知っておきたい基礎知識

またナイルではWEBサイトの運営に必要な「SEO」のノウハウを詰め込んだ資料を無料で公開しております。ご興味がある方はぜひ下記のボタンから無料ダウンロードしてください