One of the easiest ways to trim the weight of your website is to gzip your content and one of the best candidates for this is your site’s cascading style sheets, or CSS.
The process for gzipping your CSS files is very simple. First, we will download a .php file that will process your CSS files, appending gzip-related code if the visitor’s browser can process it (most can). Then, we will tell .htaccess to send all .css files through this .php file before being sent out to the visitor.
Download CSS Gzip Processing File
You will need to download this csszip.php file (right click and save the file locally as a .php file, click to read the code) and put it on your server. As with any file you download and install on your server, read through it and make sure you understand everything that happens in it. Don’t take my word on what it actually does!
This file was adapted from this post on gzipping CSS files.
The next step is to tell your server to send every .css file through this processor to be Gzipped. By doing it this way, you don’t have to add gzip-related code to every .css file on your server. This will let your web server do the heavy lifting and ensures every .css file, even the ones you forgot, are being gzipped if the visitor’s browser supports it.
RewriteRule ^(.*).css$ /csszip.php?file=$1.css [L]
If you didn’t put the file where .htaccess is, modify the /csszip.php portion of the above code to reflect where the file is located.
Once you save your .htaccess file, test to see that everything is in order. First, load up your website to make sure everything is still working properly. You will want to clear your server cache if you have one (which you definitely should be using if you’re on WordPress) and then clear your local cache, that way you are ensuring you get a fresh copy of everything from the server.
If anything looks wrong, disable the .htaccess directive by putting a #, hashtag, at the head of the line and check your work. If all looks OK, check to see that it’s gzipped. If you are using YSlow, just run YSlow on your site. One of the grading factors is “Compress components with gzip,” look to see if any of your .css files are on that list of text files not being compressed.
Real World Savings
By gzipping the .css file on Bargaineering, its size dropped from 28.2K to 7.3K, a 74.1% savings. Response time for that file went from 53ms to 39 ms, a 26.4% savings. Regardless of the actual savings, it’s a no brainer move because faster is better, especially when it can be achieved with so little extra work.