is it a good idea to put all javascript file's content into one file to reduce server request and keep at bottom to increase performance?

Question

I use simple javascripts, jquery library and many plugins , should i make one file for all if yes then what we need to "just copy and paste and code from all file into one in needed order" or any thing else need to be considerd.

as stated here http://developer.yahoo.com/performance/rules.html#num_http

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

and this http://developer.yahoo.com/performance/rules.html#js_bottom

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostname

It these are god practices then

How to combine multiple javascript ito one without getting any conflict?

Is it just same as i copy all css code from all files into one or it's tricky?

Answer 1

For each file you have, there are two steps :

• send the HTTP request to the server
• download the content of the file

If you reduce the number of files by combining them, you will reduce the number of HTTP requests -- which means your page will load a bit faster ;; which is good for your users ; which is why it's recommended.

But this will make debuggig harder, which is why it's recommended to do this only on your production environment, and not on the development platform -- hence the "making this part of your release process" part.

Of course, the process of combining your files content should not be done manually -- else, you'll have to re-do it each time there's a modification made ; it should be fully automated, and done at the time you are building the archive that is going to be deployed on your production server.

Also :

• You might gain a bit on the "dowload" part if using minification
• You will gain a lot more on the "download" part if using compression (see mod_deflate, for Apache)

Ideally, you can use all three solutions, btw ;-)

Placing the <script> tags at the end of your page will :

• allow the content of the page (which generall is what matters the most) to be displayed faster
• but will only work if your page/JS is coded "correctly" (i.e. unobstrusive JS, not using JS "hardcoded" in the HTML page)

This can help too -- but might be a bit harder to achieve than combinaison+minification+compression.

Answer 2

Take a look at this article

Supercharged Javascript

Answer 3

There are several methods for improving javascript load performance.

Combine scripts into one file: I suggest only combining scripts you write/maintain yourself. Otherwise if the 3rd party library is updated it could be tough to update your combined file.

Use JSMin to reduce the size of javascript files, see http://www.crockford.com/javascript/jsmin.html.

Use Google's CDN for referencing JQuery and JQuery UI, see http://code.google.com/apis/ajaxlibs/documentation/, eg: <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'&gt;&lt;/script&gt; This avoids the user loading the file at all if their browser already has it cached.

Answer 4

For JQuery, you should be loading from Google. Since a lot of places use Google's JQuery, it's likely that it will already be cached and even potentially compiled on the user's machine, which is about as good as one can possibly get. Cache beats all when it comes to JS optimization.

If you're using one set of JS files across all the pages on the site, you can get a similar effect by combining them into one file and using it everywhere; the browser will load it on the first page the user visits and then the JS will be cached.

However, if each of your pages uses a different set of files, the cache benefits will be vastly reduced and in fact it may be counterproductive, since the browser will detect a+b.js as a different file and will load it even if a.js and b.js are already cached. Additionally, combining the files in the right configurations for each page is a non-trivial dependency-tracking problem. In short, it's more trouble than it is worth unless you're serving millions of unique hits per day, and even then it might not be a good idea.

In any case, minification and compression should always be applied in production, since they have basically no downsides.