より速いページレンダリング用のCSS配信を最適化します

CSSの配信を最適化し、ページの負荷速度を改善するために、HTMLヘッドで直接上記のコンテンツに必要な最初のインラインの重要なCSSを使用してから、JavaScript Onload Switchingを使用してrel = "Preoad"またはMedia = "Print"を使用して非クリティカルなCSSを延期します。 CSSNANOなどのツールを使用して、Whitespaceとコメントを削除してCSSを削除し、BrotliまたはGZIP圧縮を可能にしてファイルサイズを削減します。繰り返しの訪問のために、キャッシュコントロールヘッダーとバージョンされたファイル名でブラウザのキャッシュをレバレッジします。コードスプリッティングと動的インポートを使用して、スパのルートまたはコンポーネントごとにCSSを分割して、必要なスタイルのみをロードします。 @importやフルブートストラップなどの大規模な外部ライブラリは、いくつかのコンポーネントしか使用されていない場合は避けてください。深いネスティングを最小限に抑え、複雑な子孫チェーンよりもクラスを好むことにより、効率的なCSSセレクターを使用します。これらのステップを組み合わせて、レンダリングブロッキングを減らし、最初のペイントをスピードアップし、コアWebバイタルを改善します。

CSS配信の最適化は、ページの負荷速度と知覚されたパフォーマンスを改善する最も影響力のある方法の1つです。 CSSはデフォルトでレンダリングブロッキングをしているため、ユーザーがコンテンツを見ると非効率的な配信が遅れる可能性があります。より速いレンダリングのためにCSSを合理化する方法は次のとおりです。

1.レンダリングブロッキングCSSを排除します

ブラウザは、すぐに必要ではない場合でも、リンクされたすべてのCSSをダウンロードして処理するまでページをレンダリングしません。初期レンダリングをスピードアップするには：

• インラインの重要なCSS ：倍以上のコンテンツ（ヘッダー、ヒーローセクション、ログインフォームなど）に必要な最小限のCSSを抽出し、HTMLのに直接埋め込みます。

• 非クリティカルなCSSを延期する： rel="preload"またはjavaScriptを使用して、CSSの残りを非同期的にロードします。例：

   <link rel = "preload" href = "styles.css" as = "style" onload = "this.onload = null; this.rel = &#39;styleSheet&#39;">

  または、最初にmedia="print"を使用し、負荷後にallに切り替えます。

   <link rel = "styleSheet" href = "noncritical.css" media = "print" onload = "this.media = &#39;all&#39;">

これにより、ブラウザは完全なStyleSheetのダウンロードを待たずにコンテンツをレンダリングできます。

2。CSSを縮小および圧縮します

ファイルサイズを縮小して転送を速めます：

• CSSのマイニー：白人、コメントを削除し、セレクターを短くします（CSSNANOやPostCSSのようなツール）。
• 圧縮を有効にする：サーバーでGZIPまたはBrotliを使用します。 Brotliは通常、GZIPよりも10〜20％優れた圧縮を提供します。

ファイルサイズが30％減少しても、接続が遅いための負荷時間を著しく改善できます。

3.ブラウザキャッシュを活用します

適切なキャッシュヘッダーで静的CSSを提供するため、訪問者が再ダウンロードしないようにします。

• Cache-Control: public, max-age=31536000バージョン化またはハッシュされたファイル名（例： styles.a1b2c3.css ）。
• キャッシュバストテクニック（コンテンツハッシュなど）を使用して、更新がすぐにピックアップされるようにします。

これにより、多くの場合、繰り返し訪問のCSSペイロードがゼロになります。

4。ルートまたはコンポーネントごとにCSSを分割してロードします（スパ用）

シングルページアプリまたはコンポーネントベースのフレームワーク（React、Vueなど）：

• コードスプリットCSS ：現在のビューに必要なCSSのみをバンドルします。
• ダイナミックインポートを使用：オンデマンドでコンポーネント固有のスタイルをロードします。

たとえば、Reactアプリで：

 import（ './ dashboard.css'）; //コンポーネントがマウントされた場合にのみロードします

これにより、ページ全体で未使用のスタイルの読み込みが防止されます。

5. @importおよび大規模な外部ライブラリを避けてください

• CSSの@importは、並列ダウンロードをブロックし、レンダリング遅延を増加させます。ビルド中に複数の<link>タグまたはバンドルで交換します。
• いくつかのコンポーネントのみを使用している場合は、CSSフレームワーク全体（Bootstrapなど）をロードしないでください。カスタムビルドまたは軽量の代替品を使用します。

6.効率的なCSSセレクターを使用します

送達よりも影響力が低いですが、非効率的なCSSはレンダリングを遅くすることができます。

• 深い営巣や過度に複雑なセレクターを避けてください（例えば、 div ul li a span ）。
• クラスとIDに固執する： .btn-primary鎖の子孫よりも高速です。

最新のブラウザは高速ですが、肥大化したCSSはリフロー中にJankを引き起こす可能性があります。

CSSの配信を正しく取得することは、1つの大きなことを行うことではありません。レンダリングブロッキングを最小限に抑え、効率を最大化するために、インライン、延期、圧縮、キャッシュを組み合わせています。これらのいくつかを実装すると、First PaintとCore Web Vitalsのスコアが高速になります。

基本的に：重要なものをインラインで、残りを延期し、ファイルを無駄のないままにします。

以上がより速いページレンダリング用のCSS配信を最適化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。