0

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.

Community
  • 1
  • 1
Yaroslav Yakovlev
  • 6,303
  • 6
  • 39
  • 59
  • Have you considered a Javascript loader? Pure JS modules that has no access to HTML or CSS you can set the async property to load asynchroniously or otherwise defer. 4 or 8 files is loaded in parallell or even faster on HTTP2. –  Jun 18 '19 at 14:15

1 Answers1

-1

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.

Gil
  • 1,794
  • 1
  • 12
  • 18
  • As yahoo have a lot of recomendations on how to send your files to the client I guess its quite a big concern. And the question is about what is the most efficient way, not should I try it or not. – Yaroslav Yakovlev Apr 07 '14 at 07:03
  • Develop-wise, it's best to separate the files (html, css, js), otherwise maintenance won't be so easy. You can combine all js files to one big file and avoid multiple requesting, but then when the browser will update that js file it will have to load it again and it might be a bit less efficient than reloading single smaller files here and there – Gil Apr 07 '14 at 07:13
  • Gil, please, read the question carefully. I know about the options. I need to know how to check the most efficient way to serve the files. Making one big js is obviously, not the best way. – Yaroslav Yakovlev Apr 07 '14 at 07:22
  • Ok, i'll step back :) – Gil Apr 07 '14 at 08:34
  • The consern is the first visit. So this is not a good answer (but an answer is better than nothing) to have up to 20 files (optimal to not throw any away from cashe) because first time visitors is fast to hit the back button. A popup makes me back off too. It must be very important intro explaining it is a first time visit and excuse for load time and show progress bar... –  Jun 18 '19 at 13:58
  • +1 because an answer is better than nothing. And it answered the question "optimal amount of files to be loaded" –  Jun 18 '19 at 14:23