Compress your CSS files!

I’ve followed the steps described at fiftyfoureleven.com and compressed my style sheet. The result is just fascinating:

  • file size before: 6296 bytes
  • file size compressed: 1885 bytes

That’s only 30% of the original file size! Wow! If 1000 people have visited your site, you’ve saved 4.2 MB of traffic. Just by compressing the CSS.

For those who don’t want to follow the link above, here’s an explanation. You can use PHP and gzip to reduce the file size of your style sheet. I’ve used this method and it works!

Add the following line to your .htaccess file:

AddHandler application/x-httpd-php .css

Then place this code snippet at the beginning of your CSS file:

<?php
ob_start("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = 'Expires: ' . gmdate("D, d M Y H:i:s", time() + $offset) . ' GMT';
header($ExpStr);
?>

The .htaccess modification is needed to make PHP parse the .css file. The code starts the compression.

Published by

Julian Bez

Julian Bez

Julian Bez is a software engineer and former startup founder from Berlin, Germany.

  • http://www.kartooner.com kartooner

    Thanks for the tip. I had read about this on Fiftyfoureleven and completely forgot to implement it accordingly.