web-dev-qa-db-ja.com

並行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ファイル。

cssperformance
15
ayke

HTMLが解析されると、HTMLドキュメントからリンクされたCSSファイルが並列ダウンロードキューに追加されます。重要なことは、非同期JavaScriptリンクがHTMLパーサーをブロックし、そのJavaScriptがダウンロード、解析、実行されるまで、後のタグがダウンロードキューに追加されないようにすることです。[1]

ブラウザに4つのファイルのうち3つを順番に（少なくとも3回の往復）強制的にダウンロードさせる例を次に示します。

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

以下の例では、4つのファイルすべてが並行して（少なくとも1回の往復）ダウンロードされるように作り直されています。

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

別の注意：CSSファイルは（デフォルトでは）パーサーブロックではなくレンダーブロックです。ページは引き続き解析され、DOMが構築されますが、レンダリングは開始されません CSSOMが構築されるまで

CSSを分割する主な理由は、スクロールせずに見えるコンテンツをクライアントにレンダリングし、できるだけ早く解析するために必要な最小限のルールを取得することです。すぐに表示されないものの残りのルールは、リンクタグ内のmediaクエリで不必要にレンダリングをブロックするようにマークするか、非同期に読み込まれたJavaScriptによってページに追加できます。

そのため、CSSのダウンロードをそれ自体のために並列化することには明確な利点はありません。しかし、いつものように、測定してテストしてください！

さらに読むには、Googleの「Webの基礎：パフォーマンスの最適化」に関する次の記事をお勧めします。 https://developers.google.com/web/fundamentals/performance/

[1]：これは、一部のブラウザーの投機解析機能を無視しています：

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

14
Robert K. Bell