I know the best way to load javascript and css is to join and compress css files together and same for javascript. So that if you need javascript files you only make 1-2 calls to server. But it seems making 3 requests, 1 for html document 1 for css and 1 for js is not the most performant way to load website. Also, as you can load js asynchronously you can load independent js files at once. Just make sure you are not loading too much js files.
So the question is, what is the optimal amount of files to be loaded? What should be the number of js and css files so that page loading was most performant? Is there some rule to calculate it? Is there any dependency on internet speed? So if internet is slow I dont want to open a lot of connections to server, but better use one?
Heres an answer from Kyle Simpson: https://stackoverflow.com/questions/12779565/comparing-popular-script-loaders-yepnope-requirejs-labjs-and-headjs/12786867#comment18314973_12786867 that states you need to split only if js file size is more than 100kb. I really tried to find something usefull, but all the descriptions are quite fuzzy. Thanks in advance.
Actually, most of the times there will be only one call for the html file. The browser by default (if not determined otherwise in the browser settings and/or the webpage header) will use local copies of the js and css files after the first time.
Most browsers can save up to 20 js/css files per webpage, so this is not a big concern.