GZipping Stylesheets

For optimal performance you should remove extra white-space from your JavaScript and from your Stylesheets, and also send it as GZipped content where possible. With JavaScript it is relatively simple to do so but with CSS it can be trickier.
In the quest for getting better performance out of your site you're likely to have used YSlow at some point (see Profiling JavaScript) to see what it is you can do to improve. Admittedly as I have said before it is a bit of a pointless extension at present, but the tips it does provide although generic are still invaluable.
The first step is to make sure you have Apache GZipping your PHP pages - this is discussed in an earlier article (see Using mod_gzip in Windows for help on doing this in Microsoft Windows using Apache Webserver). Once you've done this we can move on and create a PHP file that will be used for handling stylesheets. If you have not been able to enable styles.php that sits in the same folder as your stylesheets. Inside this file you will want something along the lines of:
<?php
$expire = 365*24*60*60;
header('Content-Type:text/css');
header('Expires: ' . date('D, d M Y H:i:s',time()+$expire) . ' GMT');
header('Cache-Control: max-age=' . $expire);
header('Pragma:');
ob_start("ob_gzhandler");
if (isset($_GET['stylesheet'])) {
include $_GET['stylesheet'];
}
else {
include 'reset.css';
include 'styles.css';
}
ob_flush();
?>
The above will send a content type of text/css indicating to the browser that what it is about to receive is a stylesheet rather than normal plaintext. The following 3 headers specify how the file should be cached so that it does not have to be downloaded everytime. ob_start("ob_gzhandler"); specifies that what follows should be entered into the output buffer as using the GZIP handler so that any content that follows is GZipped. The following if-then-else block is used so that a standard set of stylesheets can be easily included on the same page without having to make multiple HTTP requests. Any stylesheets for the same media type that appear on the same page should really be requested like this instead of seperate link lines in your HTML or instead of @import lines in your CSS file. The final line will then output the GZipped content from the output buffer. If you were able to enable mod_gzip in Apache then you can omit the two lines for starting and flushing the output buffer.
Using the following line in HTML would result in attaching a stylesheet that has the contents of reset.css and styles.css GZipped in a single file:
<link type="text/css" rel="stylesheet" href='./styles/styles.php' media="screen" />
If I did not want those stylesheets to be GZipped and instead wanted to GZip the stylesheet for handheld devices then I would use:
<link type="text/css" rel="stylesheet" href="./styles/styles.php?stylesheet=handheld.css" media="handheld" />
That's all there is to it. It's possible to make a more complex one for doing more such as combining any number of specified stylesheets - but that too should be easy enough to create from the above example. In using this method on this site I have reduced the total filesize of the stylesheets being served from 21.9Kb for normal browsing devices down to 5Kb which now has an average load time of 110ms.

Anonymous
Hmmm... gonna test this.