How can I reduce the costs of loading large JS libraries?

Question

If I am using a large Javascript library for my page, how can I make sure that this does not impair the user's use of the site?

Answer 1

There are 4 things you can do.

1. Minify your JS File. This removes all comments and Whitespace to reduce its size.
2. Combine your JS Files on each page so that there is only 1 file.
3. Use a package to gzip your files when you send them. This will make them even smaller
4. Put Javascript that isn't required immediately at the bottom of the page so that it loads at the end. This will allow the user to see and use the page even before the JS is completely loaded.

And some other people have suggested:

• Apache will automatically handle compression (and caching of compressed content) which massively simplifies management of files
• Making JavaScript properly cache-able will yield big benefits.
• Wildcard domains (with multiple URIs) will allow more concurrent connections. Pre-fetching is not just for images/

Answer 2

If you are using common libraries (such as jQuery, Prototype or Dojo), you can offload the file to Google and make them serve it, this gives you several advantages:

• You don't have to worry about minifying and zipping etc
• It's not your bandwidth
• These files come from a different domain, so you can (at least partially) workaround the limit of 2 parallel requests per hostname
• If you're lucky, the user has already visited some other site that used the same library from the same provider, so they already have it in the browser cache.

Note: The version you ask for can have a large impact on the caching characteristics: asking for jQuery 1.4.2 will give you a file that can be cached for a year, but 1.4 can only be cached for an hour.

Answer 3

You can put the whole library into one js file and compress the file. However, it really only matters for the first loading of a page. After this your js file will be cached in the browser, in particular if you set the cache-expiration long enough. Hence any consecutive hit will not load your js file anymore.

Answer 4

In addition to the answers above, you can use the Google Closure Compiler to automatically compress and optimize your JS while integrating with other 3rd party libraries (jQuery, YUI, mootools, etc.)

Answer 5

If you have a number of page elements & access to separate domain, you can consider hosting all static files including the large JS file on the second domain.

As Steve Souders notes in his High Performance Web Sites blog -

...in some situations, it’s worthwhile to take a bunch of resources that are being downloaded on a single domain and split them across multiple domains. I call this domain sharding. Doing this allows more resources to be downloaded in parallel, reducing the overall page load time.

elsewhere he writes..

Browsers open a limited number of connections per domain...Splitting, or sharding, the requests across two domains, as opposed to one domain, results in a faster page, especially in IE 6 & 7