How much Javascript is too much?

Question

I am building a SAAS web application and as soon as I include jQuery and jQuery UI the javascript is already 300kb. Add my own and a few bits and minified it is still 400kb. What are you limits on Javascript and what do you do to make sure the performance is still good?

Answer 1

gmail is over 2 megabytes of mixed resources (scripts, images, etc) after it fully loads. I think that should give you an indication.

Other than the specific question you asked, there are many best practices you can follow to cut down on loading times. Minify your scripts, gzip-encode everything (even dynamic content if server resources allow for it), meticulously compress your images, etc. As Corey said, use YSlow or the Chrome profiler.

Answer 2

Cut down on jQuery UI. It looks like you have the whole package there. Pick and choose only the components you need.

Answer 3

Look at page load times. Tools like YSlow and Firebug should give you some numbers to look at, and YSlow will give you suggestions on things you can do to improve page load times. Its hard to give a definite answer like Xkb is too big because its relative. You may actually need that big of a JS file. Also depending on the bandwidth of the server it could serve that file incredibly fast or incredibly slow.

If you are seriously concerned about load times, minify all of your Javascript. That will reduce the size of the files.

YSlow link.

Answer 4

Obviously, too much depends on your target audience, a site or application targeting mobile devices will have different requirements than an intranet application.

Run-time performance will depend on a lot of factors for which we'll need a more information in order to help you out.