There are a few things to be aware of before you consider this as a valid option for your web site:

All the above drawbacks come from the fact that the database is not called frequently for these items. The pages come from the cache, which serves them very fast. Another thing to be aware of is the fact that you could run into trouble if the CSS files that are optimized call a dynamic CSS file. It might break because of an incorrect path call, as the originally called file is no longer there in the cache.

So, as a final warning I would say "test, test, and test" until you get everything working as expected. If it does, you and your visitors will enjoy a super fast loading web site. The Search Engine Robots will like it as well.

To start with, you can just optimize your CSS files. This option is a very simple one, and you can implement it online using CSS compressor—a great tool available at http://iceyboard.no-ip.org/projects/css_compressor. Before you start this process, make sure you have a copy of the original CSS file as backup.

The tools used to optimize a CSS file will do the following things to your file:

Especially, the last option will make your CSS file very difficult to read. Consider a CSS file as shown in the next screenshot:

The Strip whitespace option will make it look like the following:

As you can see, for us, the mere mortals, this is very difficult to read. But the net effect of this action is shown here:

As you can see there is a reduction in the file size by 24.4 % or a total gain of 6.33 KB. We talked about the speed of your template and the effects on SEO previously. If you have a template that you really like and want to keep, do this exercise with all the CSS files of your template. It will reduce the size so that you can still gain momentum. The total time to perform this exercise is counted in seconds. Go to the web site, copy the URL or the CSS content of your template if you want to run this code in the optimizer, and paste the optimized code back into your Joomla! template editor. It's done!

This might take some more work on your part and is not as easy as the previous option. There is a reason why the CSS files in a template are separated. This is done to give you more configuration options such as changing the color of the layout. You can have a green.css, blue.css, red.css, and even orange.css, all separate from the general.css file. Combing them into one is done through a simple copy and paste technique. The code from both the templates are combined into one and saved.

That was easy—wasn't it? Now, you have to check how these files are called in the index.php file of the template. This should be changed to the newly-created and uploaded file.

Here is an example code for such a call:

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
<?php if ($tmpTools->getParam('rightCollapsible')): ?>
<script language="javascript" type="text/javascript">
var rightCollapseDefault='<?php echo $tmpTools->getParam('rightCollapseDefault'), ?>';
var excludeModules='<?php echo $tmpTools->getParam('excludeModules'), ?>';
</script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.rightcol.js"></script>
<?php endif; ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template_rtl.css" type="text/css" />
<?php else : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/menu.css" type="text/css" />
<?php endif; ?>

This again is not that easy to read.

The following line calls the template.css file, which is the one you can edit with the template editor of your Joomla! site.

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

They are defined by the site's parameters in the templates configuration, as shown next:

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template_rtl.css" type="text/css" />
<?php else : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/menu.css" type="text/css" />

If you want to combine the three files, you should not only combine them but also replace the existing references to these files with the reference to the new combined file. If you want to use this option, you will see it is not that easy to change these options. However, it is an exercise that will give you a better understanding of CSS and the index.php file of your template.

We looked at the difficulties in combining CSS files. For that you looked at the index.php file of your template. One thing you must have noticed is that all calls to the CSS and JavaScript files are done like this:

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />

This means for every file there is a call to the database to determine the file location. See the following line of code:

echo $tmpTools->baseurl();

This call is done within the template so that the template can be used on any Joomla! based web site on any domain. But you know your domain and the path to your files. So, you can just copy that information form the source view of a generated page of your site. Backup the information of your template's index.php file before you start. Keep a copy of the original template's index.php file, in case something goes wrong. Now get the links for the .js and .css files and replace them accordingly. In the previous example it ends up like:

<link rel="stylesheet" href="http://www.cblandscapegardening.com/templates/system/css/system.css" type="text/css" />

Doing this for all the files in the template's index.php file, in case of my web site, reduces the number of calls to the database by a minimum of ten. Look at your index.php template file and see for yourself how many baseurl requests can be replaced by changing it to the full path to the file. Reducing the number of calls to the database improves your loading time and your hosting provider will find it a good idea as well. The fewer the calls to the database, the less resources are called from the CPU of the server. So, you get a faster loading site and a more stable hosting platform.