小さな画像(アイコン)がたくさんあるページがあります。chromeで使用すると、ページがリロードされるたびに、chromeはif-modified-sinceヘッダーを使用してサーバーに各アイコンを要求します。
すべてのアイコンには、expiresヘッダーとmax-ageヘッダーが付いています。Firefoxはキャッシュから画像をロードします。
なぜクロムがそれをしているのですか、そしてどうすればそれを防ぐことができますか?
ありがとう
小さな画像(アイコン)がたくさんあるページがあります。chromeで使用すると、ページがリロードされるたびに、chromeはif-modified-sinceヘッダーを使用してサーバーに各アイコンを要求します。
すべてのアイコンには、expiresヘッダーとmax-ageヘッダーが付いています。Firefoxはキャッシュから画像をロードします。
なぜクロムがそれをしているのですか、そしてどうすればそれを防ぐことができますか?
ありがとう
リクエストヘッダーを確認しましたか?
「'Cache-Control' は常に 'max-age=0' に設定されます。Enter、f5、または ctrl+f5 のいずれを押しても問題ありません。ただし、Chrome を起動して URL を入力し、Enter を押した場合を除きます。」
http://techblog.tilllate.com/2008/11/14/clientside-cache-control/
クロムでは、ページを更新するか、単にアクセスするかが重要です。
更新すると、Chrome はファイルが既にキャッシュされているかどうかに関係なく、各ファイルに対してサーバーに ping を送信します。ファイルが変更されていない場合は、304 Not Modified応答が表示されます。ファイルが変更されている場合は、代わりに200 OK応答が表示されます。
更新しない場合、キャッシュされたファイルは200 OKステータスになりますが、ネットワーク パネルのサイズ/コンテンツ列を見ると(キャッシュから)と表示されます。
Expires
RFC で有効な日付でない場合、Google Chrome はヘッダーを無視します。たとえば、日は常に 2 桁で指定する必要があります。5 月 1 日は、「5 月 1 日」(「5 月 1 日」ではなく)などに設定する必要があります。Firefox はそれらを受け入れます。これは、ヘッダー値自体ではなく、ブラウザー (この場合は Chrome) に問題があるとユーザーを誤解させます。
そのため、有効期限を手動で設定している場合 (mod_expires
または実際の日付を計算するのに似たものを使用していない場合)、REDbotを使用して静的ファイル ヘッダーを確認することをお勧めします。
Chrome のインスペクターを使った簡単な実験では、これはページが正常に読み込まれたときではなく、ページが再読み込みされたときにのみ発生することが示されています。Chrome はキャッシュを更新しようとしています。考えてみてください —Expires
およびMax-Age
を数十年に設定した場合、ブラウザーにそのリソースをキャッシュし、更新されたかどうかを確認しないように要求していませんか? 可能な場合はリソースをキャッシュしていますが、ページを更新する必要がある場合は、ページ全体が更新されるようにしたいと考えています。他のブラウザも確かにそれを行います (ただし、リフレッシュするまでの待機時間のオプションがあるものもあります)。
最新のブラウザーとサーバーのおかげで、多数のアイコンの更新が思ったほど遅くはありません。リクエストはパイプライン化されて、複数のラウンドトリップ遅延が解消されます。If-Modified-Since
ヘッダーの全体的な目的は、サーバーがタイムスタンプとタイムスタンプを比較できるようにすることです。 「Not Modified」ステータス コードを返します。これは、ページが必要とするすべてのリソースに対して発生しますが、ブラウザは一度にすべてのリクエストを作成し、変更されていないことを確認できます。
とはいえ、これを簡単にするためにできることがいくつかあります。
Chrome のインスペクターで、リソース タブを使用して、リソースがどのように読み込まれているかを確認します。リクエスト ヘッダーがない場合、リソースはキャッシュから直接読み込まれています。が表示された場合304 Not Modified
、リソースは更新されましたが、再度ダウンロードする必要はありませんでした。が表示された場合は200 OK
、再度ダウンロードされています。
Chrome のインスペクターで、監査タブを使用して、キャッシュ ヘッダーの一部が最適でない場合に備えて、リソースのキャッシュ可能性についての考え方を確認します。
これらのIf-Modified-Since
リクエストと 304 レスポンスはすべて、ヘッダーだけで構成されている場合でも合計できます。画像をスプライトに結合して、リクエストの数を減らします。
最新のブラウザーは、キャッシュ動作により、より複雑でインテリジェントになっています。いくつかの例と詳細については、http://blogs.msdn.com/b/ie/archive/2010/07/14/caching-improvements-in-internet-explorer-9.aspx を参照してください。
フロリアンが言うように、それと戦わないでください:-)
画像が最後に要求されてから変更されたかどうかをサーバーに問い合わせることで、古いキャッシュを回避しようとしているようです。良いことのように聞こえますが、防止したいことではありません。
Apache を実行していると仮定すると、特定のファイル タイプおよび/またはファイル システム内の場所に対してキャッシュの有効期間を明示的に設定することができます。
<FilesMatch ".(jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=604800, public" # 7 days
</FilesMatch>
または何かのような
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
通常、1 つのディレクトリで使用するファイルの種類をグループ化し、それに応じて有効期間を設定します。
ブラウザは、この有効期限が切れるまでファイルをまったく要求すべきではありませんが、常にそれを受け入れるとは限りません。Last-Modified ヘッダーと ETag ヘッダーを使いたい/必要があるかもしれません。これについては、ウェブ上に多くの良い情報があります。