: How can I reduce the costs of loading large JS libraries? 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?

@Miguel251

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

Vote Up Vote Down

@Hamm4606531

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.)

Vote Up Vote Down

@Murphy175

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.

Vote Up Vote Down

@Mendez628

There are 4 things you can do.


Minify your JS File. This removes all comments and Whitespace to reduce its size.
Combine your JS Files on each page so that there is only 1 file.
Use a package to gzip your files when you send them. This will make them even smaller
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/

Vote Up Vote Down

@Jamie184

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.

Vote Up Vote Down