Multiple files on a CDN compared to one file locally

Question

My site uses about 10 third-party javascript libraries such as jQuery, jQuery UI, prefixfree, several jQuery plugins, as well as my own javascript code. I am currently listing external libraries from CDNs such as Google CDN and cloudflare. I was wondering which approach is better:

• Pulling external libraries from CDN (as it is today).
• Combining all files with one js and one css file and saving them locally.

Any opinions are welcome while they are being explained. Thank:)

Answer 1

The value of CDN is the likelihood that the user has already visited another site, calling the same file from this CDN, and is becoming increasingly valuable depending on the size of the file. The likelihood that this is so is increasing with the ubiquitous file request and the popularity of CDN.

Given this, pulling a relatively large and popular file from a popular CDN makes sense. jQuery and, to a lesser extent, the jQuery user interface, correspond to this score.

Meanwhile, file concatenation makes sense for small files that are unlikely to change much - your commonly used plugins will correspond to this account, but your main application code cannot: it can change from week to week and if you combine it with all your other files, you have to force the user to download again and again.

The HTML5 template provides a good general solution for this:

• Modernizr is loaded from the local in the head: it is very small and differs significantly from instance to instance, so it doesn’t make sense to fix it from the CDN, and it won’t hurt the user to download it too much from its server. This is put to the head because CSS can be using it, so you want the effects to be known before the body does. Everything else goes from below to stop the heavier scripts that block rendering during loading and execution.
• jQuery from the CDN, since almost everyone uses it, and it's pretty heavy. The user probably already has this cache before they visit the site, in which case they will download it from the cache instantly.
• All your smaller third-party dependencies and code fragments that are unlikely to change much are combined into a plugins.js file downloaded from your own server. This will be cached using the remote expiration header on the first visit to the user and loading from it the cache on subsequent visits.
• Your main code is in main.js , with a closer expiration header, to take into account the fact that the logic of your application can change from week to week or from month to month. Thus, if you corrected the error or introduced new functionality, when the user visits two weeks from now it can be loaded fresh, while all the contents above can be entered from the cache.

For other major libraries, you should look at them individually and ask yourself if they should follow the jQuery example, boot individually from your own server, or concatenate. An example of how you can come to these solutions:

• Angular is incredibly popular and very large. Get it from the CDN.
• Twitter Bootstrap is at the same level of popularity, but you have a relatively thin selection of its components, and if the user does not already have it, maybe you should not force them to download everything. Having said that, the way it fits into the rest of your code is pretty internal, and you are unlikely to change it without rebuilding the entire site - so you might want to save it locally locally, but keep it separate from your main plugins.js . This way, you can always update your plugins.js with the Bootstrap extensions, without forcing the user to download all Bootstrap kernels.

But there is no imperative - your mileage may change.