Which is better for JavaScript load-time: Compress all in one big file or load all asynchronously?

Question

Hi,

A simple question that I'm not sure if it has a short answer!

Description
I have a files of JavaScript that to be loaded in a website here are some notes about them:

• They are all comes from the same domain (no cross domain loading needed)
• They are identical around the website.
• There are several files, like jQuery, and 5 other plugins plus my own application script that is based on them.
• Their size all compressed = 224KB, ( I combine all the files in one file then I compress them at once using YUI Compressor 2

Problem
I've heard that 224KB is not ideal to be in one file! and it should be split into several files with maximum of 44KB each .. I can't recall when I've heard this and I'm not sure if it's effective to split it into more files, but It's true that 224KB takes long time to load for the first time, consider that the website is loaded with images and css of course.

I've minimized the need for the early loading of JavaScript file and put it on the bottom, so far this is a good progress but I need to load it assynchounosly with the HTML to gain time Source and the decission to make is:

Yes or No?
Keep it in one compressed big file? or to split them into many compressed file and loaded a asynchronously (I'm aware of handling the dependency related problems)?

Answer 1

There is no exact answer to this question. It pretty much depends on how and when you are making use of those files.

Typically, you only want to download JS files on pageload which are universally required by the web app. Module specific or page specific JS files shouldn't be compressed in the main JS download and would ideally be loaded on demand.

Also, this question is valid only if you are concerned about user experience for first time users. The JS files would be cached anyways for every other visit.

Answer 2

It depends on what the site is and how important first load time is for it.

Regardless of that though, I'd probably load JQuery and stuff like that from a public CDN. One big benefit is that it might already be cached even if they have never been to your site.

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

The Cappuccino team is a big proponent of one file -- they make a javascript framework. Apps made with their tool are expected to have some load time.

http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/

Answer 3

Another benefit of loading JQuery and related from a public CDN would the increased requests by destination. I believe the client is restricted to 2 requests per domain, so by loading jquery from google, and a plugin from jquery, and your custom app code from your own domain, the browser can execute these concurrently rather than waiting for the first two and then issuing a third request.

I guess this adds another performance improvement over one large file as well. Even if you just split that 1 file into 2, it could be retrieved with 2 concurrent requests from the browser potentially improving load time.

Answer 4

Here's what we did to make our web app fast.

The main JS and CSS files are compressed and put inline with the HTML markup.
The white spaces of the HTML are removed and the images are converted to data:image/png by a shell script.

The size is ~400kb but cached and gzipped.
The mobile version of the web app is the same but at ~250kb. It means the whole app is ready to run, like an executable, in a single http call.

Then a second http call get the data(JSON), and we use PURE to render it in HTML using the existing markups in the page as templates.

The app is divided in modules, only the common modules are preloaded this way.
The others are coming when requested by the user.