同じホームページを2回目以降開いたとき、表示が速くなるのはブラウザキャッシュという仕組みが働いているからです。ブラウザキャッシュは、過去に訪れたホームページのデータを一時的にブラウザに保存しておく機能で、表示速度の向上や通信量の節約に役立つ一方、更新後に古い内容が表示されるトラブルの原因になることもあります。
この記事では、ブラウザキャッシュの基本とメリット・デメリット、クリア方法を解説します。
ブラウザキャッシュとは
ブラウザキャッシュとは、過去に訪れたホームページのデータを一時的にブラウザに保存しておく仕組みのことです。
通常、ホームページにアクセスするとブラウザがサーバーにリクエストを送り、サーバーからHTML・CSS・画像・JavaScriptなどのデータを受け取って画面に表示します。しかし、一度訪れたホームページであれば、これらのデータがすでにブラウザに保存されているため、サーバーへのリクエストを省いてデータを読み込むことができます。
ブラウザキャッシュと混同しやすい用語
ブラウザキャッシュと似た言葉に、サーバーキャッシュとCookieがあります。それぞれ役割が異なるため、違いを把握しておきましょう。
サーバーキャッシュとの違い
サーバーキャッシュとは、Webサーバー側でホームページの表示データを一時的に保存しておく仕組みです。ブラウザキャッシュがユーザーの端末に保存されるのに対し、サーバーキャッシュはサーバー側に保存される点が大きな違いです。
WordPressではW3 Total CacheやWP Super Cacheといったプラグインでサーバーキャッシュを管理できます。ホームページを更新してもサーバーキャッシュが残っていると内容が反映されないことがあるため、更新後はサーバーキャッシュのクリアも必要になる場合があります。
クッキーとの違い
Cookieとは、ホームページがユーザーのブラウザに保存する小さなデータファイルのことです。ログイン状態の維持やショッピングカートの中身の保持など、ユーザーごとの情報を記憶するために使われます。
ブラウザキャッシュがホームページの表示データを保存するのに対し、CookieはユーザーのIDや設定といった個人に紐づく情報を保存する点が異なります。
ブラウザキャッシュのメリット
ブラウザキャッシュを利用することで、ホームページの閲覧時に2つのメリットがあります。
ページの表示速度が上がる
ブラウザキャッシュに保存されたデータは、2回目以降のアクセス時にサーバーから取得する必要がなくなります。
画像やCSS、JavaScriptといったファイルをローカルから直接読み込むため、ページがすばやく表示されます。特に画像を多く使用しているホームページほどブラウザキャッシュの効果が大きく、リピーターに快適な閲覧環境を提供できます。
データ通信量を抑えられる
ブラウザキャッシュに保存されたデータはサーバーから再ダウンロードする必要がないため、アクセスのたびに発生する通信量を抑えられます。
スマートフォンなど月々のデータ通信量に上限がある環境では、無駄な通信を減らせます。また、サーバーへのリクエスト数が減ることで、サーバーへの負荷軽減にもつながります。
ブラウザキャッシュのデメリット
ブラウザキャッシュは便利な機能ですが、2つのデメリットも把握しておく必要があります。
更新後に古い情報が表示されることがある
ホームページを更新しても、ブラウザキャッシュに古いデータが残っていると、更新前の内容がそのまま表示されることがあります。
ホームページ制作会社に更新を依頼した際に変わっていないと感じた場合、キャッシュが原因であるケースがほとんどです。この場合はブラウザキャッシュをクリアすることで、最新の内容が表示されるようになります。
溜まりすぎると動作が重くなる
ブラウザキャッシュは、さまざまなホームページを閲覧するたびに自動的に蓄積されていきます。
データが増えすぎると読み込みに支障をきたし、ブラウザの動作が重くなる原因になります。パソコンやスマートフォンの動作が遅くなったと感じたときは、ブラウザキャッシュのクリアを試してみると改善される場合があります。
ホームページ運営者が知っておきたいブラウザキャッシュを制御する方法
ブラウザキャッシュはユーザーが削除するものですが、ホームページ運営者側でもキャッシュの動作をある程度制御できます。代表的な方法が以下の2つです。
有効期限を設定する方法
サーバーの設定でCache-ControlというHTTPヘッダーを使うと、ブラウザキャッシュの有効期限をファイル単位で指定できます。
たとえば更新頻度の低い画像には1ヶ月、CSSには1週間といった具合に、ファイルの種類ごとに異なる有効期限を設定することが可能です。期限が切れると自動的にサーバーから最新データを取得しにいくため、表示速度を保ちながら適切なタイミングで内容を更新できます。
常に最新のコンテンツを表示する方法
ホームページのデザインや機能を変更した際、古いキャッシュが残っているとユーザーに更新前の内容が表示されてしまいます。これを防ぐ方法がキャッシュバスティングです。
たとえば「style.css?v=2」のようにURLの?以降にバージョン番号を付加します。?以降はサーバー側では無視されるため、実際に読み込まれるファイルはstyle.cssのままです。しかしブラウザはURL全体をキャッシュの識別に使うため、?v=2と?v=3では別のURLとして扱われ、古いキャッシュを使わずサーバーから最新データを取得します。
ファイル名を変える必要はなく、?以降のバージョン番号を更新するだけで対応できます。
ブラウザキャッシュをクリアする方法
ブラウザキャッシュのクリア方法は端末によって異なります。PCはスーパーリロードで手軽に対応できますが、iPhoneとiPadは設定アプリからキャッシュを削除する必要があります。それぞれの手順を紹介します。
Windows PC
キーボードの「Ctrl」＋「Shift」＋「R」または「Ctrl」＋「F5」を同時に押すだけで実行できます。Chrome・Edge・Firefoxなど主要なブラウザで共通して使えます。
Mac PC
ChromeやFirefoxは「Command」＋「Shift」＋「R」でスーパーリロードできます。
SafariはこのショートカットがリーダービューになるためChrome系と同じ方法は使えません。Safariの場合は、開発メニューから「キャッシュを空にする」を選択してから「Command」＋「R」で再読み込みしてください。なお開発メニューが表示されていない場合は、Safariの設定から詳細タブを開き「Webデベロッパ用の機能を表示」にチェックを入れると表示されます。
iPhoneとiPad Safari
iPhoneとiPadにはスーパーリロード機能がないため、設定アプリからキャッシュを削除します。
- ホーム画面から設定アプリを開く
- Safariをタップ
- 「履歴とWebサイトデータを消去」をタップ
- 「履歴とデータを消去」をタップして完了
なお、この操作では閲覧履歴やCookieも同時に削除されます。
まとめ
ブラウザキャッシュとは、過去に訪れたホームページのデータを一時的にブラウザに保存しておく仕組みです。ページの表示速度向上やデータ通信量の節約といったメリットがある一方、更新後に古い情報が表示されたり、溜まりすぎると動作が重くなったりするデメリットもあります。
ホームページ運営者側でもCache-Controlヘッダーによる有効期限の設定やキャッシュバスティングを活用することで、ユーザーに常に最新のコンテンツを届けることができます。ブラウザキャッシュのクリアはPCであればスーパーリロードで手軽に対応でき、iPhoneやiPadは設定アプリから削除が可能です。
ホームページの表示がおかしいと感じたときは、まずブラウザキャッシュのクリアを試してみてください。
