The Joomla Performance Booster component (I don't know if you should call it a component as it runs largely on top of your Joomla! installation) combines, compresses and compacts JavaScripts and CSS files into one file each. This means your CSS files will be put into one file for your browser to load.
There can be a lot of CSS and JavaScripts on your site, depending on the Joomla! template and the number of components you use. Sometimes a component comes with several extra CSS files to handle the layout items for that component. Just for fun you should look at your source code (shown in the following screenshot) to see how many CSS files you are loading at the moment.
The following is a detailed image showing you the javascript and stylesheet calls.
JavaScripts are called using:
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
Stylesheets are called using:
<link rel="stylesheet" href="/templates/template_name/css/template.css" type="text/css" />
I counted seven .css
files and four JavaScript files in the header of the template I used, at the start of the site. So, this component will reduce it with six .css
and three JavaScript files, which in turn will lead to faster pages. I will later show you how to reduce the number of .css
files manually, but Joomlatwork can do this for you.
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.