Best practice to optimize javascript loading

Question

I have read a few articles online about optimizing javascript loading. A few key points I got is to minimize the number of script files (http requests), minify and enable gzip on the server. Currently, what is done on my side is that all javascript files are minified, and gzip can be simply enabled as well.

Part 1)

My problem is that I have around 20 javascript files, there is one common.js that has all the core functions. Besides that, every page would load at least one other file that implements the functionality of that page.

Solution 1, is to combine all scripts in one big script file, and get loaded once for each client, which seems to be what everyone else is doing. I guess YUI or JSMin can be used for compressing, so I should combine the files manually?

Solution 2, lazy loading when a required function is needed, I don't really know how this works, but it seems to be a way to do it, though still requires more http requests. I would love to hear any inputs for this.

Part 2)

The web application I am working on will be deployed to many other computers, since javascripts are pretty small, is it a good practice to make a script that dynamically load the newest script from a central server, so that every client will run the newest script?

Answer 1

General best practice is considered to be

1. Merge into as few files as possible

2. Minify

3. Serve gzipped

4. Serve as late as possible (some may need to be in the head, but generally before or asynchronously is preferred

This is general advice, you need to do it and test to ensure it's right for your case.

Minimising HTTP requests is important, latency is a performance killer...

Answer 2

Part 1: Like you said, there's two approaches.

• Solution 1 is valid, and there are tools out there to do this, including Google's Closure Compiler. The problem is in most cases it needs every single script on your site to be included in order to work properly, so regardless of what your page might use, it gets everything
• Solution 2 is also valid, but like you said doesn't really prevent the multiple http requests. But it's good in that it only loads what you need, when you need it, and doesn't create any blocking calls on the initial page load. Head.js is an option that was mentioned, as well as Require.js and others.

Part 2:

• There are ways to force the browser to always download the latest javascript file, although this kind of negates the benefit of browser caching. One common way is to add a get variable to the end of the javascript URL, i.e. "domain.com/index.js?timestamp=_123123123". This is similar to what jQuery does when you turn off caching for its ajax calls.

Answer 3

You have to break optimisation into several steps

1. Optimize source code: There are good practices to write JS code that has less DOM overhead, creating less variables and DOM elements in memory, efficient loops, etc. These usually cannot be optimised by script compiler.
2. Minify: This has two solutions
   • Merge into one file and minify.(use Google's Closure Compiler, Uglify)
   • Minify each files, then lazy loading. I personally like to define my modules using AMD modular pattern. You can use a boot file to either choose to compile into one file or keep the module structure and lazy loading, but each of the module is minified too.
3. Server optimisation
   • Does your server serve gzipped javascript?
   • Try to use <script src='//...' async defer> when possible, if you have script dependencies, be careful when using asycn loading. If you use AMD module, it will make sure your dependent modules are loaded in advance, and they only load once per page refresh.
   • Use a CDN to serve your static content, store your images, files, javascript on a Content Delivery Network