ブラウザのキャッシュはどのように機能しますか？

公開: 2017-05-04

ブラウザキャッシュは、ブラウザがWebページのリソースをローカルに保存するために使用するメカニズムです。 これにより、パフォーマンスが向上し、帯域幅の消費が最小限に抑えられ、全体的にスッキリとしたエクスペリエンスが実現します。 この記事では、ブラウザのキャッシュがどのように機能するか、そしてそれをWebサイトに実装する方法について説明します。

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

キャッシュは、将来のアクセスを高速化するために値を一時的に保存するために使用されるソフトウェアまたはハードウェアコンポーネントです。 ブラウザキャッシュは、画像、ビデオ、CSS、JavascriptなどのダウンロードされたWebページリソースを含むファイルの小さなデータベースです。 その背後にある基本的な考え方は次のとおりです。

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

ブラウザはWebサーバーにコンテンツを要求します。 コンテンツがブラウザのキャッシュにない場合は、Webサーバーから直接取得されます。 コンテンツが以前にキャッシュされていた場合、ブラウザはサーバーをバイパスし、コンテンツをキャッシュから直接ロードします。

キャッシュされたコンテンツの有効期限が切れているかどうかによって、コンテンツは古くなっていると見なされます。 一方、フレッシュとは、コンテンツが有効期限を過ぎておらず、サーバーを使用せずにブラウザのキャッシュから直接提供できることを意味します。

検証という用語は、サーバーが所有する最新バージョンに対してチェックする必要があるコンテンツを指します。 つまり、コンテンツが古くなっているかどうかを判断するためです。 有効期限が過ぎる前にコンテンツがキャッシュから削除された場合、無効化が発生します。 これは、コンテンツが変更された場合にサーバーによって強制される可能性があり、問題が発生しないようにブラウザーは最新バージョンである必要があります。

ブラウザのキャッシュは、特定のHTTPヘッダーを使用することで、Web開発者や管理者が活用できます。 これらのヘッダーは、リソースをキャッシュするタイミング、キャッシュしないタイミング、およびキャッシュする期間をWebブラウザーに指示します。 HTTPキャッシュ関連のヘッダーを使用すると、HTTPプロトコルのさまざまな生まれ変わり全体でヘッダーとかなり重複するため、イライラすることがよくあります。 間にある奇妙なWebプロキシ、古いブラウザ、競合するキャッシュポリシーと実装（たとえば、さまざまなWordPressプラグイン）などを組み合わせると、すぐに頭痛の種になる可能性があります。

ブラウザのキャッシュヘッダー

キャッシュできるものとキャッシュできないもの、およびキャッシュポリシーと呼ばれる期間を定義する一連のルール。 これは、キャッシュ応答ヘッダーを使用してWebサイトの所有者によって実装されます。 これはさまざまな方法で実現できますが、最初はキャッシュ制御のみに関心があるはずです。

キャッシュ制御

Cache-controlヘッダーはHTTP/1.1で導入され、最新の実装と見なされています。 ブラウザの動作に応じて、使用できる値はいくつかあります。 非常に用途が広い。 以下は、Cache-Controlディレクティブのリストです。

  • キャッシュなし
    キャッシュをすぐに参照するのではなく、サーバーに対してコンテンツを検証するようにWebブラウザーに指示します。 新鮮な場合は、キャッシュから提供できます。
  • ノーストア
    コンテンツをキャッシュしないようにブラウザに指示します。 これは主に、機密データや頻繁に変更されるデータを処理する場合に使用されます。
  • 公衆
    コンテンツをパブリックとしてマークします。これは、ブラウザおよび任意の仲介者（プロキシなど）によってコンテンツをキャッシュできることを意味します。
  • プライベート
    コンテンツをプライベートとしてマークするために使用されます。つまり、ブラウザによってのみキャッシュでき、中間プロキシなどによってはキャッシュできません。 これは通常、ユーザー関連のデータを指します。
  • 最大年齢
    Max-ageは、クライアントがコンテンツを再検証する必要がある前に、コンテンツがブラウザのキャッシュにとどまることができる最大時間を秒単位で表します。 間もなくアクセスするExpiresヘッダーとは異なり、max-ageは、絶対的な有効期限ではなく、コンテンツがキャッシュされた時点からの相対値を秒単位で定義します。
  • S-maxage
     これはmax-ageに似ていますが、中間キャッシュにのみ使用されます。
  • 再検証する必要があります
    ブラウザのキャッシュから直接コンテンツを提供するのではなく、必要なたびにコンテンツを再検証するようにブラウザに強制します。
    これは、ネットワークの中断が発生した場合に便利です。
  • プロキシ再検証
    must-revalidateに似ていますが、中間キャッシュにのみ適用されます。
  • 変換なし
    サーバーから受信したコンテンツ（通常は圧縮など）を変換しないようにブラウザーに指示します。

Etag

Etag応答ヘッダーは、特定のリソースを識別するために使用されます。 特定のリソースが変更されるたびに、新しいEtagが生成されます。 このように、Etagが変更されていない場合、Webサーバーが完全な応答を返す必要がないため、帯域幅が節約されます。 したがって、EtagヘッダーはNginxとApacheでデフォルトで有効になっており、Etag値は自動的に生成されるため、何も指定する必要はありません。

Pressidiumであなたのウェブサイトをホストする

60日間の返金保証

私たちの計画を見る

有効期限

これはHTTP/1.0で導入され、コンテンツが古くなったと見なされる将来の特定の日付を定義します。 これは事実上、コンテンツの「賞味期限」です。 例：有効期限：2017年5月25日木曜日12:30:00 GMT

プラグマ

これはやや時代遅れのHTTP/1.0ヘッダーであり、主に下位互換性のために使用されます。 プラグマ：no-cacheを挿入すると、ブラウザはCache-Control：no-cacheと同様に動作します。

Webサイトにキャッシュポリシーを実装する方法

Webサイトにキャッシュポリシーを実装する方法は2つあります。 1つ目は、Webサーバー構成でキャッシュ応答ヘッダーを定義することです。 2つ目は、PHP内で直接実行することです。 以下は、最も人気のある2つのWebサーバー、Apache2とNginxの例です。

Apache2

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

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

ご覧のとおり、これは非常に簡単です。 最初の例では、apache2のFileMatchディレクティブを使用して、特定のファイルタイプのセット（.ico、.pdfなど）と照合し、最大84600秒でそれらを公開します。 2つ目では、nginxのlocationディレクティブを使用して特定のファイルタイプと再度照合し、最大365日を含めます。 また、addheader句を使用してそれらを「public」として定義します。

PHP

応答ヘッダーをコードに直接追加する場合は、PHPのheaderコマンドを使用するだけです。

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

それが機能するかどうかを確認するためのテスト方法

たとえば、Firefox WebコンソールまたはChromeの開発者ツールを使用して、ブラウザのキャッシュルールを簡単にテストできます。

  1. 右上のハンバーガーアイコンをクリックします。
  2. [その他のツール]>[開発者ツール]を選択します
  3. アドレスバーにURLを入力し、Enterキーを押します。

URLの読み込み中に、リクエストのリストが表示されます。 リソースをクリックして選択します。 右側の応答ヘッダー、特にステータスコードを調べます。 200 HTTPコードを出力しますが、括弧内にメモリキャッシュからのものであることを示します。

これは、リソースがサーバーから要求するのではなく、ローカルキャッシュストアから自動的にロードされたことを意味します。

Cache-Controlヘッダーに「must-revalidate」句がある場合、ステータスコードは304（未変更）になります。 これは、ブラウザがサーバーに対してリソースを再検証し、サーバーがコンテンツが変更されていないと応答したことを意味します。したがって、コンテンツはブラウザのキャッシュから提供できます。

[キャッシュを無効にする]チェックボックスをオンにして[再読み込み]をクリックして、キャッシュを無効にします。

この場合、ステータスコードが200であり、キャッシュを使用したことを示すものはありません。 ブラウザがWebサーバーにリソースを要求し、Webサーバーが新しいコピーを提供することで応答しました。

結論

ブラウザのキャッシュとキャッシュポリシーは非常に複雑になる可能性があります。 しかし、私たちが示したように、Cache-Controlの実験を開始するのは簡単です。 ほとんどの場合、静的アセットに「一般的な」キャッシュポリシーを実装するだけで、Webサイトのパフォーマンスに違いをもたらすことができます。 しかし、それは他の多くのものの上に「心配」の余分な層を追加します、そしてそれはそのようであるべきではないと私たちは信じています。 次の投稿でフォローしてください。ここでは、Pressidiumでブラウザキャッシングを実装する方法を紹介します。これにより、すべての心配がなくなります。