web-dev-qa-db-ja.com

画像の最大年齢/キャッシュ制御が設定されていません

私のサイトを高速化するために Telium 以下に.htaccessを作成しました。私のサイトにはたくさんの大きな画像がありますので、ブラウザはできるだけキャッシュしたいです。ただし、（Chromeで）開発者ツールを開いた状態でWebサイトを参照すると、ページを更新するたびにページ上のすべての画像が再ダウンロードされていることがわかります。

私の.htaccessはWebサイトのルートにあり、次のようになります。

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch ".(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(js)$">
# was private  
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

以下は、更新するたびに取得される画像に関連付けられた応答ヘッダーの例です。

Accept-Ranges:bytes
Cache-Control:public
Connection:Keep-Alive
Content-Length:75149
Content-Type:image/jpeg
Date:Thu, 28 May 2015 12:56:46 GMT
ETag:"a9e0dd3-1258d-516beac088af3"
Expires:Sat, 27 Jun 2015 12:56:46 GMT
Keep-Alive:timeout=5
Last-Modified:Sat, 23 May 2015 12:11:09 GMT
Server:Apache/2.4.12 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4 mod_fcgid/2.3.10-dev

ブラウザーがこれらの画像（およびテキスト）をキャッシュするように変更する必要があるものを誰かが提案できますか？

更新：max-ageを追加した後の新しいヘッダーは次のとおりです。

Accept-Ranges:bytes
Cache-Control:public, max-age=2592000
Connection:Keep-Alive
Content-Length:118966
Content-Type:image/jpeg
Date:Thu, 28 May 2015 20:11:33 GMT
ETag:"a9e0de5-1d0b6-516bead2e811c"
Expires:Sat, 27 Jun 2015 20:11:33 GMT
Keep-Alive:timeout=5
Last-Modified:Sat, 23 May 2015 12:11:28 GMT
Server:Apache/2.4.12 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4 mod_fcgid/2.3.10-dev
imagescachebrowsers
1
TSG

変更する必要があります...

Header set Cache-Control "public"

...に...

Header set Cache-Control "max-age=x"

...ただし、xを、HTTP 1.1をサポートするブラウザーでアイテムをキャッシュする秒数に置き換えます。 「パブリック」を削除した理由は、パブリックがキャッシュが適用されるデフォルトのスコープであるためです（つまり、ブラウザとプロキシの間で適用されます）。

Richhallstokeが示唆するようなif-modifiedチェックとetagsは便利ですが、304応答を受信するためにサーバーにリクエストが引き続き送信されます。最大有効期間を設定してキャッシュする（expiresヘッダーまたはcache-controlのmax-ageを介して）ことは、定義された有効期間に達するか強制更新が行われるまで、ブラウザが可能な限りローカルキャッシュを使用することを意味します。これにより、クライアントの帯域幅がさらに節約されます。

0
Mike

本当に2つのオプションがあります：

  1. Last-ModifiedおよびETagヘッダーを削除すると、Webブラウザーは利用可能な新しいバージョンがあるかどうかを確認せず、指定したExpires日付/時刻のみを信頼します。

  2. HTTP_IF_MODIFIED_SINCEが最後に変更された日付スタンプに一致するかどうか、またはHTTP_IF_NONE_MATCHがETagに一致するかどうかを確認してから、要求されたリソースの代わりにHTTP/1.1 304 Not Modifiedヘッダーを返します。

    私はApache .htaccess設定ファイルで直接これを達成する方法を知りませんが、PHPでこれを行うことができます、私の答えのソースコードの例を参照してください： サービスを提供しようとするときのテストからの奇妙な結果高速画像ダウンロードページ…なぜ？

一部の人々は、ブラウザにキャッシュを管理させ、ヘッダー（オプション1）を取り除くのが最善であるという強い意見を持っていますが、Expiresの日付スタンプの前にウェブサイトを変更すると、リソースにアクセスする人は新しいHTMLに対して古いキャッシュバージョンを見ることができますページに必要なすべてのファイルを強制的に更新するためにCtrl + F5を押すまでコンテンツ。 HTTPプロトコルが効率的に使用されるように設計された方法は、ヘッダー（オプション2）をチェックし、新しいバージョンが利用可能な場合にのみコンテンツを返すことです。

各リソースリクエストが個別のネットワーク接続を必要とし、ブラウザーが同じサーバーへの同時接続を最大10個しか使用しない場合、ページの読み込み時間が遅延する可能性があることがわかりますが、Webサーバーが永続的な接続を許可するように構成されている場合次に、Webブラウザーはリソース要求を連結し、同じ接続で非常に迅速に要求を送信します。

0
richhallstoke