Video: Speed Up Joomla with mod_deflate - Yireo

Crunching Joomla! CSS with the Yireo Template Helper

With the PHP-class Yth (Yireo Template Helper) you can optimize CSS-files within your own Joomla! template, with as little PHP-code as possible. For a good website, a fast template is vital. The Yireo Template Helper helps you with this.

The Yth class

To put the Yireo Template Helper in your template, first download it from our download-section. It's licensed under GNU/GPL, so you can apply the class right with your template, or re-use the PHP-code as you see fit. The library-ZIP gives you two files: yth.php (containing the actual Yth class) and css/css.php. Both are needed for this trick.

Add the yireo_helper.php to your template-directory (for instance templates/mydesign) and add the css.php to your css-directory (templates/mydesign/css). Now open up your main index.php file. We first will include the helper-class so it is available for usage:

include_once (dirname(__FILE__).DS.'yth.php');

Removing CSS-files

Now there are a lot of tricks to be made using the Yth-class. But here we will only discuss the crunching-trick. The goal is to remove all your CSS-files and replace them with the css.php file. Within your index.php file you might have various CSS-links:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/typography.css" type="text/css" />

Now, to explain these CSS-links a bit: A lot of templates include the CSS-files from the system-folder as a fall-back one something that needs styling, is not styled by the template itself. The standard is to have at least a template.css file, but other files like typography.css might be included as well.

Adding the css.php bit

The downside of all these different files is that the browser needs multiple HTTP-requests to fetch these files. In this case four HTTP-requests are needed. The css.php reduces this to a single request. To accomplish this, remove the four lines of HTML/PHP-code and replace it with the following:

<?php $stylesheets = array('typography'); ?>
<?php Yth::addCssPhp($stylesheets, true); ?>

This will generate an HTML-tag which calls the css/css.php file with a few parameters. The interesting thing here is that you didn't need to specify the CSS-files from the system-folder. These are automatically included with the second argument "true". This argument defaults to "false". So if you skip this second argument, the system CSS-files will not be included:

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

Still a benefit when using only template.css?

Another interesting thing is that you did not need to specify the template.css file at all. If you are only using one single CSS-file, the PHP-code would be even more simple:

<?php Yth::addCssPhp(); ?>

There is still a good reason to use the css/css.php file instead of just a plain file. The plain file is probably filled with newlines and comments, but removing those newlines and comments makes the file smaller and there for your template faster. The Yireo Template Helper is not only capable of crunching various CSS-files into one single output: It also compresses this output by removing newlines and comments, plus it applies zlib-compression when it is available.

Component CSS

The cool thing of the Yireo Template Helper is that it detects some things automatically. For instance, the file template.css does not need to be added to the $stylesheets-list - it is automatically included. The same counts for component CSS-files. If you would place a stylesheet called com_content.css in the CSS-folder, this CSS-file will automatically be included when the component com_content is loaded (for articles, blogs, etcetera).

This opens up for other nice possibilities as well: For instance, you can move the CSS of a forum-component into the template and crunch it with the rest of the stylesheets. Of course in this case you'll want to disable the original component-CSS, which needs to be supported by that third party component. A good component allows you to do this by changing some kind of parameter.

Module CSS

For modules, you need to do a bit more work. You'll need to do the checking yourself and add the CSS manually to the $stylesheet array mentioned earlier. For instance, if there is a module mod_yoo_tweet loaded on a specific page, you can then add a custom mod_yoo_tweet.css file to the page as well.

if(Yth::hasModule('mod_yoo_tweet')) $stylesheets[] = 'mod_yoo_tweet';

Again, a good module allows you to disable the default CSS by changing some kind of parameter. Or possibly a template override could be made to remove the CSS. If such a parameter is not available or a template override does not solve this issue, it's best to contact the module-developer for this. One way or another, the module is forcing you to load a CSS-file which adds an overhead to your site.

Using a CDN or static server

Another trick is that you can move all your images to a static server or a CDN (Content Delivery Network) and modify the CSS-code to fetch all images remotely. This could give a huge performance benefit for European visitors if your webserver is in the USA. The file css/css.php is capable of such a change, but you'll need to modify its contents slightly.

In the top of the file css/css.php, you can find two arrays: $stylesheets and $options. The trick is to add an extra option to the array $option which will rewrite all the image-paths to a new location. For instance the location http://cdn.example.com/example/templates/mydesign/ could be defined:

$options = array(
    'crunch' => 1,
    'zlib' => 1,
    'remote_directory' => 'http://cdn.example.com/example/templates/mydesign/',
);

The Yireo Template Helper will now rename all the relative paths of images to absolute paths pointing to the CDN. You need to make sure yourself that all the images are indeed placed on the CDN.