Reducing the number of HTTP requests is the key to faster pages. As read in the best practices for speeding up your web site:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. 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.

CSS Sprites is another way to reduce the number of requests but we wont be handling sprites in this article.

So combining of the javascript and CSS files, you can do this either by manually putting all the javascript files in one large file or let a script handle the combining for you. I think I'm gonna choose the latter. The combining script I use on this site is created by a dutch programmer called Rakaz and can be found at this link: Make your pages load faster by combining and compressing javascript and css files

This PHP script is awesome, it not only combines your files but also compresses it and stores a cache for instant response time. So just follow the guidelines at the page above and you'll be speeding up your web site in no time. For this site it made a noticeable difference and cut down the load time from 4.69 sec to 3.55 sec.

For Nucleus CMS users I have tweaked the script a little for ultimate usability, read on below.

Download the customized script for Nucleus users at this link: Combining JS and CSS Script

How to use this script?

Step 1 Download the script above, open it and at the top change the variable $cachedir to the directory where you are gonna cache your combined files, if you don't have such a directory create one and make sure it is writable. Secondly change the $dir variable to the directory of your skin. You should get something like:

$cache = true;
$cachedir = dirname(__FILE__) . '/cache';
$dir = dirname(__FILE__) . '/skins/default';

Upload the combine.php script to the root of your website.

Step 2 You need to create or modify your .htaccess file. If you do not have a .htaccess file you can create it in the root of your website and add the following lines. If you already have an preexisting .htaccess file you can simply add the following lines to the file where you have to replace default with your current skin name:

RewriteEngine On
RewriteBase /
RewriteRule ^skins.*/default/([^/]+\.css|[^/]+\.js)$ combine.php?files=$1

Note: if your preexisting .htaccess file already uses URL rewriting you do not need to add the first two lines. You can simply add the last line to the bottom of the .htaccess file

Step 3 Change the js and css lines in your head.inc file in the admin area at "skin files" area to something like:

<link rel="stylesheet" type="text/css" href="<%skinfile(newstyle.css|nicetitle.css)%>" />

<script type="text/javascript" src="<%skinfile(nicetitle.js|swfobject.js|popup.js)%>"></script>

Note: Of course you should use your own filenames