3 ways to compress CSS files using PHP

by Jean-Baptiste Jung. 110 Comments -

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.

Comments (110) - Leave yours

  3. Taco van den Broek said:

    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.

  5. CLee said:

    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’);

  6. Catrin W said:

    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.

  7. Torkil said:

    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!

  8. Cristian Deluxe said:

    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

  10. Torkil said:

    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.

  11. Patrick said:

    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/

  15. Patrick said:

    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.

  16. Torkil said:

    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.

  20. Catrin W said:

    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.

  23. 3 ways to compress CSS files using PHP | CNSQ Online Blog said:

    [...] Here are 3 interesting ways of compressing CSS files by using PHP addthis_url = ‘http%3A%2F%2Fblog.cnsqonline.com%2F3-ways-to-compress-css-files-using-php%2F’; addthis_title = ’3+ways+to+compress+CSS+files+using+PHP’; addthis_pub = ”; 10 Ways to Improve Web Performance (Front End Side)…20 Best PHP Frameworks for Web Developers…10 Most Notable Web Development Milestones…PHP vs. Rails debate…10 CSS Mistakes that Web Designers and Developers do… [...]

  25. Nitroadict said:

    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? :\

  28. Felipe Ribeiro said:

    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.

  31. Ricardo Arce said:

    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.

  32. tutorialand.com said:

    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….

  33. Zahl said:

    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;”?

  37. torkil said:

    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 :)

  41. Steve Clay said:

    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.

  43. Felipe said:

    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.

  47. mani said:

    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.

  48. Nicholas said:

    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

  57. Ethan Gardner said:

    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.

  61. pete said:

    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.

  62. Arthur said:

    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.

  64. anthony said:

    Sorry I’m new to this compression thing. Should I just add the no. 3 method like this:

    or

    on my php pages?

  65. Georgiy said:

    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.

  68. jay bharta said:

    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;
    }

  70. geronimo said:

    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.

  71. Dalibor Sojic said:

    I like The Reinhold Weber method, but it would be nice to combine it with gzip.

    How to call 2 functions (compress and gzip)??

  72. Andy Moore said:

    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!

    :)

  75. Hussain said:

    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 :)

  76. Valerie said:

    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!

  77. Ryan said:

    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!

  79. Matthew Hunt said:

    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.

    • Dare said:

      @Frosty Yeop for sure. You can still see the code if you click and hold the mouse down at the beginning of the line and drag down. This selects the entire line. You can then paste it into notepad or whatever to see it.

  89. Cheshmehregi said:

    Hello
    Thanks for the information ,
    but it didnt work for me , i am trying to combine 3 css in to one – but this method didnt work – can you please tell me how to compress / combine the css files in tho one?
    thanks

  90. Gunnar Ileson said:

    Here at work the third method would be rerwritten for lowering the traffic. It will send the css data to the client on each request when it’s not in separate css files that can be cached by the client.

    And the two first methods would also be rewritten, so php don’t have to compress the file on each request but somehow cahce the compressed vesion.

  92. John said:

    I use a method in my websites where everything goes through index.php. I use buffering to organize code and dynamically add only the styles I need. I have many, many style sheets, one that all pages use, one for the login page, the landing page etc. In my Styles folder I have a php file titled “StyleMaster.php” which has the following code.

    I then reference “StyleMaster.php?file=Login.css” in my head element on the HTML.

    One small tidbit I have not figured out how to work around is the potential to have lines commented out “//” which I still do in my css from time to time though I probably shouldn’t. I’m not very good at regex…you might recognize it as coming from that third method :P .

  94. John said:

    Aha! Finally got the regex resolved (mainly for js compression since // in css technically is a syntax error…)

    $buffer = preg_replace(‘/\/\/.+?$/m’, ”, preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $buffer));

    • kathy said:

      for anyone looking for an easy fix… the plugins wp-minify and autoptimize both combine, compress (and cache i think) all your css automatically.

  96. Artemis said:

    Hello guys,

    When i add this, my site menu gets ruined, and this is because when i click to read the css file, i get this error:

    SHTML Wrapper – 500 Server Error

    Anyone got an idea?
    Thanks,
    Artemis

  98. kontur said:

    You can extend method three to dynamically include files by handing the file some parameters like…

    … and then seperating the file names for inclusion in the php like …

    $css_files = explode(” “, $_GET['files']);
    if (!empty($css_files)) foreach ($css_files as $css) {
    if (!empty($css)) include $css;
    }

    That way you can include different css files, if you have your website’s css divided by sections, for example. Mind your caching setting though with that.

  99. John said:

    Method 3 has the disadvantage that it also strips spaces inside strings (like in content properties) breaking your styles.

  100. Jabari said:

    Maybe I’m missing something…

    Why use PHP to compress a static file each and every call??? Why not just include a CSS file that has been pre-compressed and save the processing time all altogether?

  101. serge said:

    great! exactly what i needed ! Thanks a lot.

    A small modification to compress function in the last method like this would do the job even better :

    function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array(“\r\n”, “\r”, “\n”, “\t”, ‘ ‘, ‘ ‘, ‘ ‘), ”, $buffer);
    /* “control” shots */
    $buffer = str_replace(‘; ‘, ‘;’, $buffer);
    $buffer = str_replace(‘: ‘, ‘:’, $buffer);
    $buffer = str_replace(‘{ ‘, ‘{‘, $buffer);
    $buffer = str_replace(‘ }’, ‘}’, $buffer);
    $buffer = str_replace(‘;}’, ‘}’, $buffer);
    return $buffer;
    }

    • Paul said:

      Hey Serge, can you explain the control shots for me? It seems like you are just removing spaces. Doesn’t it already do that? I like there your heads at though…..

  102. Damon said:

    I like the The Reinhold Weber method… combined with a .htaccess rule to make the file appear to be a root located normal .css file.

    RewriteRule ^style.css$ /path/to/php/css-min.php [L]

    Works beautifully for me. I think I may modify this a bit to accept file name variables so I use the one php script to compress other css files… which I defer from parsing until needed.

    … okay, fine, I’ll build it now and share it…

    // useage in .htaccess RewriteRule ^style.css$ /path/to/css/css-min.php?cssFileName=tmn_12 [L]

    header(‘Content-type: text/css’);
    ob_start(“compress”);
    extract($_GET);
    $cssFilePath = “/path/to/css/”;
    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;
    }

    include(“$cssFilePath$cssFileName.css”);

    ob_end_flush();

    Just edit the path to where your css is then add the variable to the rewrite rule. I made it so the extension is added in the php file so you only have to enter the file name as the variable, minus the .css extension.

    Using it this way you can compress as many files as you want… separately… with only one php script. Fits my needs better I hope it does for someone else too.

    - Cheers!
    - Damon

  103. mersed said:

    Third one is good indeed..
    But i do not recommed using ” ” (two wite space removal) (expecialy if you applying something like this on .css file wich you wrote before, and have a lot of rules and lines).
    $buffer = str_replace(array(“\r\n”, “\r”, “\n”, “\t”, ‘ ‘, ‘ ‘, ‘ ‘), ”, $buffer);

    .some_class a {will result in .some_classa and you do not have this class}

    If you are writting your css file from scratch then you know where tricky part is and what you can and what cannot use. ;)

  104. Sasha said:

    I am working on my small CMS because I’m to frustrated with Drupal, Joomla… bloating, to much db request, to much queries etc.. All time hundreds of methods ask for answer what can be configured on just one click “SAVE CONFIGURATION”, and that will make less request, and queries..

    Also with CSS, why in every HTTP request do this: preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, why not create button in admin panel “Minimize and clean all your CSS and JS”-YES —> and AFTER that use CSS and JS COMBINER (depends on page request). In Combiner is fread()… and next step is CACHE mechanism…

    If dveloper/admin wants to edit some css, or add new component to it’s platform, just go again to step “Save and minify CSS and JS”. That’s is what will do my CMS. Why to do every time same thigs on “the fly” (preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”). I’m sorry but I don’t like that principe.

    Best regards!
    … and this is very nice discussion

  107. A1brandz said:

    How this will affect website performance negative or positive way? I think compressed css pages takes less time thus makes web page load faster then uncompressed css.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!