When optimizing Joomla! for performance, one trick is to limit the number of HTTP requests. Every time a new CSS-stylesheet is added to the Joomla!^TM page, a new HTTP request needs to be made by the browser to fetch that file. This costs extra bandwidth and extra time.

To optimize the site performance, the number of HTTP-requests could be limited by combining multiple smaller CSS-stylesheets to one big CSS-file. There are in general two methods to accomplish this: The cut-and-paste method and a method using PHP.

Cut-and-paste

Let's say you're using a Joomla! template foobar and a component called com_example that loads its own CSS into the Joomla! header. You may end up with the following CSS-stylesheets being loaded every time when the browser loads:

• components/com_example/css/style.css
• templates/foobar/css/template.css
• templates/foobar/css/typography.css

This means three HTTP-requests have to be made to fetch the neccessary CSS before the page can be rendered by the browser. If this could be a single HTTP-request, the end result would be that the page is loading much faster.

The easiest method to deal with this is to copy all the CSS-rules to one single file - for instance template.css. You need to make sure that the final file begins with the CSS-rules orginating from com_example, and ends with typography.css.

• templates/foobar/css/template.css

Using a PHP-script

Merging all the CSS into one big file is fine if there are just a few files to deal with. But as soon as you deal with a lot of CSS-files, maintaining the CSS-code is easier by using different files instead of one bug CSS-file. By using the PHP-method you can solve this problem.

All the CSS-files are still maintained seperately on the webserver, but the PHP-script just reads all the files into memory and sends them as one big CSS-file to the webserver. If you would create a file templates/foobar/css/css.php with the following PHP-code, it will have the same end result as before:

echo file_get_contents('../../../components/com_example/css/style.css');
echo file_get_contents('template.css');
echo file_get_contents('typography.css');

Possibly you want to make changes to the CSS of com_example, so you can now copy the CSS-file to your own template directory and call it com_example.css.

echo file_get_contents('com_example.css');

The problem here is that the CSS of com_example is now loaded on every time, and not just on the pages served by the com_example-component. Actually you need some more PHP-logic that checks if the current page is served by the component com_example.

Yireo^TM Template Helper

We have developed a couple of PHP-scripts to aid you in making this all possible. These scripts are available under the GNU/GPL and contain some of the functionality you might know from RocketTheme or YooTheme templates. These scripts are here to help webdevelopers build their own custom templates.

With our scripts, you can add a HTML-tag calling the css.php file within your template CSS-directory, which is then called with the following code from within your index.php file:

<?php 
$stylesheets = array('typography', 'styles');
if(JRequest::getCmd('option') == 'com_example') {
    $stylesheets[] = 'components/com_example/css/style.css';
}
?>

<?php echo Yth::addCssPhp($stylesheets); ?>

The HTML-output of this looks like:

<link rel="stylesheet" href="/templates/foobar/css/css.php?s=com_example" type="text/css" />

The css.php will look for a file called templates/foobar/css/com_example.css and include it within the CSS-output. Actually, if you create a file called com_example.css in the same directory as css.php, you don't need the extra JRequest-check at all, but the CSS-file will automatically be added.

You will need to have some knowledge of PHP to make good use of our scripts. The cool thing is that the PHP-class Yth also includes a hasModule($name) function that checks whether a certain module has been loaded, and many other PHP-functions that are useful when building a professional Joomla! template.

De-activating CSS of Joomla! extensions

A good Joomla! extension will have a way to disable the CSS-stylesheet that it adds. Components like SimpleLists and SectionEx have a parameter to disable its own CSS, which makes it possible to add the CSS to your own template and use our performance-tricks as layed out above.

But many Joomla! extensions don't have such a parameter. We recommend you contact the developer of such a Joomla! extension to request this feature of deactivating the CSS-stylesheet, instead of hacking your way in the extension-code.

Dealing with browser-specific CSS

It could be that you need to load specific CSS for a specific browser. For instance, for Internet Explorer you want to load a CSS-stylesheet called ie6.css. Instead of detecting the version using the VisualBasic-like HTML-comments (which would still require an extra HTTP-request), you can use the Joomla! class JBrowser to detect the browser.

Our own Yth-class contains a shortcut for this function. Adding a IE6-specific stylesheet ie6.css would like this:

if(Yth::isBrowser('ie6')) $extra_stylesheets[] = 'ie6';

Renaming image-paths

Because the location of the CSS-stylesheets changed, any relative reference to a path probably needs fixing. Before an extension might reference an image with the following relative path:

../images/image.png

But this might refer to the following absolute path:

/components/com_example/images/image.png

If you copy the CSS to your own template-directory, you either need to copy all images as well or change the CSS to point to the right paths.