Question

The dillema is like this:

If I try to fit all the scripts blocks on the masterpage (include page in some frameworks), every page gets a copy of every script (including the ones they don’t need) and these quickly adds up and bloats the page size.

If I include/insert script blocks where needed, javascript will be spread all over the project.

I am struggling with where to keep the right balance. Anyone?

Answer 1

We minify, merge and gzip our site wide JS (which is actually about 17 files merged down into two files, one for all our code and one for library code like mootools and clientcide). This greatly reduces the time it takes to download the scripts. Compression and merging are done and the fly and cached on the server so development is not slowed at all. Our total JS for the sitewide goodies is about 50K once all compressed up as above.

We also set a long expires time on the files, which all have a version number so when we make a change we up the version number (we have a sitewide one to make it easy) and users are forced to get a fresh version and once downloaded they are cached by the browser.

Additionally to that we have made the move to put our JS at the footer of the page, this allows everything to render out much faster and gives the user something to look at while we download the JS.

Some individual pages have one off scripts that they need (search forms, etc.) these get the same treatment as above (ie all the files needed would be merged, minified, gzipped) but the sitewide code is left as is so we can make use of the caching. So in this instance we could down load 3 JS files, sitewide, library and custom code for that page(s).