Page Performance: To Load Multiple Library Scripts From Cdn Or Combine And Minify Those Libraries Into One Download From Server?

I understand the advantages of loading big and common libraries like jQuery from CDN. But what about the smaller plugins and library helpers like jQuery-ui or bootstrap and its hel

Solution 1:

The good thing about using CDN is that the user gets the file from the closest CDN. Also, it's probable that the user already has that file on his computer so he doesn't need to download it.

Creating bundles will minimize the amount of GETs the browser needs in order to get all the scripts/styles.

My recommendation is to use a combination of both because browsers can only download 5 files at the time. So, use CDNs for the most common libraries (the user probably already have them) and use bundles for your own files (your stylesheets or your JS files).

Check the network tab in Developer Tools measure the time it takes in each case.

Solution 2:

I'll definitely advice to use what you can from cdnjs and similar CDNs. Most of the time people will have the files cached so there will be no additional HTTP requests. Concatenating and magnifying everything that you can not load form CDN will save you some bandwidth and speed the loading time of your site.