ウェブサイトをもっと速く、もっと快適にしたいなら「キャッシュ」の意味を理解することが重要です。
でも、「キャッシュってなに？」と疑問に思う方も多いはず。
この記事では、キャッシュの基本的な仕組みと設定方法を初心者向けに解説します。
ウェブサイトの高速化を実現するための第一歩を踏み出しましょう！
- キャッシュの基本
- HTTPキャッシュとサーバー内部キャッシュ
- キャッシュ設定方法
- キャッシュ期間の決め方
- サーバー内部キャッシュの活用
- 実践的なキャッシュ設定例
キャッシュの意味とは？
「キャッシュ」とは、ウェブサイトやアプリのデータを一時的に保存し、次回以降のアクセスで再利用する仕組みのことをいいます。
たとえば・・・
- 初回アクセス時：サーバーから必要なデータをすべてダウンロードします。
- 2回目以降：保存しておいたデータを使うため、スムーズに表示されます。
などが挙げられます。
まとめると、キャッシュは「同じデータを繰り返し取得しなくてもいいようにする仕組み」のことを指します。
キャッシュの仕組みをわかりやすく解説。
ひとことに「キャッシュ」といっても、大きく分けると２種類あります。
HTTPキャッシュ
ブラウザやサーバー間で、データ（画像やCSS、JavaScriptなど）を保存します。設定を通じて保存期間や条件を決めることができます。
サーバー内部キャッシュ
サーバー内で計算結果やデータを保存する仕組みです。これにより、計算やデータベースへのアクセスを省略し、処理を高速化します。
キャッシュを使う意味とメリット
キャッシュは、一時的にデータを保存しておくことを指します。
そして、キャッシュを設定すると、以下のようなメリットがあります。
1. ウェブサイトが速くなる
ダウンロードや計算を省略することで、表示速度が向上します。
2. サーバー負荷が軽減される
同じデータのリクエストが減るため、サーバーが効率的に動きます。
3. 通信量が削減される
ユーザーとサーバー間のデータ通信を減らせます。
上記のように一時的にデータを保存することで、結果として訪問者（ユーザー）の満足度向上につながります。
以降、簡単な設定方法を紹介していきます。
キャッシュ期間をどう決める？
キャッシュは、一時的に保存させるデータです。
ただ、むやみやたらな期間保存されてしまうと、Webサイトを更新さしても古いでデータが表示されてしまい、更新内容が表示されません。
そのため、キャッシュの保存期間は、適切に管理することが大切です。
以下、保存するデータの種類や更新頻度に応じて適切な期間をご紹介してきます。
あくまでも目安なので、ご自身の環境にあった期間を選んでください。
静的データ（CSS、画像、JavaScript）
保存期間：1週間～1年
→ 頻繁に更新されないため、長期間の保存が適しています。
長期間の保存が望ましいですが、更新データをアップしたさいに反映されないトラブルが発生する可能性があります。
長期間に設定している場合は、手動でキャッシュをクリアすることを忘れずに。
動的データ（HTML、APIレスポンス）
• 保存期間：数秒～数分
→ 頻繁に更新される情報のため、短期間が推奨されます。
サーバー内部キャッシュの例。
サーバー内部キャッシュは、主に以下の目的・方法で利用されています。
- ファイルキャッシュ：一度読み込んだファイルを保存。
- オペコードキャッシュ：プログラムの処理結果を保存。
- メモリキャッシュ：データベースの結果を保存して再利用。
これにより、データベースへのアクセス回数を減らし、ウェブアプリケーションを高速化します。
トラブルを防ぐキャッシュ設定のポイント！
前述しましたが、キャッシュ設定時は注意しないと、トラブルの元になります。
以下、発生頻度の高いものを記述しておきます。
よくある問題。
1. データが更新されない
• 解決策：ファイル名にバージョン番号を付ける（例: style.css?v=2）。
Web制作における「あるある」のひとつです。
ファイル名の後に「?=」と記述して任意の番号を記載しましょう。
これで、別ファイルという認識になるので、キャッシュを更新するためにデータが再読み込みされ、更新されます。
あとは、ブラウザのキャッシュクリアでもデータを再読み込みしてくれます。
毎回バーション設定が面倒な場合は、ブラウザのキャッシュクリア機能を試してみてください。
2. CSSや画像が読み込まれない
• 解決策：特定のファイルやフォルダをキャッシュ対象外にする設定を行う。
そもそも、キャッシュをさせない方法です。
確実に更新されますが、毎回読み込まれるので、データ量の多いファイルを読み込ませるのは避けた方が賢明です。
SEO的にも良くありません。
3. キャッシュが効きすぎる
• 解決策：no-cache や短期間の保存設定を利用。
HTTPキャッシュの設定方法。
HTTPキャッシュは、サーバーから送るヘッダーで管理します。
以下、例をご紹介します。
Cache-Control
- max-age=秒数: 保存期間を秒単位で指定。
- 例: Cache-Control: max-age=86400（24時間）。
- no-cache: サーバー確認後にキャッシュを使用。
- no-store: キャッシュを完全に無効化。
Expires
- 保存期限を日時で指定。
- 例: Expires: Fri, 01 Jan 2024 00:00:00 GMT
実践！キャッシュ設定の具体例を紹介！
静的データのキャッシュ設定（.htaccessの場合）
See the Pen Untitled by 1buk1 (@1buk1) on CodePen.
.htaccessに直接記述してください。
.htaccessが、存在しない場合は新規作成して設置してあげてください。
HTMLでリダイレクトする例
<meta http-equiv="refresh" content="0; URL=https://example.com">HTMLに直接記述することでも、キャッシュをコントロールできます。
簡単なメタタグを追加するだけなので、.htaccessよりも敷居が低設定できる反面、デメリットもあります。
それは、.htaccessに記述すると全てに適用されますが、HTMLは当然記述したページ、個別の設定となってしまうことです。
ページ数が多い場合は、.htaccessを活用する方がいいでしょう。
キャッシュの意味を理解してウェブサイトを快適にしよう！
キャッシュは、ウェブサイトの速度向上とサーバー負荷軽減に大きく貢献する仕組みです。
特に初心者の方は、まず以下のポイントから始めてみてください。
- 静的データには長期間のキャッシュ設定してみる。
- 動的データは短期間の設定で最新情報を提供する。
- トラブル防止のため、ファイル名にバージョンを付けキャッシュを管理する。
管理方法を間違えるとトラブルのもとですが、ポイントを押さえておけば怖くありません。
キャッシュの意味をしっかり理解して、あなたのサイトをもっと速く、もっと快適にしましょう！