How to compress CSS/JS to improve page load time

From TomatoCMS Documentation

TomatoCMS 2.0.6 has the ability of compressing static resources such as CSS, Javascript files to improve the page load time.
This guide will show you how to use this feature as well as how to turn off this.

How to compress CSS, Javascript and content of pages

After logging in the back-end section, go to Customize > Config > Cache menu, click on the check boxes below Compress section and press Save button.

Now, refresh any page on the front-end or back-end section, you will see that all CSS and Javascript files have been combined into one file:

Also, the content of page has been compressed:

How to delete the compress file

You can delete all the compress files by going to Customize > Cache menu first, and then click on Clear links as in the following image:

Because all of compress files are stored in the /temp/cache/css and /temp/cache/js directories, therefore you can delete all the compress files by deleting these two directories manually:

For developers who want to compress CSS, Javascript file coming from your module

If you are developing new module for TomatoCMS and want to compress CSS, Javascript files/scripts, please use the following tips:

• Always use headLink view helper to insert the CSS file to the head section:

$this->headLink()->appendStylesheet(... Path to CSS file ...)

• Always capture static CSS sections in the view scripts:

<?php $this->headStyle()->captureStart(); ?>
... Your CSS classes ...
<?php $this->headStyle()->captureEnd(); ?>

• Always use headScript view helper to insert the Javascript file to the head section:

$this->headScript()->appendFile(... Path to Javascript file ...)

• Always capture static Javascript sections in the view scripts:

<?php $this->headScript()->captureStart(); ?>
... Your Javascript code ...
<?php $this->headScript()->captureEnd(); ?>