CSSでキャッシュを設定する方法

Web サイト開発の過程で、Web サイトのアクセス速度が驚くほど速いという問題によく遭遇します。その中でも重要な要素はWebサイトのキャッシュ設定です。この記事では、CSSキャッシュの原理や方法、最適化テクニックについて詳しく紹介します。

1. キャッシュの原則

Web サイト キャッシュの原則は非常に単純です: よく使用されるファイルをユーザーのローカル キャッシュに保存します。次回ユーザーが同じ Web サイトにアクセスしたときに、直接アクセスできます。ファイルをローカルで読み取りからアクセスすると、読み込みが速くなります。

CSS ファイルは、Web サイトの外観、操作性、その他の側面に影響を与えるため、Web サイトの重要な部分です。キャッシュを設定する場合、HTTP ヘッダーを使用して CSS ファイルのキャッシュ ポリシーを指定することができます。これにより、ブラウザーは最初にファイルにアクセスするときにファイルをキャッシュし、再度アクセスするときにキャッシュから直接読み取ることができます。

2. キャッシュ設定方法

CSS ファイルのキャッシュ設定には、主に Expires と Cache-Control の 2 つの HTTP ヘッダーが関係します。

1. Expires

Expires は、ファイルの有効期限を設定するために使用される HTTP ヘッダーです。このヘッダーを設定する場合、Expires: Fri, 01 Jan 2022 00:00:00 GMT のように固定の有効期限を指定することも、Expires: 1h# のように相対時間を設定することもできます。 ##。

クライアントが初めてファイルにアクセスすると、ファイルはキャッシュされ、キャッシュの有効期限がローカルに保存されます。次回ファイルに再びアクセスすると、ブラウザはキャッシュの有効期限が切れているかどうかを判断し、期限が切れていない場合はファイルをキャッシュから直接読み取り、期限が切れていない場合は再度ファイルをリクエストします。

Expires ヘッダーはクライアントの時刻に依存するため、クライアントの時刻が不正確な場合、キャッシュ設定が無効である可能性があることに注意してください。

Cache-Control

Expires と比較して、Cache-Control はより柔軟です。これは、値が

Cache-Control: max-age=3600, public などの複数のディレクティブを含む文字列である HTTP ヘッダーでもあります。

一般的なディレクティブには次のようなものがあります。

max-age: ファイルのキャッシュ時間を秒単位で指定します。
• no-cache: キャッシュの有効期限が切れているかどうかを最初にサーバーで確認する必要があることをクライアントに伝えます。
• public: ファイルはパブリック キャッシュ (CDN など) によってキャッシュできます。
• private: このファイルは、ブラウザー キャッシュなどのプライベート キャッシュによってのみキャッシュできます。

Cache-Control は Expires をオーバーライドすることに注意してください。

3. キャッシュ最適化テクニック

バージョン番号管理

Web サイト開発では、CSS ファイルの内容が変更されることがよくあります。キャッシュ設定を変更しないと、キャッシュの有効期限が切れた後にブラウザがファイルを再ダウンロードするため、Web サイトの読み込みが遅くなります。

この問題を解決するには、CSS ファイルの URL にバージョン番号を追加します (例:

style.css?v=1.0)。ファイルの内容が変更されるたびに、バージョン番号を更新するだけで済み、ブラウザはそれを新しいファイルとみなして再度ダウンロードします。

CSS ファイルの分割

作成する CSS ファイルが非常に大きくなり、ページのレンダリング速度が遅くなる場合があります。この時点で、ブラウザがそれらを並行してダウンロードできるように、CSS ファイルをいくつかの小さなファイルに分割できます。

同時に、一般的に使用される CSS パーツを HTML にインライン化すると、複数の小さなファイルの読み込みを回避し、ページの読み込み速度を向上させることができます。

Gzip 圧縮を有効にする

Gzip 圧縮は、テキスト ファイル (CSS ファイルなど) を圧縮するサーバー側の方法です。ファイル サイズを大幅に削減できるため、ファイルのダウンロードが高速化されます。

Nginx や Apache などの Web サーバーでは、構成を通じて Gzip 圧縮を有効にすることができます。

CDN を使用する

CDN は、世界中の複数のサーバーにリソース ファイルをキャッシュできる集中型の分散展開サービスであり、これによりファイルの読み込み速度が向上します。

CDN で CSS ファイルをホストすると、ユーザーが Web サイトにアクセスすると、ファイルは最も近い CDN サーバーを通じて読み込まれるため、ページのレンダリングが高速化されます。

主流の CDN サービス プロバイダーには、Alibaba Cloud、Tencent Cloud、Huawei Cloud などが含まれます。

4. 概要

CSS キャッシュ設定は、Web サイトの最適化の重要な部分です。キャッシュを適切に設定すると、ファイルのダウンロード時間を大幅に短縮し、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させることができます。実際の開発では、特定の状況に基づいて適切なキャッシュ設定ソリューションを選択し、Web サイトのパフォーマンスを向上させるために継続的に最適化する必要があります。

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