web-dev-qa-db-ja.com

Apacheを使用したWebサイト画像キャッシング

Apacheで静的コンテンツを取得して{ブラウザごとにキャッシュ}し、{新鮮さをチェックする{リクエストごと}}ではないようにするにはどうすればよいですか?

私は、Apache WebサーバーでホストされているWebサイトで作業しています。最近、私はヘッダー(さまざまな種類のコンテンツのContent-Type)を使用して何かをテストしていましたが、画像に対する多くの条件付き要求を見てきました。例:

200 /index.php?page=1234&action=list
304 /favicon.ico
304 /img/logo.png
304 /img/arrow.png
(etc.)

画像ファイルは静的コンテンツであり、ブラウザによってキャッシュされますが、ユーザーがそれらにリンクするページを開くたびに、条件付きで要求され、「304 Not Modified」を送信します。これは良い(転送されるデータが少ない)が、ページのロードごとに20以上のリクエストが発生することを意味します(キープアライブとパイプラインが有効になっている場合でも、これらのすべてのラウンドトリップによりページのロードが長くなります)。

ブラウザに既存のファイルを保持し、新しいバージョンをチェックしないように指示するにはどうすればよいですか?

編集:mod_expiresメソッドは、ファビコンでも機能します。

42
Piskvor

Expires Apacheのモジュールはこれを解決します

a2enmod expires

サーバー構成でロードし、.htaccess(またはサーバー構成)でセットアップする必要があります。

Expires ヘッダーを使用すると、リソースは最初にのみ要求されます。有効期限が切れる前に、ブラウザのキャッシュから後続のリクエストが処理されます。指定された時間が経過し、リソースが必要になった後、再び要求されます(条件付き-変更されていないリソースに対して304が返されます)。有効期限が切れる前にキャッシュからそれをクリアする唯一の信頼できる方法は、手動で、または強制的に更新することです(通常Ctrl-F5)。 (リソースがその間に変更される場合、これは問題になる可能性がありますが、静的な画像はあまり頻繁に変更されません。)

# enable the directives - assuming they're not enabled globally
ExpiresActive on

# send an Expires: header for each of these mimetypes (as defined by server)
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# css may change a bit sometimes, so define shorter expiration
ExpiresByType text/css "access plus 1 days"

Favicon.icoの場合、もう少し作業が必要です(Apacheは通常Windowsアイコンファイルを認識せず、これをデフォルトのtext/plainとして送信します)。

# special MIME type for icons - see http://www.iana.org/assignments/media-types/image/vnd.Microsoft.icon
AddType image/vnd.Microsoft.icon .ico
# now we have icon MIME type, we can use it
# my favicon doesn't change much
ExpiresByType image/vnd.Microsoft.icon "access plus 3 months"

そして出来上がり、It Works™!

56
Piskvor

filesMatchの代わりにExpiresByTypeディレクティブを使用すると、subtypeContent-Typeimage/*)ではなく、type/subtypeの各ペアをリストする代わりに、subtypeを照合してimage/jpegをグループ化できます(例:image/png)。

#Set caching on image files for 11 months
<filesMatch "\.(ico|gif|jpg|png)$">
  ExpiresActive On
  ExpiresDefault "access plus 11 month"
  Header append Cache-Control "public"
</filesMatch>

このGoogleの記事 に合わせて 有効期限を1年(access plus 11 month)以下にし、Cache-Control "public"を追加してFirefoxのHTTPSキャッシュを有効にしました。

CSSおよびJSの場合、Googleは1週間の有効期限を推奨しています。

<filesMatch "\.(css|js)$">
  ExpiresActive On
  ExpiresDefault "access plus 1 week"
  Header append Cache-Control "public"
</filesMatch>
25
Marco Demaio

静的イメージのhttp応答にExpiresヘッダーを設定した場合、指定した時間が経過するまで、最初のダウンロード後、サーバーはそのイメージについて再度チェックされません。サーバーからファイルをダウンロードすると、Expiresヘッダーが

Expires: Fri, 1 Jan 2010 00:00:01 GMT 

キャッシュをクリアするか、強制更新(WindowsではCtrl + F5)を行わない限り、ブラウザは2010年までサーバーから再度検索しません。

これを設定する簡単な紹介 here 、および wikipedia で役立つ可能性のある他の応答のリストがあります。

3
ConroyP

Favicon.icoについては、サーバードキュメントのルートに/ var/www/htmlと入力し、エイリアスセクションの/etc/httpd/conf/httpd.confに追加します。

Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
    <Files favicon.ico>
       ExpiresActive On
       ExpiresDefault "access plus 1 month"
    </Files>
</Directory>

そうすると、エイリアス化されているため、単一のfavicon.icoがすべての仮想ホストサイトに対して機能します。ユーザーがサイトにアクセスすると、それ以降は1か月間ブラウザのキャッシュコピーにアクセスし、Webからはアクセスしません。

取得できませんでした

ExpiresByType image/ico "access plus 1 month"

まったく動作します。たぶん、上で提案されているようにtext/plainと入力する必要があります。いずれにしても、ExpiresDefaultは正常に機能します。

2
Anon