Epic CSS Minification - Compression + Gzip

[Marked 197]

So you've just finished your design and you're ready for your website to go live. It may be a reasonably large project, and it may have been necessary to use multiple CSS files to make the design process more manageable. Your are now faced with larger-than-necessary files and multiple HTTP requests, both of which are slowing down your websites load time.

 

Step 1: Create the file to call the CSS

Create a file named master.css.php in your CSS directory

 

Step 2: Include it in the document head

Include the file like it was a CSS file. Despite it being a PHP file, we send out the headers for a CSS document. No screenie necessary, but here you go:

 

Step 3: The contents of master.css.php

Here's the main code. I've commented it a wee bit and all you really need to be mindful of is that you include the correct the CSS files. Its super easy to edit, even if you don't know PHP.

<?php
//this will load ALL your CSS into a single variable, $css
ob_start();
   //include all your CSS files here. Make sure you get the order you want
   include('skeleton.css');
   include('typography.css');
   include('layout.css');
   include('menus.css');
   include('styles.css');
   include('ipb_overrides.css');
   //this stores all the above into $css
   $css = ob_get_contents();
ob_end_clean();
//Regular Expression to compress the CSS, ie remove comments, whitespace, etc.
$css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
$css = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css);
//Now we're going to compress it with GZIP
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);

   //simply echoing the $css variable will allow us to send it to
   //the already compressed CSS to the browser, gzip encoded
   echo $css;

if (extension_loaded('zlib')) {
   ob_end_flush();
}
?>

 

What are the effects?

I'm glad you asked. Take a look at the following image, and the CSS row:

The original size is in fact 34.4kb. The compression (removing whitespace, comments, etc) takes it down to 22.6kb, and finally the gzip takes it all the way down to 5.1kb. Thats nearly a decrease of a massive 674%.

 

You will notice that the Gzip is the biggest decrease in size. With GZip alone the file will be 7.0kb, so by compressing you are saving nearly another 2 kb. Every KB you can shave off the size the better :)

 

Sources

(all i did was combine the 2 examples).

http://www.catswhocode.com/blog/3-ways-to-compress-css-files-using-php

[Polraudio 122]

Wow that saves loading time. Makes it more dialup friendly :)

[Marked 197]

Yup lol even though dial up connections are rare, websites should still be trying to shave off as many KBs as possible. There will things that harder that you cant compress or that are larger even after compression. The latest JQuery for example is 94kb compressed.

 

I made a cool system for GDU using the above, but with the ability to add CSS files depending on what section you are viewing. For example, if you are viewing the forums, that CSS file will be included and you've got all the CSS you need from a single http request, all minified..