Mobile app version of vmapp.org
Login or Join
Speyer207

: Remote CDN: Pro's and Cons of grouping CSS and JS 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

@Speyer207

Posted in: #BestPractices #Cdn #Css #Html #Javascript

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.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Speyer207

1 Comments

Sorted by latest first Latest Oldest Best

 

@Heady270

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme