ページスピードのみを考慮すると、CSSまたはJSが外部化するのに十分な大きさ

Question

CSSとJSファイルを外部に保管することをお勧めします。理由：追加のHTTPリクエスト*で失うものは、キャッシュ可能な静的コンテンツ（通常はCSSとJS）をダウンロードしなくて済むことが多いからです。

しかし、外部ファイルが小さければ小さいほど、追加のHTTPリクエストにはペナルティが生じます（たとえそれが304 Not Modifiedの応答であっても）。したがって、外部ファイルが小さくなるにつれ、CSSやJSの内容をインライン展開するのに適しています。

いくつかのテストを実行しました。詳細を経由せずに、私の結果は次のようになります。

External File Size Average Gain 
---------------------------------- 
       1KB   -3.7ms 
       2KB   -3.7ms 
       4KB   -4.0ms 
       8KB   -3.0ms 
       16KB   -2.7ms 
       32KB   1.0ms 
       64KB   2.7ms 
      128KB   10.0ms 
      256KB   493.7ms 
      512KB  1047.0ms 
      1024KB  2569.7ms 

私の一般的な結論は、彼らがBIGを取得するまで、外部ファイルを使用することは本当に重要ではありませんということです。そして、BIGによって、私は50-100KBの範囲を意味します...そして、それを縮小してgzipします。

追加データを使用してこれらの結果を確認または拒否することはできますか？

（* HTTPを使用していないと仮定すると、ヘッダーを「有効期限」）

Answer 1

私は、追加のデータを持っていないが、私はあなたの結果を論理的に意味をなすことを確認することができます。今日のほとんどの人々は高速ブロードバンド接続を利用しています。ほとんどのWebサーバーは、送信するテキストベースのコンテンツを自動的にgzipします。したがって、多くの場合、外部リソースを読み込むための2番目の要求を送信する（または、 ）は、元の要求の一部としてもう少しデータをダウンロードすることによって発生するコストよりも大きくなる可能性があります。

5Mbpsの平均接続速度と100msの典型的な往復時間を想定して、必要に応じて数学的にこれを実行することもできます。これらの前提では、2番目の要求を行うオーバーヘッドが正当化される前に、最初の要求のペイロードに最大62,500バイトを追加できることがわかります。そしてそれはあなたの数字と非常によく似ています。

しかし、キャッシング/ページロードの観点以外にも使用する理由があるため、「外部ファイルを使用しても問題はありません」という意味ではありません。たとえば、複数のページにまたがって再利用される共通のCSSスタイルとJavaScriptユーティリティを使用している場合は、コードや全体的なサイト構造を損なうことなく使用できます。私はこれが少なくとも、外部ファイルを使用する/使用しないことから得られるかもしれないページロード時間の小さな利得または損失と同じくらい重要であると主張したいと思います。そのため、外部ファイルを使用するコンテキストでは、小規模のリソースでも意味があります。