web-dev-qa-db-ja.com

ブラウザーのキャッシュを活用-期限切れまたはmax-age、最終変更またはetag

ブラウザのキャッシュを活用してページ速度を向上させるための正しい方法について、明確で実用的な説明を見つけるのが困難です。

このサイト によると：

すべてのキャッシュ可能なリソースに対して、ExpiresまたはCache-Control max-ageのいずれか、およびLast-ModifiedまたはETagのいずれかを指定することが重要です。 ExpiresとCache-Control：max-ageの両方を指定するか、Last-ModifiedとETagの両方を指定することは冗長です。

これは正しいです？その場合、Expiresまたはmax-ageを使用する必要がありますか？私はそれらの両方が何であるかについて一般的な理解を持っていると思いますが、通常どちらを使用するのが最善かを知りません。

Last-ModifiedまたはETagも実行する必要がある場合、それらのどれですか？私はLast-Modifiedを取得すると思いますが、このETagコンセプトについてはまだ非常に曖昧です。

また、ブラウザのキャッシュを有効にするファイルはどれですか？

cachingbrowser
53
Andy

これは正しいです？

はい、Expiresとmax-ageは同じことをしますが、2つの異なる方法です。 Last-ModifiedとEtagでも同じこと

もしそうなら、私は期限切れまたは最大年齢をすべきですか？

有効期限はユーザーの時計の精度に依存するため、ほとんどのブラウザーがHTTP/1.1をサポートしているため、ほとんどの場合は不適切な選択です。 max-ageを使用して、ファイルがその数秒間有効であることをブラウザに伝えます。たとえば、1日のキャッシュは次のようになります。

キャッシュ制御：max-age = 86400

両方のCache-ControlおよびExpiresが存在する、Cache-Controlが優先されます。 読み取り

Last-ModifiedまたはETagも実行する必要がある場合、どれを選択しますか？ Last-Modifiedになると思う

そうです、Last-Modifiedの方が優れているはずです。それは時間ですが、サーバーによって送信されます。したがって、ユーザーの時計に問題はありません。これが、Last-ModifiedがExpiresよりも優れている理由です。ブラウザは、前回ファイルを要求したときに送信したサーバーにLast-Modifiedを送信し、同じ場合、サーバーは空の応答"304 Not Modified"で応答します

また、Last-Modifiedには1秒のタイムウィンドウがあるため、ETagも有用であることに注意する必要があります。したがって、同じLast-Modified値を持つ2つの異なるソースを区別することはできません。 [2]

Etagは、ファイルの現在の状態の署名であるため、Last-Modifiedよりも多くの計算が必要です（md5 sumまたはCRC32と同様）。

また、ブラウザのキャッシュを有効にするファイルはどれですか？

すべてのファイルがキャッシングに役立ちます。 2つの異なるアプローチがあります。

  • with max-age：変更されないファイル（画像、CSS、javascript）に役立ちます。 max-age値が設定されている限り、ブラウザはサーバーにリクエストを送信しません。したがって、2回目の読み込みではページの読み込みが非常に高速になります。ファイルを更新する必要がある場合は、疑問符と変更日を追加するだけです（たとえば、/ image.png？20110602、またはより優れたプロキシキャッシュの場合は、/ 20110602/image.pngまたは/image.20110602.pngなど） 。この方法では、緊急の場合にファイルを期限切れにすることができます（ブラウザがmax-ageファイルを取得すると、サーバーにアクセスすることはほとんどないことに注意してください）。主な用途は、物事を高速化し、サーバーに送信されるリクエストを制限することです。
  • with Last-Modified：すべてのファイル（max-ageのファイルを含む）に設定できます。動的なページを使用している場合でも、ファイルの内容をしばらく（10分であっても）変更することはできないため、便利です。ここでの主な用途は、ブラウザに「このファイルを要求してください。新しいファイルがあれば、新しいファイルを送信します」ということです。そのため、ページのロードごとにリクエストが送信されますが、ファイルがすでに正常な場合（304 Not Modified）の答えは空なので、帯域幅を節約します。

キャッシュを増やすと、ページがより速く表示されます。ただし、キャッシュをフラッシュするのは難しいタスクなので、注意して使用してください。

多くの説明でこれをすべて学ぶには良い場所： http://www.mnot.net/cache_docs/

[2]：rfc7232 Etag https://tools.ietf.org/html/rfc7232#section-2.

70
Yvan