web-dev-qa-db-ja.com

.htaccessにCDNのレバレッジブラウザキャッシュを追加するにはどうすればよいですか？

.htaccessに以下のコードがあります

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

オン

cdn.domain.com/abc.jpg (expiration not specified)
cdn.domain.com/abc.png (expiration not specified)

JS、CSS、その他についても同じ問題です。

.htaccessに入れる必要があるので、ほとんどの場合、その中でAグレードを達成します。

php.htaccessmagentocachingcdn
12
Ankit Shah

CDNにレバレッジブラウザキャッシュを使用する場合は、Cache-Control、Expires、Last-Modifiedなどのキャッシュヘッダーを追加してファイルをキャッシュすることをお勧めします。

Mod_Headersを使用したブラウザキャッシュの活用

共有サーバーを使用していて、ホストがMod_Expiresを有効にしない場合でも、利用可能になるMod_headersを使用してブラウザーのキャッシュを利用できます。

# Leverage browser caching using mod_headers #
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
        Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
        Header set Cache-Control "public"
    </FilesMatch>
</IfModule>
# End of Leverage browser caching using mod_headers #

以下のテスト例：

# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>

# NEVER CACHE - notice the extra directives
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

ヘッダーのテスト

次のような「curl」コマンドを実行することで、Cache-Control：max-ageヘッダーがファイルに配置されているかどうかを確認できます。

curl -I http://foo.bar.netdna-cdn.com/file.ext

HTTP/1.1 200 OK
Date: Fri, 16 Sep 2014 14:12:20 GMT
Content-Type: text/css
Connection: keep-alive
Cache-Control: max-age=604800, public  ← 1 Week caching time 
Expires: Thu, 21 May 2015 20:00:00 GMT
Vary: Accept-Encoding
Last-Modified: Thu, 24 Jan 2013 20:00:00 GMT
GMT; path=/; domain=.domain.com
Server: NetDNA-cache/2.2
X-Cache: HIT

以下のコードを使用しました：

Mod_Expiresを使用したブラウザキャッシュ
ブラウザのキャッシュを活用する最も一般的な方法は、mod_expiresを使用することです。次のコードを.htaccessに追加すると、すべてのユーザーのブラウザキャッシュが自動的に有効になります。

# Leverage browser caching using mod_expires #
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"
</IfModule>
# End of Leverage browser caching using mod_expires #
12
Keshar

ブラウザキャッシュとは何ですか？

ブラウザのキャッシュは、読み込み時間を短縮するために、以前にリクエストされたファイルをブラウザのローカルキャッシュに保存するプロセスです。ファイルがローカルに保存されると、サーバーに送信する必要のあるリクエストとダウンロードに必要なデータが少なくなります。

enter image description here

ブラウザのキャッシュを適切に活用するために有効にする必要がある特定のコンポーネントがあります。たとえば、ファイルをローカルキャッシュから引き続き取得できるかどうか、またはサーバーに対して要求を行う必要があるかどうかをブラウザーが判断できるように、キャッシュバリデーターを指定する必要があります。さらに、アセットのExpiresまたはCache-Controlヘッダーを適切に設定する必要があります。両方を使用すると冗長になります。さらに、Gtmetrixは、より広くサポートされているため、Cache-ControlよりもExpiresを優先します。したがって、この記事では、ブラウザーのキャッシュを活用する方法を示すときに、Expiresヘッダーの使用に焦点を当てます。

Cache-Control
Cache-Controlを使用すると、ブラウザのキャッシュをもう少し制御できるようになり、多くの人は一度設定すると使いやすくなります。

# 1 Year for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

Gzip Comporession（Magentoでは便利です）

<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|asp|html)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>

Webサイトのファイルに応じて、異なる有効期限を設定できます。
特定の種類のファイルがより頻繁に更新される場合は、それらに早い有効期限を設定します（つまり、CSSファイル）。

。htaccessファイルを開きます。（賢く：誤って間違えて元に戻す必要がある場合に備えて、元の.htaccessファイルのコピーを作成してください）。

ApacheでExpiresヘッダーモジュールを有効にする（「ExpiresActive」を「On」に設定）ので、これを.htaccessファイルに追加します：

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

</IfModule>

デフォルトの有効期限に「デフォルトディレクティブ」を追加すると便利な場合があります。これが2行になります。今すぐ追加：

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

# Default directive
ExpiresDefault "access plus 1 month"

</IfModule>

それがベースです。次に、各ファイルタイプのすべての行を追加します（ファビコン、用に以前に作成した行）images、[〜＃〜] css [〜＃〜]およびJavascript）。最終的には次のようなコードスニペットになります：

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault "access plus 1 month"

# My favicon
ExpiresByType image/x-icon "access plus 1 year”

# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# CSS
ExpiresByType text/css "access 1 month”

# Javascript
ExpiresByType application/javascript "access plus 1 year"

</IfModule>

次に、GTmetrixを使用して別のテストを実行し、結果を比較します。これは、Expiresヘッダーを実装した後の私のテストサイトの結果です：

推奨事項

  • すべての静的リソースのキャッシュに積極的に取り組む
  • 最低1か月の有効期限（推奨：アクセスプラス1年）
  • 1年以上前にキャッシュを設定しないでください！

WordPressプラグインを使用したブラウザキャッシュ

W3 Total Cache：Webサイトのパフォーマンスを高速化するキャッシングやCDN統合（MaxCDNなど）などの多くの機能を備えた最高のキャッシングプラグインの1つ。

注

  1. mod_rewriteはApacheWebサーバーで有効になっています。有効になっていない場合は、キャッシュアクションを完了するために書き換えモジュールが必要になるため、Webサーバーの技術チームに連絡して有効にしてください。
  2. 警告！何かに遠い将来の有効期限を設定してから、それらのファイルの1つを更新する場合は、ブラウザーのファイルの名前を次のように変更する必要があります。再フェッチします。
    例：JavaScriptを1年に設定し、JavaScriptファイルの1つを更新する場合は、名前を変更する必要があります。実際のファイル。これを行うための良い方法は、バージョン管理、つまりmyfile_v1.2.jsを使用することですが、より簡単な方法は、Expiresヘッダーに注意することです（10年に設定することは決して良いオプションIMOではありません）。

サイトの改善に気づきましたか？上記は、「ブラウザのキャッシュを活用する」および「Expiresヘッダーを追加する」の下にリストされているすべてのファイルを処理しましたか？ 下のコメントで教えてください。

7
Ketan Borada

おそらく、ホストにCDNファイルをキャッシュするのは最善の方法ではありません。 CDNホストを活用できる場合は、Cache-Control、Expires、Last-Modifiedなどのキャッシュヘッダーを追加して、ファイルをキャッシュする方がよいでしょう。 =など。

CDNを使用するすべてのサイトにキャッシュルールを追加するのではなく、キャッシュヘッダーを1つの場所（CDN）に追加するだけなので、より良い方法です。

3
Ruslan Nigmatulin