• Anthony Heddings
• July 29, 2020, 11:00am EDT

各ユーザーはブラウザで、ダウンロード済みのオブジェクトを保存するのに内蔵キャッシュを使用し、ネットワークではなくディスクからロードしてウェブサイトに繰り返し訪れる速度を大幅に向上させることができるようにします。

キャッシュはどのように機能するか？

ユーザーが初めてサイトに接続したとき、ユーザーはロゴなどを含む、ページを表示するために必要なすべての静的リソースをダウンロードします。 新しいページに移動すると、ロゴを再度要求するのではなく、メモリからロゴを読み込み、パフォーマンスを大幅に向上させ、その過程で Web サーバーの負荷を軽減します。 CDN は、メインの Web サーバー、つまり「オリジン」サーバーの前に置かれるサーバーのネットワークです。 このネットワークがお客様のページをキャッシュし、最大帯域幅を広げ、アクセス遅延を減らし、オリジンサーバーにかかる負担を大幅に軽減します。

Cache-Control は、すべての送信リクエストに追加するように Web サーバーを設定できるヘッダーで、ブラウザと CDN にコンテンツをキャッシュする方法を通知します。 そうすることで、あるユーザーの個人情報が他のユーザーに表示される危険性があります。 一般的なルールとして、ホームページのように、すべてのユーザーにとってまったく同じページであれば、キャッシュすることができます。 もし、ユーザーの機密情報を表示するのであれば、キャッシュからブラックリストに入れることをお勧めします。 CSS や画像のような静的リソースは、通常、誰にでもキャッシュでき、多くの場合、より長くキャッシュできます。

オブジェクトがキャッシュで費やす時間の長さも重要です。 Time-To-Live (TTL) と呼ばれる、キャッシュされたリソースの最大年齢は、オブジェクトが無効にされ、ユーザーに新しいオブジェクトを要求する前にキャッシュに留まる時間を決定します。 あまり変化のない静的なリソースには、非常に高いTTL値を設定することができ、通常は2年程度です。 更新する可能性があるものについては、古くなったリソースが長くキャッシュに存在するのを防ぐために、より低い TTL 値を設定したいと思うでしょう。

キャッシュの再読み込みをトリガーするのに、バージョン管理されたファイル名を常に使用できます。 CSS スタイル シートの新しいバージョンをリリースする場合、それを styles-1.0.1.css と名付けると、ユーザーのブラウザ (およびその前にあるすべての CDN) はそれを再ダウンロードが必要な新しいファイルとして見なすことができます。 さらに、いくつかの CDN では、ファイル名を変更せずに既存のキャッシュをフラッシュするために、手動で無効化を発行できます。

How to Use Cache-Control in Apache

Cache-Control has a few options:

• public – ブラウザや CDN など誰によってもキャッシュされる可能性がある。
• private – CDN やリバースプロキシにキャッシュされない機密データを含みます。 ユーザーのブラウザはローカルにキャッシュすることができます。
• no-cache – 名前に反して、これはキャッシュを無効にしません。 ブラウザはパフォーマンスのために応答をキャッシュすることができますが、使用する前にオリジンサーバに更新を確認する必要があります。
• no-store – キャッシュを完全に無効にします。 これは、2 度送信すべきではない非常に機密性の高いデータのみに使用します。

さらに、リソースに対して行われる可能性のあるあらゆる変換を無効にする no-transform ディレクティブを追加することができます。 例えば、CDN の中には帯域幅を減らすために画像を圧縮するものがあります。

Apache では、このヘッダは Header set ディレクティブを使って、以下のように手動で設定しなければなりません:

Header set Cache-Control "max-age=84600, public"

max-age 値は秒数で設定します、たとえば、5 分の TTL なら max-age=300、2 年なら max-age=63072000 といったように。

このディレクティブを設定のルートに置いてサイト全体に適用することもできますが、より良い方法は、ファイルの種類によって設定を適用することです。 たとえば、ほとんどの静的メディアに対して高い TTL を設定するには、FilesMatch ブロックを使用します:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=63072000, public" </FilesMatch>

特定のパスを CDN によるキャッシュからブラックリスト化したい場合、Directory ブロックを使用します。

<Directory "/private"> Header set Cache-Control "max-age=300, private" </Directory> 

または単に 1 つのファイルにマッチ:

<File "protected.html"> Header set Cache-Control "max-age=300, private" </File>

より具体的にマッチするブロックは一般的な正規表現マッチよりも優先されますが、受信側ですべてが適切に設定されていることを確認したいと思うでしょう。 これは、Chrome の DevTools の Network > Headers.

.htaccess 設定しかアクセスできない場合、それぞれのサブディレクトリに新しい .htaccess ファイルを作成すれば、ディレクトリ一致を使用できることに変わりはないでしょう。

Use Surrogate-Control to Modify CDN Behavior Directly

Surrogate-Control ヘッダーは Cache-Control とまったく同様に機能しますが、エンドユーザーではなく CDN やリバースプロキシに対する特定の指示を詳細に記述します。

このヘッダーは、Cache-Control を設定するのと同じ方法で、手動で設定する必要があります：

Header set Surrogate-Control "max-age=300, public"

これが機能するかどうかを確認するには、CDN で必ずテストする必要があります – Surrogate-Control はかなり新しく、普遍的ではないので。