Remote CDN: Pro's and Cons of grouping CSS and JS

Question

I'd like to know the pros and cons of grouping external CSS and JavaScript files. The grouping method I'm referring to often seen by external libraries providers such as Google fonts and jsDelivr.

For example:

• Google Fonts
  • <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)">

Typical answers I'm looking for is a list of the cons and pros, i.e cachable, not cacheable, reduces server-side requests, actually increases load time and so on.

Answer 1

Grouping JavaScript and CSS has several advantages.

• Smaller size: HTTP gzip compression is applied per request. When multiple JS or CSS resources are in the same request, commonalities between them can be compressed.
• Reduced latency: fewer round trips to the server. Each request from the browser requires a round trip request to the server. Batching requests eliminates this additional latency waiting time

The only disadvantage would be that the files cannot be fetched in parallel. However, parallel fetching of several resources from the same server does not usually help overall performance.

I'd recommend fewer requests for larger combined files. The advantages far outweigh any disadvantages.