Published in CSS on Sunday, June 13th, 2004
This post is the source for the most definitive/recent/tested method (in the scope of this blog) of gzipping your CSS when either Apache compression module is not available for use.
Note: This post was originally published on June 13th, 2004. It is being republished today because: the topic has been discussed in a few places recently, and, well, I accidentally republished it when editing it.
This whole idea started back in February of 2004 and has evolved through several iterations thanks to feedback from different users.
Because of these iterations, pieces of this concept are strewn about several posts on this blog (see history, below). This post is being written with the objective of holding the most recent and up-to-date version for gzipping your CSS. My apologies for the poor management of this topic. Lesson learned.
CSS files for larger sites can become pretty large themselves. Gzipping or compressing these files has shown to provide a reduction in the neighborhood of 70-80% of the original file size, a fairly significant 'weight loss'.
The obvious method to accomplish compression (on an Apache server) is to use either the mod_gzip or mod_deflate module (more here), these modules are not available to everyone. If you have access to those modules, follow the given link, otherwise... PHP provides an alternative compression method (two actually) and this is exactly what we'll leverage here - so one could think of this method as a 'poor man's mod_gzip'.
There are two different, equally effective methods that can be used.
The first method involves adding a little snippet of PHP to the top of your CSS file, and then renaming your CSS file with a 'php' extension. The second, cleaner and more elegant solution involves adding two little files to your CSS directory, one of them an .htaccess file, the other a PHP file that contains the same snippet of code used in the first method.
A little bit of PHP magic is needed to make this happen. The following code is all it takes:
<?php ob_start ("ob_gzhandler"); header("Content-type: text/css; charset: UTF-8"); header("Cache-Control: must-revalidate"); $offset = 60 * 60 ; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; header($ExpStr); ?>
This code does 4 things:
This method, though not as clean as the second, is just as effective. All you need to do is place the PHP snippet from above into the top of your CSS document. Then, rename your CSS file with a 'php' extension, and then refer to that file when linking your css file, for example:
Method two is cleaner and more elegant, as it does not require the addition of any extra code to your CSS file, nor do you have to change the extension of the file. Clean and simple.
Two steps are necessary to implement this method.
First, you want to save the snippet provided above in a file called 'gzip-css.php' to the directory that contains your CSS files.
Here, simply add the following to an .htaccess file and save the file to the same directory as your CSS files:
AddHandler application/x-httpd-php .css php_value auto_prepend_file gzip-css.php php_flag zlib.output_compression On
This code does 3 things:
ob_start ("ob_gzhandler");in the code snippet. So choose one or method or the other (see note).
Thanks to David for noting that this will prepend the file to all files found in the directory being used, so best to keep only CSS files in this directory.
It is recommended that you check to see that this method is in fact working for you. Some people have reported that method one works fine while method two doesn't.
As with anything, do your homework! Test locally first, on a testing server, and be sure to examine the log files of your server to ensure that this is working!
While the CSS files are explicitly set to cache, in our tests, Opera doesn't seem to cache the files when compressed.
Some people expressed concern about invoking PHP's parser for this, wondering if it would either tax the server or result in no overall speed benefit.
With respect to the first concern, as the CSS files are cached, the file need only be processed on the first visit. As such, we have not observed this to be much of a concern.
With respect to the second point, we've seen 70-80% reduction in the delivered file size. So for a 10K CSS file, your looking at a reduction of 7.5kb, for example. Though this may seem like much, it is significant - would you be willing to add another 7.5kb to your header graphic for no reason at all? Neither would we!
For reference, here is a list of past posts related to this topic:
A thank you should be extended to all those who gave feedback and helped to extend and get this to the point that it is, in particlular Alun Bestor and Robbert Broersma.
Thanks to Lars Kasper for catching the missing
charset in the
If you have an idea, comment or suggestion pertinent to this topic, please let us know via our contact form.
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..