skip to content

Gzipping js and css files

Ways to optimize frontend assets in Symfony 1.2 for faster experiences

This week we are optimizing Makoondi to make it load faster. I am using the page speed plugin by Google. One of the first advices it gives is Enable gzip compression, Compressing the following resources with gzip could reduce their transfer size by about two thirds.

I got it working pretty eadily for the .html files, just by adding this to http.conf:

AddOutputFilterByType DEFLATE text/css text/html text/javascript application/x-javascript application/javascript

But it was not working for .js and .css files, no wonder how many filetypes I could add to the list. It took me a while to find the solution here by Sören Kuklau, and I am so happy that I will replicate it here :) I added this chunk of code to my http.conf:

<Directory /var/www/makoondi/web/js/>
    AddHandler application/x-httpd-php .js php_value auto_prepend_file gzip-js.php php_flag zlib.output_compression On
</Directory>
<Directory /var/www/makoondi/web/css/>
    AddHandler application/x-httpd-php .css php_value auto_prepend_file gzip-css.php php_flag <lib.output_compression On
</Directory>

Then in the …/web/css/ directory I put this simple php file called gzip-css.php:

<?php
       header("Content-type: text/css; charset: UTF-8");
?>

And in the …/web/css/ directory gzip-js.php:

<?php
        header("Content-type: text/javascript; charset: UTF-8");
?>
Compressing the following resources with gzip could reduce their transfer size by about two thirds