max size of Minify/Combining JS Files

Question

I'm interested what is max size of Minify/Combining of one file. So I have a multiple js files and I find I need to make around 2-3 portion of files by 3-5 files.

Answer 1

There is really no hard, golden rule here. Typically, you want to make a page load with as few HTTP requests as possible. However the Ultimate goal is to make a page load as fast as possible. While reducing request count is key, it is not the only factor. For example, if you had a page with one 100k js file, no css, no images, no other requests. That page will load more quickly in most modern browsers if the page had 4 25k js requests because the 4 requests can be parallelized accross 4 connections. However, your typical web page has 30 to 100 requests and these will load much faster by combining files because most browsers are limited to 6 connections per host and there is latency involved in opening new connections as well as blocking issues with javascript and css depending on browser type where no other connections will be initiated until the js or css is loaded. This can also depend on if these resources are in the head or not.

So it all depends on your page and your target browsers. Personally, I use 50k as a max size for a single css or js. This admittedly is not extremely scientific. Its a nice round number and one that I find accomodates several typical css or js files and is not so big that it is prohibitive.

Answer 2

Max size is maximum of largest request

eq

index   3KB
CSS     10KB
jquery  32Kb

Best size is about ~14KB = MTU + headers

eq

CSS   16Kb   - 172ms
JS    32Kb   - 359ms
Js    17KB   - 281ms
JS    15,8KB - 250ms
ga.js 13KB   - 109ms

Apache not compress deflate file greeter that 3MB

Conclusion If you had 1 JS file about 32Kb

* Download this file: ~359ms

IF you had 2 JS file for 15Kb

* Download this 2 file: ~259ms