HTTPキャッシュにおけるCache-ControlとETagの理解

ブラウザのネットワークタブを開くと、よく Cache-Control と ETag が画像、スタイルシート、スクリプトのレスポンスヘッダーに含まれているのを目にするでしょう。多くの開発者がこれらの用語を認識していますが、キャッシュにおいてこれらがどのように連携して機能するかを説明できる人は多くありません。Webパフォーマンスが開発者にとって引き続き優先事項であるため、これらのヘッダーを理解することは重要です。

HTTPキャッシュとは？

HTTPキャッシュを使用すると、ブラウザやコンテンツ配信ネットワーク（CDN）は、画像やスクリプトなど、取得したレスポンスを保存できるようになります。同じリソースをサーバーに再度要求する代わりに、ブラウザは保存されたバージョンを再利用できます。これにより、ページの読み込み時間が短縮され、サーバーの負荷が軽減されます。ただし、適切な指示がない場合、ブラウザはキャッシュされたレスポンスがまだ有効かどうかを推測することがあり、不整合が発生する可能性があります。

これらのヘッダーが解決する課題

Cache-Control と ETag は、サーバーからの明確な指示を提供することで推測を排除するのに役立ちます。これらは2つの異なる疑問に答えます：

• Cache-Control: 「どれくらいの期間、私への問い合わせを完全に省略できますか？」
• ETag: 「その期間が過ぎた後、実際に何かが変更されたかどうかを低コストで確認するにはどうすればよいですか？」

Cache-Controlが制御するもの

この Cache-Control ヘッダーは、リソースをどのくらいの期間キャッシュできるかのルールを設定します。たとえば、サーバーが次のヘッダーを含むレスポンスを送信した場合：

Cache-Control: public, max-age=2592000, immutable

これは次のことを意味します：

• public: CDNなどの共有キャッシュを含め、あらゆるキャッシュによってリソースをキャッシュできます。
• max-age=2592000: リソースは30日間（2,592,000秒間）新鮮な状態を維持します。この間、ブラウザはサーバーに問い合わせる必要がありません。
• immutable: この鮮度期間中にコンテンツが変更されることはないため、ブラウザは確認なしでキャッシュされたバージョンを使用できます。

この immutable を使用することは、URLが常に同じコンテンツを指している場合にのみ安全です。

ETagが制御するもの

設定された max-age の期間が切れても、ブラウザはキャッシュされたコピーを破棄しません。代わりに、古いコピーがまだ有効かどうかをサーバーに確認します。ここで役立つのが ETag です。この ETag は一意の識別子であり、通常はコンテンツのハッシュ値です。コンテンツが変更されると、 ETag も変更されます。その仕組みは次のとおりです：

1. サーバーは ETagを返します。たとえば、 ETag: "abc123".
2. ブラウザはこの値を記憶します。キャッシュされたコピーの期限が切れると、次を指定してリクエストを送信します： If-None-Match: "abc123".
3. サーバーは現在の ETagを確認します。変更されていなければ、 304 Not Modifiedを返し、ブラウザはリソースを再ダウンロードすることなく、キャッシュされたコピーを引き続き使用できます。

このプロセスにより、帯域幅が節約され、読み込み時間が短縮されます。

一部のプロジェクトでETagが省略される理由

場合によっては、たとえば ogp-generator.php プロジェクトのように、 ETag の使用が不要に思えることもあります。このプロジェクトでは、記事の最終更新日時に基づいて各画像の一意のファイル名が生成されます。キャッシュバスティング（cache busting）として知られるこの手法により、記事が編集されるたびにURLが確実に変更されます。そのため、 ETag は不要になります。URL自体がコンテンツの鮮度を保証するためです。

まとめ

Cache-Control と ETag はどちらもWeb開発におけるキャッシュ管理に不可欠ですが、果たす役割は異なります。 Cache-Control はリソースをキャッシュできる期間を指定し、 ETag はキャッシュ期間の終了後にコンテンツが変更されたかどうかを確認するのに役立ちます。

メリット

• サーバーへのリクエスト数を減らし、Webパフォーマンスを向上させます。
• 不要なダウンロードを防ぐことで、帯域幅を節約します。
• ブラウザやCDNに明確なキャッシュ指示を提供します。

デメリット

• 設定を誤ると、古いコンテンツが配信されてしまう可能性があります。
• URLが正しいコンテンツを指していることを保証するために、慎重な管理が必要です。

注意点

本記事は教育目的で提供されています。実際のアプリケーションでは、必ずプレースホルダーの値を実際のデータに置き換えてください。また、依拠する前に、主張や内容を一次情報源と照らし合わせて検証してください。

よくある質問

• Cache-Controlとは何ですか？ — Cache-Controlは、リソースをどのくらいの期間、どのような条件でキャッシュできるかを指定するHTTPヘッダーです。
• ETagは何の略ですか？ — ETagはEntity Tag（エンティティタグ）の略で、リソースの特定のバージョンを一意に識別するための識別子です。
• Cache-Controlはどのようにパフォーマンスを向上させますか？ — ブラウザがリソースをキャッシュできるようにすることで、サーバーへの繰り返しのリクエストを減らします。
• ETagはいつ使うべきですか？ — 鮮度期間が過ぎた後、キャッシュされたリソースが変更されたかどうかを効率的に検証したい場合にETagを使用します。
• キャッシュバスティングとは何ですか？ — キャッシュバスティングとは、コンテンツが変更されるたびにリソースのURLを変更し、ユーザーが確実に最新のバージョンを受け取れるようにする手法です。
• ETagなしでCache-Controlを使用できますか？ — はい、Cache-Control単体で使用することもできますが、ETagを併用することでキャッシュ後のコンテンツの鮮度を確認する手段が得られます。

タグ

#http #caching #webdevelopment #performance #etag #cachecontrol #webdesign #frontend #backend #optimization