3 ways to compress CSS files using PHP
When you’re using a sophisticated design, CSS files can quickly become very long, and takes time to load. I have compiled 3 interresting ways of compressing CSS files by using PHP.
The Paul Stamatiou method
This method is the first I learnt, one year ago or so. In order to achieve it, you first have to rename your .css file to .css.php.
Make sure to import it in your html file by using their new name:
<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>
Once you successfully rename your css files, edit it and add the following code at the beginning of the file:
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>Then, add the next line to the very bottom and save the file.
<?php if(extension_loaded('zlib')){ob_end_flush();}?>That’s all. While this method is useful and efficient.
→ Source
The Perishable Press method
Basically, The Perishable Press method works as Paul Stamatiou’s method, by renaming your .css files to .css.php (or .php alone) and adding this short code snippet on the beggining of your CSS file:
<?php
ob_start ("ob_gzhandler");
header ("content-type: text/css; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>I prfer this method this method to the one described by Paul Stamatiou because you don’t have to edit both the beginning and the end of the css file.
→ Source
The Reinhold Weber method
I just stumbled upon this code snippet by German developer Reinhold Weber some minutes ago. The least I can say is that I like it.
<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');
ob_end_flush();
?>
Why I like it? Because it is the only one of the 3 methods above which doesn’t require you to rename the CSS files to .php. Very nice to use on an existing site. The regular expression to strip out css comments is very nice too.
→ Source
You probably guessed it, my favorite method of the 3 above is the last one. And you? Did you already tried any of theses methods? Which one is your favorite? Tell us in the comments.




80 Comments + Trackbacks
12.19.2008
Excellent Tip! I’ve seen the Perishable one before but the RWeber version is slick. Thank you!
12.19.2008
Thanks a lot for this. I was looking for this one.
12.19.2008
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.
12.19.2008
@Taco: Seems very interesting, I should try it sometimes. Thanks for sharing
12.19.2008
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’);
12.20.2008
I didn’t even know this was possible. Is it needed if your server is running mod_gzip or mod_deflate? I was under the impression that that compressed everything.
12.20.2008
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!
12.20.2008
Sorry for my bad English.
This is how I compress my css and js files:
I have 2 separated folders “/css” and “/js”
In “css” folder create a new .htaccess file and put this on it:
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On
Now create a new file called “gzip-css.php” and put this on it:
For javascript is the same, only change css for js inside files and file names.
Now you have all your files encoded and don’t need to modify or change each css and js!!.
Best regards.
Cristian
12.20.2008
I did again! Sorry.
Code pasted in: http://pastebin.com/f70402922
12.21.2008
Cristian: Nice method there, but if you have multiple CSS-files you will make multiple HTTP-requests, and that is something you’d want to avoid. Combining the files into one file, like in the Reinhold Weber method, would be better.
Same goes for graphics. Try googling for sprites webdesign.
12.21.2008
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/
12.21.2008
@Patrick: INterresting exemple, thanks for sharing it with us! Too bad I didn’t knew it before, I should have been inclued it in this article!
12.21.2008
Nice example from Patrick too, but again: Combining multiple CSS-files into one file really has it’s advantages.
12.21.2008
Torkil, it is not always possible to use the combine CSS method (especially when using blogging systems), and it is always good to have backups on hand in those situations.
12.21.2008
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.
12.21.2008
Why not just turn zlib compression on in IIS or Apache for css filetypes?
12.22.2008
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.
12.22.2008
Great tips! Love the last one that does not require renaming css files.
12.31.2008
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? :\
1.2.2009
Why not just use Apache mod_deflate and avoid the overhead of using PHP every request to process a static file? Or even better if you can have something like lighttpd or thttpd to handle just the static files and compress them, even faster.
1.5.2009
All good and well if you have root access to the server I guess.
1.15.2009
If you want to see a spanish translation of this article:
Si dese consultar este artículo en español puede visitar el siguiente enlace:
http://www.intergraphicdesigns.com/blog/php-mysql/2009/01/gua-para-comprimir-archivos-css-con-php.html.
En este enlace InterGraphicDESIGNS traduce al idioma español esta guía para comprimir archivos CSS utilizando PHP, y además ofrece algunas observaciones para la mejora del rendimiento en cuanto a esta idea.
1.16.2009
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;”?
2.5.2009
Wow, I had never heard of anything like this before. What makes this benefit your site? I’m just curious before I implement the functionality.
2.5.2009
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
2.16.2009
For #3 above, where do you insert code for a Wordpress installation?
3.3.2009
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.
3.4.2009
Beware of removing too much whitespace in CSS: removing whitespace before ‘{‘ may trigger a known bug in IE6: sth:first-line{property: value;} won’t be read by IE6 but sth:first-line {property: value;} will be OK.
3.4.2009
Excellent tips.
It’s bookmarked and I will definitely use this.
Thanks!
3.5.2009
@Felipe: Didn’t know that! Thanks for the expert advice
3.5.2009
@Felipe: Good to know. Bug filed.
3.5.2009
Hi everyone,
I have never used CSS compression on my websites before. And now wants to do this. Can you please let me know… Why should we do this and at what level means what should be the minimum css file size on which we should perform the compression.
I am really looking forward to your suggestions.
3.6.2009
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
4.9.2009
Wouldnt this make it longer to load the css file? Every time it loaded, the server would have to decompress the css and then publish it. Im not sure exactly how it works…
4.24.2009
great post, I will surely try these methods, my blogs are too slow ..
5.14.2009
The best option for me was to create a php file in the same directory as the CSS files. I used the ob_gzhandler from method 2 and combined it with the comment removal and include concept from the 3rd method.
This way, I got the benefit of keeping the css extension on the files and fewer http requests with the more powerful gzip compression since my site is on a shared host that has mod_deflate turned off.
I left the file as multiline CSS so I can get an approximate line number when using Firebug to troubleshoot any layout issues. The method I pieced together will become part of my standard process. Thank you for this post.
6.11.2009
Hm… Interesting.

Never thought such a thing makes tangible changes.
I’ll try.
7.3.2009
Thanks for the tips. I have been using my site with Adwords.. everything was fine but one day suddenly got slapped with poor QS due to landing page problems… after much investigation got to know that my landing page was taking too much time to load…. one of tips to reduce the lp load time is to compress the files.. I had managed to compress the PHP files but did not know that one could also compress the CSS… Hopefully now my campaigns will go live again.
7.23.2009
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.
8.4.2009
Sorry I’m new to this compression thing. Should I just add the no. 3 method like this:
or
on my php pages?
8.11.2009
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.
8.11.2009
oops, the parser ate all my helpers. but i think you caught the idea.
10.14.2009
Thanx to The Perishable Press method
10.14.2009
How can we replace .php file over .css file
Very Simple.
STEP1: This is your abc.php page
<!—->
STEP2: This your zero.php (actually zero.css renamed with zero.php) page
#s1{
/*background:transparent url(../images/img_main.jpg) repeat scroll 0 0;*/
background:transparent url(../images/) repeat scroll 0 0;
border-bottom:1px solid #A0A0A0;
float:left;
height:208px;
position:relative;
width:1002px;
}
11.12.2009
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.
12.18.2009
I like The Reinhold Weber method, but it would be nice to combine it with gzip.
How to call 2 functions (compress and gzip)??
12.29.2009
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!
1.8.2010
thank you for sharing the tips..
not going to add new ways but will share my experience with you..
my result and final decision:
1- minify, combine, and compress js files (plus archiving to avoid repeating!)
2- minify and compress css files (no combine no archiving)
a bit of details;
after trying several ways and best practices especially after using javascript framework libraries such as prototype and scritpaculous and incorporating them into our own CMS framework..minifying these files (of the js framework) takes a lot of work, and once you are happy with the result, an update is there offering new features!
keeping up with updates is hectic if it involves manual editing !
(this is a really important criterion to decide which method to use)
another issue is when having different themes that the web master likes to be changing from time to time..using different CSS and JS files.
so hopefully you can relate this to your coding experience
1.16.2010
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!
1.21.2010
Don’t feel stupid Valerie,
yeah, mehtod 3 goes into your header, for example:
.
I think this is ok, but, i don’t want to pull the code into my header, so, think I’ll try one of the other methods.
Anyone know if linking to one css file, and using:
@import url(“reset.css”);
@import url(“960.css”);
@import url(“text.css”);
@import url(“joomla.css”);
Within that file would work?
Great writeup BTW, thanks for sharing!
1.21.2010
Doh, stripped the code, put the code bewtween a “style type= text/css tag, in your header, like:
1.23.2010
This is how I setup the 3rd method:
link rel=”stylesheet” type=”text/css” href=”css/css.php” media=”screen”
add the php snippet to a file called css.php, then link to it using usual link tag.