Fall Sale! Code FALL2024 takes 25% OFF our Pro Plugins & Books »
Web Dev + WordPress + Security

Compressed CSS Compression

In this article, we discuss two practical methods for compressing CSS documents with PHP and/or .htaccess. See also: Compress CSS and JavaScript with PHP at WP-Mix.

Method One

Overview: This method involves adding a small PHP script to your CSS document and replacing its .css extension with a .php extension.

Place the following PHP script into the top of the CSS document that you wish to compress. Then change the .css extension to .php, to arrive at something similar to: compressed-css.php. Remember to use the new name when referencing the 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);
?>

Here is the same PHP script commented with functional explanations:

<?php

	// initialize ob_gzhandler function to send and compress data
	ob_start ("ob_gzhandler");
	
	// send the requisite header information and character set
	header ("content-type: text/css; charset: UTF-8");
	
	// check cached credentials and reprocess accordingly
	header ("cache-control: must-revalidate");
	
	// set variable for duration of cached content
	$offset = 60 * 60;
	
	// set variable specifying format of expiration header
	$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
	
	// send cache expiration header to the client browser
	header ($expire);

?>

Functional Summary: The previous PHP function will first check to see if the browser requesting the file will accept gzip-deflate encoding. If no such support is detected, the requested file is sent without compression. Next, the function sends a header for the content type and character set (in this case, text/css and UTF-8). Then, a must-revalidate cache-control header requires revalidation against currently specified variables. Finally, an expires header specifies the time duration for which the cached content should persist (one hour in this case).

Method Two

Overview: This method involves placing the PHP script in a separate .php file and adding a set of rules to an .htaccess file.

A more discrete, unobtrusive method for compressing CSS involves two steps. First, save the script provided in the first method (above) as a separate gzip-css.php file and place it in a CSS-exclusive directory. Then, add the following ruleset to an .htaccess file located in the same CSS-exclusive directory (i.e., the CSS directory should contain only CSS files):

# css compression htaccess ruleset
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On

Here is the same htaccess ruleset commented with functional explanations:

# css compression htaccess ruleset

# process all CSS files in current directory as PHP
AddHandler application/x-httpd-php .css

# prepend the PHP script to all PHP files in the current directory
php_value auto_prepend_file gzip-css.php

# compress all parsed PHP pages from current directory
# this rule is redundantly present as the first line of the PHP script
php_flag zlib.output_compression On

Functional Summary: The .htaccess rules above first instruct Apache to parse all CSS files in the current directory as PHP. After this, Apache is instructed to insert the contents of the gzip-css.php file into the beginning of each PHP (i.e., CSS) file parsed from the current directory. And finally, Apache is instructed to compress automatically every parsed document in the current directory.

References

About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
WP Themes In Depth: Build and sell awesome WordPress themes.

7 responses to “Compressed CSS Compression”

  1. when i am using the above code in my site i got the warning

    PHP Warning: ob_start() [ref.outcontrol]: output handler 'ob_gzhandler' conflicts with 'zlib output compression' in [...]

    how can i solve that problem….pls help me..

  2. rohini,
    Are you using WordPress for your site?

  3. Thanks, guys, this is all i need – really fast and easy to configure powerfull (9x times) compression! This method work for me great, no plugins/modules/etc to add! Keep going that way, greets!

  4. August Klotz 2007/05/30 12:00 am

    Just a note:

    In the first CSS-compression method you employ the function ob_start("ob_gzhandler"); without first testing for the presence of the required Apache extension, zlib. Replacing that first line with a simple check is an easy way to prevent unnecessary errors during implementation. Something such as the following would definitely do the trick:

    <?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} ?>

  5. hello. great tip but i have a problem please solve it. how to link .php extension file in css.Example- default in my theme is-

    <link rel="stylesheet" href="" type="text/css" media="screen" />

    now style.php how to link.

  6. Hi sandy, you should be able to simply link the PHP file the same way as a normal CSS file:

    <link rel="stylesheet" href="http://domain.tld/style.php" type="text/css" media="screen" />

    Just change the path to suit your needs.

  7. saiko_sama 2010/08/17 7:24 am

    Thanx a lot for sharing this, I was looking for such method since I seem not to have the deflate compression enabled on my server (always gettin 500 errors).
    I combined your css, js and php compression tips, and it works like a charm

    You saved my day :)

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
I disabled AI in Google search results. It was making me lazy.
Went out walking today and soaked up some sunshine. It felt good.
I have an original box/packaging for 2010 iMac if anyone wants it free let me know.
Always ask AI to cite its sources. Also: “The Web” is not a valid answer.
All free plugins updated and ready for WP 6.6 dropping next week. Pro plugin updates in the works also complete :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
RIP ICQ
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.