パフォーマンスに悪影響を与える前に、どれくらい重要なCSSをインライン化できますか？
レンダリングのブロックの問題を回避するには、実際のCSSを<HEAD>タグに含めることで、<STYLE>タグに重要なCSSを直接インライン化してから、残りのCSSを非同期にロードするとよいと聞きました。
一方で、CSSをあまりにも多くインライン化するのは悪いことだと読みました。
重要なCSSに何らかの制限があり、その後、パフォーマンスに悪影響を及ぼしますか？
2011年時点で、14.6 KBが送信された後、ページのパフォーマンスが最初に低下します。最も高速なページの場合、すべてのHTMLコードは重要なCSSまでの最初のバイトは、このデータ量に収まる必要があります。
14.6 KBは、HTTPサーバーのサイズです 初期TCP輻輳ウィンドウ デフォルトのTCP IW値を10と想定（主要なWebブラウザーで合意されています） RFC 6928 ）。この14.6KBのペイロードは、データが受信されたことの確認を聞く前に（つまり、最初のネットワーク往復を待つ前に）サーバーがクライアントに送信できるデータの量を表します。
HTTP接続をサーバーからクライアントへの一連のボート遠征と考える場合、14.6 KBは最初のExplorerの船がいっぱいになり、残りのHTMLは座って貨物船を待つ必要があります。
したがって、HTMLの先頭（重要なインラインCSSの末尾まで）が14.6 KB未満であれば、それが最適です。 TCP輻輳制御の仕組み（各バーストが確認されるたびに送信されるデータ量が2倍になる）により、3回の往復で98 KB（14 KB + 28 KB + 56 KB）を送信できます。 Googleは、スクロールせずに見えるコンテンツはすべて、ドキュメントの最初の98 KBでレンダリング可能にすることをお勧めします モバイルページの速度上の理由から。
要するに、14.6 KBは、最初のRTTに収まる重要なインラインリソースの上限です。 3つのRTTとGoogleの推奨に収まるように、カットオフは98 KBです。