7

I'm having difficulty in deciding which approach is better in terms of site performance.

Either to have all required jQuery plugins in one file to be included on every page on the site OR split the plugins out to individual files and use the jQuery.getScript() method to load them as and when required.

Is there any real benefit in loading the scripts asynchronously over one http request?

All my Javascript will be minified and gzipped.

Thanks!

jigglyT101
  • 984
  • 1
  • 15
  • 33
  • You may also be interested in LabJS - http://labjs.com – El Yobo Dec 20 '10 at 01:31
  • The only way to know for sure is to try both and **measure the results** for your specific case. – Day Dec 20 '10 at 17:41
  • I get the benefits of loading just one js file (with frameworks loaded via CDN) - that works on desktop browsers. But my concern is that increasingly, sites are accessed via mobile devices which have very small caches (iPhone has 25k) which means they will always have to load that one js file. Could creating a offline storage manifest - for those supporting mobiles - work? – jigglyT101 Dec 22 '10 at 00:24

4 Answers4

2

It's not so simple and depends on the distribution of javascript across your site. Have a look at this question : Which is better for JavaScript load-time: Compress all in one big file or load all asynchronously?

Community
  • 1
  • 1
David Tang
  • 92,262
  • 30
  • 167
  • 149
2

From my poit of view the best solution until now is controljs

Read the complete post http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/

Martin Borthiry
  • 5,256
  • 10
  • 42
  • 59
0

One request will be better for performance. Period. Only downside is, every time one of the files changes, the whole thing changes (and will have to be downloaded again). Plugins won't change much, so I'd put everything (as much as possible) in 1 file.

Put jQuery core in that file as well. And your custom javascripts as well. Just make sure it's in the right order :)

Rudie
  • 52,220
  • 42
  • 131
  • 173
  • 3
    Not necessarily true; if long term caching is used (so that no HTTP request is sent) then there is no performance penalty and may be performance gains (only processing the required scripts, plus the page loads faster as scripts are only downloaded once the page is rendered). – El Yobo Dec 20 '10 at 01:39
0

Try the YSlow plugin to Firefox and try your different setups.

That said, minifying your js to one file would be an easy way with great results. You will get one file, and it's often very much smaller than the sum of the parts.

Niklas Wulff
  • 3,497
  • 2
  • 22
  • 43