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");
?>