How to GZip CSS Files

by jim on December 29th, 2009

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.

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.

RSS Subscribe 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.

23 Responses to “How to GZip CSS Files”

  1. Pinyo Says:

    Jim – how is this different from GZIP’ing CSS file directly?

  2. jim Says:

    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.

  3. DR Says:

    Jim, do you use any plugins you’d recommend to improve the performance of your sites?

  4. DR Says:

    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!

  5. jim Says:

    Care to share what the quickest wins were?

  6. jim Says:

    Hmmm it’ll be a topic of a future post …

  7. DR Says:

    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.

  8. Matt Jabs Says:

    This worked beautifully… now I’m wondering how I compress the java script files.

  9. Guillaume Lambert Says:

    @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!

  10. jim Says:

    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.

  11. Matt Jabs Says:

    @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.

  12. Matt Jabs Says:

    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.

  13. Paul Says:

    In my case, I had to add the following to the .htaccess file before the RewriteRule to get this to work.

    RewriteEngine On

  14. Rick Says:

    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?

  15. Caroline Says:

    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.)

  16. TC Says:

    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?

  17. TC Says:

    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).

  18. John Faulds Says:

    Like TC says, the file seems to have gone missing.

  19. jim Says:

    Thanks, I fixed it!

  20. John Faulds Says:

    Hi Jim, the text file doesn’t have anything in it.

  21. Styledev Says:

    Just popping in to second John here on that the file is empty. If you could please provide an update that would be awesome!

  22. jim Says:

    Sorry for the delay but I fixed the problem. Thanks!

  23. Jz Says:

    Hi,
    I have implemented the csszip.php on css and it worked beautifully, many thanks for this. The problems started when I tried to do the same for js. When csszip.php compresses the file, it removed only /* */ lines and condenses everything on very few lines. In my js files, I have quite a few lines that were disabled with “//”, which is not removed by csszip and the file becomes a mess. Has anyone encountered the problem? Is there any smarter solution than to manually replace all // with /* */ ? Many thanks

Leave a Reply