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 remended 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?

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 remended 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?

• external
• javascript

4 Answers 4

When you go to production, bine all the scripts into a single script that contains each in the order that you want them loaded. Then include only this bined 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.

You would have to bine 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.

I'm not a fan of bining 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 bination 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 biner.

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

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