並行CSSダウンロードによりWebサイトのパフォーマンスを改善しますか?
ウェブサイトのページ読み込み時間を最適化していました。その方法の1つは、CSSの複数のHTTP要求を1つの結合HTTP要求に結合することでした。しかし、レビュアーの1人が興味深い質問をしました。複数のCSSファイルのダウンロードを並列化することで、ページの読み込み時間が短縮されないでしょうか? インターネットで読んだ唯一のことは、(ブロックする)HTTPリクエストの数を減らすことがWebページを高速化するための鍵であるということです(ただし、Google Pagespeed Insightsはこれを明確に述べていないようです1)。 並列化によってパフォーマンスが改善されない、またはほとんど問題にならない(いくつかのHTTPリクエストを使用する利点に勝る)理由がいくつかあります。 新しい接続のセットアップには費用がかかります。複数の接続のセットアップは並行して行うことができますが、ブラウザーは最大で約4〜6の接続を使用するため(ブラウザーによって異なります)、CSSを並行してダウンロードするとJavaScriptや画像などの他のアセットのダウンロードがブロックされます。 HTTPS接続を設定するには、いくつかの追加データが必要です。これは簡単に数KBのデータになる可能性があります。これは、実際に送信したいCSSの代わりに、ネットワーク経由で送信する必要がある追加データです。 TCPスロースタートアルゴリズムにより、接続を介して送信されるデータが多いほど、接続は高速になります。そのため、実際に接続が長く接続されていると、新しい接続よりもはるかに速くデータが送信されます。たとえば、単一の接続を使用してページの読み込み時間を改善するSPDYプロトコルを参照してください。 TCPは抽象化です。まだ(通常)基礎となる接続は1つだけです。そのため、複数の要求が使用されている場合でも、回線を介して送信されるデータは、速度を向上させるために複数の接続から必ずしも恩恵を受けるとは限りません。 インターネット接続は、特にモバイルでは本質的に信頼できません。1つの要求が他の要求よりも大幅に速く終了する場合があります。CSSに複数のリクエストを使用するということは、最後のリクエストが完了するまでWebページのレンダリングがブロックされることを意味します。これは、平均的な接続よりもかなり遅れる場合があります。 それでは、CSSファイルのHTTPリクエストを並列化することに何か利点はありますか? 注/更新:すべてのCSSファイルはレンダーブロックです。まだクリティカルパスの外に移動されていないCSSファイル。