Compressing CSS on the Fly

# A Week Expires header from askapache

Header set Cache-Control “max-age=604800, public”

# compress all files from :http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

SetOutputFilter DEFLATE

#Etags From: http://httpd.apache.org/docs/2.2/mod/core.html#fileetag
FileETag MTime Size

I love this one^^

To make it cacheable you can configure your apache to add an expires header or do it by sending the header using PHP as passerby said.

I decided not to use ob_start method because it actually made it slower for the browser to get it (~110ms compressing vs. ~75ms natural) what i did do was to generate one whole big CSS file from several files to reduce the number of requests made to the server.

If you still want to compress your CSS dynamically I found a better function at http://php.oregonstate.edu/manual/en/function.php-strip-whitespace.php (look in the comments).

$offset = 60 * 60 * 24 * 1;
header(“Expires: ” . gmdate(“D, d M Y H:i:s”, time() + $offset) . ” GMT”);

That would make the css file cached for about 2 days. You can adjust that as needed. Have a good day.

I may try my hand at making a script that will compress HTML also, but I’m still learning about how to use regex in PHP. It can get quite confusing at times.

You see, one big advantage with CSS stylesheet files is that browser can cache them for a time, so that they do not need to be loaded on every page load. This gives nice performance boost, and saves plenty of bandwidth with bigger stylesheets. However, dynamic pages which are created with PHP can not be cached because the server can not determine the modification date for the file.

So, your compression script is actually causing significant increase in load due to increased bandwidth and processing required for the PHP file.

If you want to use something like this, you should rather use a separate script to “build” the CSS file from original copy and store that, rather than create a dynamic file. But without this kind of “caching”, the script completely backfires.

Also, three things about your code:

1. The regex is interesting. Sure, it works, but it would be considerably easier just to use ungreedy matching like “!/\*.*\*/!Us”
2. The str_replace doesn’t display properly in the blog post. If you just copypaste from there, you end up removing all the whitespace in the CSS, which is not very good idea.
3. The compression logic is flawed. You can’t just go around removing whitespace like that. Newlines are just as valid whitespace as space character. If you for example separate values of border-width with newlines, that “compressor” will end up removing the separating whitspace. Mostly safe method to remove whitespace would be replacing “/\s+/” with ” ” (single space), because multiple whitespace is rarely needed (only actually matters inside quoted values, which shouldn’t be a problem).

But, as I said, one of the major advantages of CSS files is local caching, and thus compressing your CSS files is mostly just wasted effort.