Why and how?
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 , these modules are not available to everyone. If you have access to those modules,, 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'.
Outline
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.
The snippet
A little bit of PHP magic is needed to make this happen. The following code is all it takes:
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:
- 1.It uses PHP's ob_gzhandler to send compressed data. This function will first check to see if the browser requesting the file will accept 'gzip,deflate' encoding; if not it sends the file uncompressed.
- 2.It sends a header for the content type and character set for the file - in this case text/css and UTF-8.
- 3.The next step sends a 'cache-control http header'. Here 'must-revalidate' ensures that any information that you pass along about the freshness of your document is obeyed.
- 4.The final step is to send an 'Expires' header, to set an age on how long our cached file will last. Here we set it to expire in one hour.
Method One
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:
@import url(mycss.php);
Method Two
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.
Step one
First, you want to save the snippet provided above in a file called 'gzip-css.php' to the directory that contains your CSS files.
Step two
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:
- 1.The first line tells Apache to send all .css files to the PHP script handler.
- 2.The second line prepends the code snippet to your CSS file.
- 3.Optional: The third line tells PHP to use its built-in negotiated output compression automatically for every page it parses. If you use this method for compression, there is no need for having
ob_start ("ob_gzhandler");in the code snippet. So choose one or method or the other.
Comments (0)