CSSキャッシュを設定する

Web テクノロジーの継続的な発展に伴い、CSS (Cascading Style Sheets) も Web デザインにおいてますます重要な役割を果たしています。ただし、大規模な Web サイトの場合、CSS ファイルの読み込み速度が問題になる可能性があります。この問題を解決するには、キャッシュが非常に便利な方法です。この記事では、Web サーバーで CSS キャッシュを設定して Web サイトのパフォーマンスを向上させる方法について説明します。

CSS キャッシュとは何ですか?

Web サイトにアクセスすると、ブラウザーは Web サーバーに HTML、CSS、JavaScript、およびその他のリソースを要求します。これらのリソースのサイズは変化する可能性があるため、ロード時間も変化します。 Web サイトの読み込みを高速化するために、ブラウザーはリソースが初めてリクエストされたときにリソースをローカルにキャッシュします。次回同じリソースがリクエストされると、ブラウザはローカル キャッシュからリソースを取得するため、Web サーバーにリソースを再度リクエストする必要がなくなり、Web サイトのパフォーマンスが向上します。

CSS キャッシュは、ブラウザーが CSS ファイルをキャッシュできるようにする特別なキャッシュ メカニズムで、その後のアクセス時にページの読み込みが速くなります。 CSS キャッシュが正しく設定されている場合、ブラウザーは同じ Web サイトにアクセスするときに CSS ファイルを再ダウンロードする必要がなくなり、Web ページの読み込み速度が向上します。

CSS キャッシュを設定するにはどうすればよいですか?

以下は、Web サーバー上で CSS キャッシュを設定して Web サイトのパフォーマンスを向上させるのに役立ついくつかの方法です:

1. HTTP 応答ヘッダーを設定します

To set CSS キャッシュするには、サーバー上で HTTP 応答ヘッダーを設定する必要があります。 HTTP 応答ヘッダーはサーバーからブラウザーに送信される情報で、キャッシュできるかどうか、キャッシュ時間など、リソースに関するメタデータが含まれています。 CSS キャッシュを設定するには、「Cache-Control」と「Expires」という 2 つの HTTP 応答ヘッダーを設定する必要があります。

1.1 Cache-Control

「Cache-Control」応答ヘッダー (Cache-Control:public など) を設定することで、ブラウザが CSS ファイルをキャッシュする方法を制御できます。ここでのパブリックとは、この CSS ファイルをすべてのユーザーとすべてのプロキシ サーバー (CDN (コンテンツ配信ネットワーク) サーバーなど) がキャッシュできることを意味します。もう 1 つの一般的に使用される設定は、Cache-Control:max-age=31536000 です。ここで、31536000 は秒数、つまり 1 年を表します。このようにして、ブラウザは CSS ファイルを 1 年間キャッシュします。

1.2 Expires

CSS キャッシュを設定するもう 1 つの方法は、HTTP 応答ヘッダーで「Expires」を使用することです。この応答ヘッダーは、リソースの有効期限を指定します。ブラウザーが初めてリソースを要求すると、サーバーは HTTP 応答ヘッダーに有効期限を付加します。有効期限に達する前に、ブラウザはサーバーにリソースを要求しなくなります。たとえば、有効期限を 1 年に設定すると、1 年以内にアクセスするたびに、ブラウザーはサーバーに別のリクエストを行わずに、ローカル キャッシュから CSS ファイルを取得します。

2. ファイル名バージョン番号を使用します

CSS ファイルを更新するときに、ブラウザーにファイルをキャッシュから取得するのではなく再ダウンロードさせたい場合があります。これは、ファイル名にバージョン番号を追加することで実現できます。 CSS ファイルを更新するときは、ファイル名のバージョン番号を 1 つの値だけ増やします。たとえば、style.css の名前を style_v2.css に変更します。こうすることで、ブラウザは古い CSS ファイルを新しいファイルであると認識するため、キャッシュから古い CSS ファイルを取得しなくなります。

3. CDN を使用する

CDN は、CSS ファイルを世界中の複数のサーバー ノードに保存して、CSS ファイルに対するユーザーのリクエスト時間を短縮できるコンテンツ配信ネットワークです。 CDN を使用して CSS ファイルを配布する場合、CDN のキャッシュからファイルをフェッチできるため、ページの読み込み速度が大幅に向上します。

概要

Web サーバー上で CSS キャッシュを設定することは、Web サイトのパフォーマンスを向上させ、ページの読み込み時間を短縮するための簡単かつ効果的な方法です。 HTTP 応答ヘッダーを設定し、ファイル名のバージョン番号を使用し、CDN を使用すると、ブラウザーのキャッシュを最大化して Web サーバーへのリクエストを減らし、Web サイトをより高速かつ効率的に実行できます。

以上がCSSキャッシュを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。