Many CDNjs vs one minified local js

Question

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.1/jquery.inputmask.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/spin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script>

vs

<script src="/myMin.js">

(myMin.js will contain all js file concatenated together and minified) What is the best for performance? I am using cdnjs because it solves the problem of people in other region downloading the js file directly from my server. For example, people in Asia don't have to download my js file from USA server, which is a huge performance issue. cdnjs helps me with scattering js file all over the globe. Since cdnjs is downloaded asynchronously so when will myMin.js be preferred?

Answer 1

I would say that using lots of CDN references is preferable, for the simple reason of HTTP/2.

Cloudflare supports HTTP/2, I believe, so you are better off by having multiple, single purpose scripts than one combined one.

From their blog post entitled "HTTP/2 for Web Developers", the section called "Stop Concatenating Files" is particularly relevant:

However, concatenating files is no longer a best practice in HTTP/2. While concatenation can still improve compression ratios, it forces expensive cache invalidations. Even if only a single line of CSS is changed, browsers are forced to reload all of your CSS declarations.

In addition, not every page in your website uses all of the declarations or functions in your concatenated CSS or JavaScript files. After it’s been cached, this isn’t a big deal, but it means that unnecessary bytes are being transferred, processed, and executed in order to render the first page a user visits. While the overhead of a request in HTTP/1.1 made this a worthwhile tradeoff, it can actually slow down time-to-first-paint in HTTP/2.

Instead of concatenating files, web developers should focus more on optimizing caching policy. By isolating files that change frequently from ones that rarely change, it’s possible to serve as much content as possible from your CDN or the user’s browser cache.

We all need to start questioning these standard tricks for improving performance now that HTTP/2 is pretty widely supported.

Answer 2

There are several things to consider to make a decision. A couple of them:

Performance: Using a CDN is recommended as those .js files are heavily cached world wide. This will help the most with users that are located far away of your origin server location. This also will help you save bandwidth usage in your origin, same as CPU and other resources.

Framework compatibility: The disadvantage of using CDN files is that if the public library has any changes on a version update, your applications may stop working as some methods or features may change from version to version. If you use a local file, you are sure that your application will work regardless of any version updates done to the public library.

All in all, if you do not have many applications to support where a change in a method in one of the libraries would cost you a lot of changing to do, use the CDN versions of the libraries as they would ultimately save you resources; let that be money or server resources.