Website load performance

Question

I was planning to improve my website load performance with public CDN using requirejs, so that I can have local fallback when public cdn fail. But soon, I found out that requirejs has the optimize function, which combines all required module into one big js file.

So, which one is the better practice and have better performance? Loads multiple JS files across multiple public CDN or one big JS file from local?

Answer 1

You forgot option 3: one big file from CDN. It's usually best to have as little requests as possible, because less than the network speed (kb/s), network latency is a problem.

But, if your code changes a lot (and users often return), it might be a reasonable idea, to concatenate all your libraries and plugins into one file and your own code into another, instead of having 1 big file all together. This way, if you make a small change, it's not 1 big file that changes and has to be downloaded again, but a user will only need to get your script file and not the (unchanged) libraries again. And those outweigh the custom code by 10:1 in my experience.

Also, if you use a CDN link for jQuery, best case it's already in the users cache.

In the end I'd also advise you to test the different options (Chrome DevTools' network tab). I had a case where a CDN link was a perceivable slower than a "local" link (maybe due to my location, Australia).

Answer 2

It will depend on the nature of your website.

For instance, if most of the modules are required on most pages you'll benefit more for the bundled option.

If you have many modules and most modules only appear on a single/few pages, then you'll benefit more for the CDN option.

If you expect most traffic to come from repeat users, as opposed to unique users you might also benefit more from the bundled option.