Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

5 Answers

up vote 25 down vote accepted

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/
share|improve this answer
    
There are more things you can do, and better ways of doing these. Apache will automatically handle comptression (and caching of compressed content) which massively simplifies management of filse. Making javascript properly cacheable will yeild big benefits. Wildcard domains (with multiple URIs) will allow more concurrent connections. Pre-fetching is not just for images/ –  symcbean Jul 19 '10 at 8:36
add comment

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.

share|improve this answer
1  
+ 1 for CDN, and scriptsrc.net to make it even easier ;) –  Agos Jul 15 '10 at 17:12
1  
Can you expand on your 'note'? Why is there a difference in the caching time? –  theycallmemorty Jul 15 '10 at 19:49
2  
@theycallmemorty: While I've not checked the docs, I'd assume that it's because by specifying 1.4.2 you're being very specific about the version you want, while asking for 1.4 you're basically saying "give me the most recent version under 1.4", so they are not caching it as heavily. –  Zhaph - Ben Duguid Jul 15 '10 at 22:50
    
Also worth noting is that Microsoft makes some JS libraries (jQuery and some MS specific ones) available on their CDN which also supports https (which many other script CDNs do not support) asp.net/ajaxlibrary/cdn.ashx –  Bert Lamb Jul 19 '10 at 14:03
add comment

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.

share|improve this answer
    
+1 for you can put the whole library in one file and compress it. Didn't think of that. –  Gordon Gustafson Jul 31 '10 at 2:17
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.