2

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/jquery.supersized@3.2.7(slideshow/js/supersized.3.2.7.min.js),jquery@3.2.1,flexslider@2.6.3,fancybox@2.1.5(jquery.fancybox.min.js)"></script>
    • <link rel="stylesheet" href="//cdn.jsdelivr.net/g/jquery.supersized@3.2.7(flickr/css/supersized.css),flexslider@2.6.3(flexslider.css),fancybox@2.1.5(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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.