リモートCDN：CSSとJSのグループ化の長所と短所

Question

外部CSSファイルとJavaScriptファイルをグループ化することの長所と短所を知りたい。私が言及しているグループ化方法は、GoogleフォントやjsDelivrなどの外部ライブラリプロバイダーによく見られます。

例えば：

• Googleフォント
  • <link href="//fonts.googleapis.com/css?family=Inknut+Antiqua|Ravi+Prakash|Roboto">
• jsDelivr
  • <script src="//cdn.jsdelivr.net/g/[email protected](slideshow/js/supersized.3.2.7.min.js),[email protected],[email protected],[email protected](jquery.fancybox.min.js)"></script>
  • <link rel="stylesheet" href="//cdn.jsdelivr.net/g/[email protected](flickr/css/supersized.css),[email protected](flexslider.css),[email protected](jquery.fancybox.min.css)">

私が探している典型的な答えは、長所と短所のリストです。つまり、キャッシュ可能、キャッシュ不可、サーバー側のリクエストを減らし、実際にロード時間を増やしますなどです。

Answer 1

JavaScriptとCSSのグループ化にはいくつかの利点があります。

• 小さいサイズ：HTTP gzip圧縮はリクエストごとに適用されます。複数のJSまたはCSSリソースが同じリクエストにある場合、それらの間の共通性を圧縮できます。
• 遅延の削減：サーバーへのラウンドトリップが減少します。ブラウザからの各リクエストには、サーバーへの往復リクエストが必要です。要求をバッチ処理することにより、この追加の待ち時間待ち時間がなくなります。

唯一の欠点は、ファイルを並行してフェッチできないことです。ただし、同じサーバーから複数のリソースを並行してフェッチしても、通常は全体的なパフォーマンスは向上しません。

結合された大きなファイルには、リクエストを少なくすることをお勧めします。利点は、欠点をはるかに上回ります。