« HOME

Gzipping js and css files

By Nacho Martín on 03 December 2009

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

Written by @nacmartin

blog comments powered by Disqus

» ALL POSTS