Compress CSS using PHP

I found this rather neat little trick to compress (remove whitespace anyway) css files
http://grupenet.com/2007/10/01/compress-css-on-the-fly/

The basic idea is first to allow PHP to manipulate CSS then remove the white space.
So in .htaccess

Code:

<Files style.css>
SetHandler application/x-httpd-php
</Files>

then add this to the top of any css files

Code:

<?php
header('Content-type: text/css');
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
ob_start("compress");
?>

Finally at the end of the file add

Code:

<?php ob_end_flush(); ?>

I'm not sure how this scales but it certainly seems to work, I'm going to use it on my own blog which has a very large css file. http://grupenet.com/2007/10/01/compress-css-on-the-fly/

[Promote your blog for free....]

This will produce overhead as well too. Also you should play with the headers more, so that the file wont be loaded on every pageview but it will be cached by the browser.

In my opinion you should use the output of that script in a text file.

yes I think the overheads only balance for larger files, still if you have a complex css layout it does speed things up a bit I will come back with some stats in a few minutes, While I agree caching the file would be a more useful method it does sort of beat the point of doing it on the fly, you might as well strip out the whitespace during or proceeding the upload and not on the server.

Compressing CSS files using PHP is an interesting idea.

If you're compressing to reduce bandwidth, then you ought to handle If-Modified-Since and provide Last-Modified headers as described in my recent blog post: http://www.justsoftwaresolutions.co.uk/webdesign/provide-last-modified-headers-and-handle-if-modified-since-in-php.html . Unless you have a LOT of comments, you will use MORE bandwidth if you don't do this, especially if you use the same CSS on every page.

Also, it might be worth using true compression with

Code:

ob_start("ob_gzhandler");

rather than just removing whitespace and comments (text files compress very well): http://www.justsoftwaresolutions.co.uk/webdesign/reduce-bandwidth-by-compressing-pages.html .

Of course, you could just enable compression in your apache config and not worry about stripping out whitespace and comments.

[Free WordPress Themes]

I think Tim's suggestion is to speed up the page load...

I guess using the term compress has caused some confusion, the code above simply strips whitespaces which as olaf says improves load time rather then dramatically reducing bandwidth its a speed up process.
Obviously if your css has only 5 lines of code then this is no use to you, conversely if you have a file with 20k lines of css code (apart from a serious code issue) this won't help either.

On a wordpress theme I tried it on it provided a couple of mini second improvements on the load time under test conditions I plan on using it on my own blog theme to test it in the real world, such a small difference might not be amazing but hey.
One of the things I am thinking of doing is stripping out comments as well but I think that this will actually cause a delay in load time as its a lot more intensive.

[Free WordPress Themes]

great that whitespace is not so big in filesize ...

If you're after speeding up page loading, you don't want to force the browser to refetch the same CSS every time (especially if you use the same CSS on multiple pages), so the If-Modified-Since handling code is important if you're going to process the files in PHP (it's better than server-side caching).

Depending on the network throughput, the smaller sizes obtained with gzip compression may improve page load time, or may not --- it depends on where the bottleneck is.

I can detail what I do if there is more interest (with code that is)

1) have a global CSS identifier - like a number - which refers to the current code release
2) add each css file to a php array
3) have php stip out the whitespaces of each element, comments, etc... and load them all into one stream
4) send a not modified header - expires 1 year
5) gzip content and send as one request via <link ... tag

This is kind of a hybrid.  i don't write a static cache file - but I do send a heavy cache header.  I also reduce the amount of http requests - so I can have the separate css files for better css/oop - hah.

Finally, when I do push out a change, I change that number so that those pages have a different 'link' and the expires header no longer applies.

[Promote your blog for free....]

Aaron your solution looks good, but the 1 year expiriation and the gzip thing can cause problems.

Before a few days I had nothing to do in army - but I could use a pc - so I created a css compressor. The script takes a css file, removes comments \n, white spaces and then saves the file. In the next level I will make the script detect all the css files in the web server (all files in a specific directory) and compress them. After that I will release it as an open source project.

BTW the results are great even in small files. I used the script in a couple of standard css files (around 5kb with no comments) and the result was up to 50% compression.

What specific problems are you referring to?

The gzip responds to how the browser sends its accept header - so no gzip if it doesn't say it can't accept.
The expiration/caching will either cache for a year or ... not?  The only thing I could think you're referring to is maybe someone getting a corrupt cache?

Cool - it'll be cool to see what you come up with.  I use my method on my work site (Fortune company - I just can't say what site... you know how it goes) - and haven't found any issues yet - doesn't mean that it doesn'tw ork - maybe people just didn't complain? hahaha

The biggest change that was made was to combine them all into one file - so single http request.  The server admins were very much happy about that

[Promote your blog for free....]

I was talking for :

1) Server overhead. The gzip compression is great to save bandwidth and make the page download faster, but it is not good for busy sites, especially when your server has small capacity.

2) The cache header may be a problem when you are making changes to your site frequently. Of course this is a problem that can be solved easily (for instance you can add a get variable to indicate the version, css.php?v=1...)

Ok - cool.  I was curious what you were referring to.

As for the server load - I guess it might be worthwhile to generate cache of them - you would be able to determine from the header what to send, the plain css or the obz'd file.   Eh - now we're just talking about almost too much premature optimization.  I tend to overthink things from time to time. heh.

Yep - with the headers - you def have to send a different identifier with the url for the css file.  I sent mine as a 'directory' instead of a get - cuz I'm afraid that some browsers might start ignoring that - cuz why would a css file need get variables, you know? heh.

Anyway, thanks for explaining.

[Guest]

[34.931]

Googlebot, Yahoo crawler, Gigabot