How to GZip CSS Files
by jim on December 29th, 2009One 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.
Modify .htaccess
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.
Like this article? Get all the latest articles sent to your email for free every day. Just click "Subscribe" and enter your email. Your email will only be used for this daily subscription and you can unsubscribe anytime.
December 29th, 2009 at 10:37 am
Jim – how is this different from GZIP’ing CSS file directly?
December 29th, 2009 at 11:26 am
This is no different. The benefit is that any .css file served from your site will be gzipped without you having to go in and gzip it yourself. So when you add a plugin and it uses its own CSS, it’ll be gzipped without any additional effort. It’s better for you to splice the css files together so the server only sends one “file,” but this is the next best thing. Splicing is a little more complicated (and the subject of a future post) so I offered this option first.
December 29th, 2009 at 9:12 pm
Jim, do you use any plugins you’d recommend to improve the performance of your sites?
December 29th, 2009 at 9:16 pm
By the way, this was very easy to follow, and improved my site from a 79 YSlow grade to a 91. Many thanks for the tip!
December 30th, 2009 at 4:52 am
Care to share what the quickest wins were?
December 30th, 2009 at 5:24 am
Hmmm it’ll be a topic of a future post …
December 30th, 2009 at 6:11 am
The change from 79 to 91 was entirely from compressing css files. I’ve been playing around with W3 Total Cache which compresses other files as well, but your suggestion made the biggest improvement. Over time I’ve added various javascript and images to the site that have really slowed it down. That’s the next thing I need to tackle.
January 4th, 2010 at 11:38 pm
This worked beautifully… now I’m wondering how I compress the java script files.
January 13th, 2010 at 4:05 pm
@Matt : simply add this line in your .htaccess, below the one for the CSS
RewriteRule ^(.*).js$ /csszip.php?file=$1.js [L]
If you look at the .php script you’ll see the option for JS too, and it works like a charm!
January 13th, 2010 at 9:21 pm
I’m not sure why but when I did it the javascript got messed up. There are probably some settings on my server mucking things up though but that’s how the script was originally intended.
January 13th, 2010 at 11:12 pm
@Guillaume: Thank you very much, that worked like a charm and boosted my homepage from a “B” rank to an “A” rank, and my single pages from a “D” rank to a “B” rank. Absolutely Wangarific.
January 15th, 2010 at 3:21 pm
FYI: I discovered later that (at least on my server) gzipping the .js files as denoted above caused 2 issues in WordPress administration:
1. Javascript boxes for entering URLs into posts come up, but are blank.
2. On “Thesis Options” page all sections are expanded and clicking the large “+” or individual section “+” has no effect… all options simply stay expanded.
There may be more issues but these are all I noticed for now, so just be aware.
February 1st, 2010 at 1:58 am
In my case, I had to add the following to the .htaccess file before the RewriteRule to get this to work.
RewriteEngine On
February 6th, 2010 at 12:44 pm
this works great for my CSS. thank you!
i also tried with my JS, but it seems to not work with one of my JS files.
is there a way to specify a file does not get compressed?
February 15th, 2010 at 9:20 pm
If you’re putting the PHP file in the same directory with the .htaccess file and the CSS or JS file, wouldn’t the .htaccess look like this:
RewriteEngine On
RewriteRule ^(.*).css$ csszip.php?file=$1.css [L]
and not
RewriteRule ^(.*).css$ /csszip.php?file=$1.css [L]
(I made two changes. Tell me I’m wrong.)
April 14th, 2010 at 12:01 am
I’d like to give this a try but the csszip.php.txt file is no longer available, I just get a page 404 error?
April 14th, 2010 at 12:03 am
Also, how will this affect very busy websites? Will my server get taxed or my webhost get cranky (I currently have about 1.8 million pageviews a month).
May 27th, 2010 at 8:26 pm
Like TC says, the file seems to have gone missing.
June 2nd, 2010 at 8:59 am
Thanks, I fixed it!
June 3rd, 2010 at 4:10 pm
Hi Jim, the text file doesn’t have anything in it.