What's the best method to reduce the number of external JavaScript calls (HTTP Request)?

Question

Currently I'm having the following external javascript in my header:

 <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.validate.js"></script>
 <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
 <script type="text/javascript" src="scripts/jquery.scrollTo-min.js"></script>
 <script type="text/javascript" src="scripts/jquery.localscroll-min.js"></script>
 <script type="text/javascript" src="scripts/custom.js"></script>
 <?php if($lang_file=='lang.en.php') {echo '<script type="text/javascript" src="scripts/jquery-validate/val-en.js"></script>';} ?>

Google's Page-Speed recommended me to reduce the number of external JS calls. But I'm not very sure what's the best method of doing this.

Any suggestions?

Answer 1

When you go to production, combine all the scripts into a single script that contains each in the order that you want them loaded. Then include only this combined script in your page. Or, if page load seems fast enough, don't worry it -- until the number and size of the scripts starts causing you problems.

Answer 2

You would have to combine them all into one file... but I would just leave it as is.

It's not really a big issue except on first load because most browsers will cache those files and web servers will tell the browser if there's an update.

Answer 3

I'm not a fan of combining multiple javascript files into a single file. It ruins the time and care taken to seperate out the purpose of each script as well as increasing the difficulty in maintaining the scripts.

A better approach is to put a script combination handler in place. This allows you to keep you scripts cleanly seperated in your solution with the advantages of a single delivery to the client using an automatic combiner.

Here's an example of a javascript script reference combiner for PHP.

Answer 4

Personally, I would leave them as separate files unless your site is getting a very, very large amount of traffic—it makes debugging simpler and keeps things nicely organised.

Another thing: I'd recommend loading jQuery itself from the Google AJAX Libraries. It will offload one HTTP request to Google (allowing the rest of your scripts to start downloading more quickly) and has the added benefit that many visitors will already have it cached on their machine, as the AJAX Libraries are so widely used by major sites.