3 ways to compress CSS files using PHP

I’v used a combination of the three methods:

- Create a hash of the css files used
- Check if a file with that hash exists, if not:
- Concat and minify (i.e. remove whitespace and comments like in the Reinhold Weber method) the contents of the css files
- Cache the resulting data in a css file within the webroot
- Add a link to that file in the resulting HTML file

The resulting file is served by Apache using mod_expires to set the right expires header (+1 month) and mod_deflate to gzip the output. The hash created contains information about the version of the file so when the css contents change a different filename will be generated.

No matter which method you use, you might want to add these headers so browsers can cache your css file. If not, browsers will end up re-querying the compressed css and that may cause an overhead on server side.

$offset = 60 * 60 * 24; // Cache for a day
header(’Content-type: text/css’);
header (’Cache-Control: max-age=’ . $offset . ‘, must-revalidate’);
header (’Expires: ‘ . gmdate (”D, d M Y H:i:s”, time() + $offset) . ‘ GMT’);

I have played around with compressing CSS as well, and there is alot of more whitespace to kill:
- whitespace on both sides of commas ,
- whitespace on both sides of curly brackets {}
- whitespace on both sides of colons :

But: You can do alot more than just removing whitespace:

Remove ending semicolons:
.class {color: #000; } becomes .class{color:#000}

0.90em compresses to .9em
0px, 0%, 0em etc all compresses to 0

Then you can of course combine stuff to use shorthand syntax:
#ffffff becomes #fff
padding: 2px 0 2px 0 becomes padding: 2px 0
background: url (’image.gif’) no-repeat right center becomes background:url(image.gif) no repeat 100% 50%.

You can also remove declarations of default stuff. Background position: top left for instance.

Minify is a great project too:
http://code.google.com/p/minify/

Minify will even leave your comment hacks in there.
Just get the css-class from the sourcecode and use it as a standalone tool, thats a good start!

I did again! Sorry.

Code pasted in: http://pastebin.com/f70402922

I used to use a system almost identical to Christian’s – however, when I started using systems like WordPress or ExpressionEngine or Habari, where css or js files might be sent from many different folders, and manually putting the .htaccess and gzip files may not be convenient, I created a different system.

I have posted about it here:
http://www.lateralcode.com/2008/12/gzip-files-with-htaccess-and-php/

Nice example from Patrick too, but again: Combining multiple CSS-files into one file really has it’s advantages.

I am not talking about the method mentioned in this article in particular.

CSS files are loaded in sequence so that rules in later files override identical rules in previous files. As long as you combine the CSS files in the same sequence, I don’t see any situations where you would not want to or would be unable to combine CSS files.

Very interesting tips. I never thought of compressing long css files, but now i will for sure. I guess that the last one will be my favorite one as it is the simplest . Thanks for sharing.

The last method does not work for me, however, the first method appears to work (I checked with phpinfo.php, so my host definitley has zlib, and using the 1st method, nothing broke, so I’m assuming it worked…)

However, the 3rd option was the first one I intended to use. Anyone know whats going on? :\

All good and well if you have root access to the server I guess.

I did not actually try the code, but wouldn’t replacing all spaces break stuff like “border: 1px solid black;” because it would be turned into “border:1pxsolidblack;”?

Compressing your CSS-files makes the whole website load faster (obviously).

Combining multiple CSS-files into one CSS-file reduces the number of HTTP connections a client has to open up to read your site, and thus also decreases loadtime

Shameless plug: Minify was designed expressly for this task.

@Felipe:
mod_deflate should certainly be faster than ob_gzhandler(), but if you cache pre-encoded files to disk, PHP can actually serve them faster (using readfile()) than Apache can with mod_deflate. It seems mod_deflate doesn’t cache the encoded version and has to re-encode on each request.

Excellent tips.
It’s bookmarked and I will definitely use this.

Thanks!

@Felipe: Good to know. Bug filed.

Hello,

Thanks for the great article, I will try to implement the 3rd method as you suggested, although I didn’t understand where to place the code…

Regards,
Nicholas

great post, I will surely try these methods, my blogs are too slow ..

Hm… Interesting.
Never thought such a thing makes tangible changes.
I’ll try.

Am I crazy or is it not possible to cache gzipped files?

I’ve added all of the proper headers but Firebug is showing that the files are in fact not caching. It only seems to cache “304 Not Modified” js & css files… I’ve spent all day trying to fix this… Is there any other way to verify if the files are being cached? After minifying css & js files and adding gzip the savings are incredible, it would be a shame if this was not cache-able.

Thanks, very short and informative.
Method 3 is quite nice, but i’d like also to put my two cents in it.
If your site uses cookies, they are sent with every request, including images, css and js requests, unless you specify a subdomain like images.mysite.com. But it sounds not as a good idea to put absolute paths to images in your css. However, the Reinhold Weber lets us do this with one line of php code:

// set cookie-free path for images
$buffer = str_replace(’../images/’, ‘http://images.mysite.com’, $buffer);

To make it even less hard-coded, I used the following:
@$img_url = $_GET['img_url'];
$buffer = str_replace(’../images/’, $img_url, $buffer);

And, in my view, where I have access to all my helpers, it looks like this:
<link rel="stylesheet" href="css.php?img_url=” type=”text/css” media=”screen” />
Not very readable, but I personally like it.

Thanx to The Perishable Press method

Alternative 3 is rather nice, nevertheless, here are my remarks:
1. Just putting ‘ into a .css file will usually not work. You need in addition tell the web server to handle .css (or the particular one in question) as a PHP document.

2. The compressor function in alternative three appears not correct to me. Consider cases like ‘html\tdiv’ and ‘html\ndiv’. Both examples would be ‘compressed’ as ‘htmldiv’ and that is not what we want.

3. Instead of using str_replace() I propose to use a single regex like !\s\s+|\n|\t|/\* .. !

This is the ‘compress’ function I’m using:

function compress($buffer) {
$regex = “,/\*.*?\*/|\s+,s”;
return preg_replace($regex,’ ‘,$buffer);
}

Not optimal in terms of compactness, while at least correct (well, at least no known problems).

Greetz.

Thanks!

I’ve been working on making my site faster with FireBug and Google’s PageSpeed extension and I’d been wondering how to finally get the CSS compressed to the point where it passed that bit of the test.

The third option worked perfect first time, appreciated.

Another tick on the sucking up to Google checklist though having a faster site is nicer for all!

Feeling really stupid here since everyone else seems to get it, but I’m a newb, what can I say?

I’d like to try #3 – but I have no idea where to put that. I’m using a Wordpress site. Do I put that at the top of my header.php file? Or what?

Thanks for any help!

Doh, stripped the code, put the code bewtween a “style type= text/css tag, in your header, like:

Nice tips you have shared. I haven’t thought before. I will try it. Thanks for sharing this informative post!