SubscribeHow would you like to decrease the load time of your bloated CSS file by up to 85% in less than five minutes?"
I recently found a link to fiftyfoureleven.com and their great article, ”The Definitive Post on Gzipping your CSS. When I saw this the first time I almost fell out of my chair with excitement. The dream is real — you really can cut the load time of your CSS file by more than half with just a few lines of code — and you don’t need a computer science degree to do it. What do you need? Either PHP or Apache. If PHP and Apache don’t make any sense to you then hang on for a few days as I’ll be posting a how-to of my own that expands on these for newbies. If PHP and Apache aren’t greek to you, then read on.
Before implementing it, please refer to the original article listed above. This is just a short how-to. There are many implications so please read the source article.
There are basically two methods to accomplish this amazing feat. The first involves two simple steps.
Step 1
Include the following piece of code at the top of your CSS page.
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);
Step 2
Rename your .css page .php. That’s it — you’re done!
Step 1
Create a .php file with the name “gzip-css.php” with the following code in it.
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);
Step 2
Create a .htaccess file with the following code in it.
Now just upload these two files to your CSS directory. That’s it, you’re done!
As stated above this is just a primer. Please refer to the original authors’ sites for a more complete understanding of this complex subject.
I’ve tried both of these methods out on our own site and they both worked. Since I’m using a CSS filtering system to filter for rogue browsers the second method worked best as I have multiple style sheets in my CSS directory.
The Proof is in the Load Time
I implemented this on our site and was amazed with the results. Before compression, our main stylesheet was 23,656 k and after the five minute compression process our stylesheet was 3,269 k for an original file size reduction of 86.26%.
From a user experience standpoint this may be one of the least talked about and most important implementations any web designer/developer can do for his or her website or clients’ website. After all, your CSS and your site content are a great portion or your overall load time.
Please check back as I have several articles planned for this subject. Next up is compressing all of the content from your website or blog.
Special thanks to the original author
Haha, but your site is no longer using it. 
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco focused on next generation websites. About Max...
Blog Comments