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

Question

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

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/