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