18 CSS Compression Tools and Techniques

by on 4th December 2009 with 57 Comments

Learning to write clean, optimized CSS requires lots of practice and an unstoppable compulsive desire for neatness. Keeping your CSS trim and tidy isn’t all about feeding your crazy psychological need for cleanliness though, in the case of particularly large websites, the payoff is faster loading pages. Faster loading times equals increased usability and higher user satisfaction.

This post will examine several techniques you can use to optimize your CSS as well as several online tools that can automatically compress your code.

To Compress or Not to Compress

Before we get into how to compress your CSS, it should be noted that there is often a tradeoff between compressed and easy-to-read code. Many coders take pride in the organization evident in their CSS and wouldn’t dream of putting it through compressors that strip away comments and line breaks. As a web designer, you should analyze your goals for the code that you write. If you’re creating a small website that only requires a few lines of CSS, there may be no need for extra compression. Also, if you’re writing code that you have to share with a team of programmers, inserting extra comments and line breaks can save your colleagues a lot of time and garner some serious gratitude. However, if you’re designing a large website that requires tons of CSS, you definitely want to keep an eye on your file size and do what you can to keep it down.

It might take a while to find the perfect mix between compression and readability but both are worth pursuing and achieving that balance can make your job a lot easier. Also, it’s definitely not the case that compression always results in a reduction of readability. Many techniques you can use to compress your code will result in better, more organized code.

With that in mind, let’s jump into some techniques for keeping your CSS file size to a minimum.

Empty Style Blocks

Let’s start with the obvious. If you’ve got a style block with nothing in it, toss it. Don’t whine about how you might use them later either, they’re just clutter and you know it. Don’t add it unless you’ve got a reason to.

Shorthand

CSS Shorthand is a method of combining multiple lines of CSS into a single command. Making a habit of using all the shorthand tricks you are aware of can drastically reduce the lines of code you write in the long run. Here’s an example:

Long Version:

#container {
     padding-top: 5px
     padding-right: 10px
     padding-bottom: 30px
     padding-left: 18px
}

Shorthand version:

#container {
     padding: 5px 10px 30px 18px;
}

For more CSS shorthand tricks, visit the article below.

screenshot

CSS Sprites

The basic idea behind CSS sprites is reducing the number of HTTP requests to speed page load times. How sprites accomplish this feat is by combining multiple images into a single image, commonly in a grid format. Each individual image is displayed by shifting the background-position of the larger image. For a more detailed look at CSS Sprites, check out Chris Coyier’s tutorial over at CSS-Tricks:

screenshot

Comment Reduction

I love to fill my code with comments. The more comments I put it, the faster I can visually sort through the different sections of code. However, if you’re going for highly optimized CSS with a small footprint, excessive comments can eat up precious KBs. Try eliminating any unnecessary comments and reformatting those you absolutely must keep to as few characters as possible.

Reasonable Font-Families

When file size is a big issue, don’t pack your font-famlies to the max with alternatives. Cut out all the unnecessary fat and trim your extra options down to one or two.

Before:

#container {font-family: Palatino, Georgia, Times, serif;}

After:

#container {font-family: Palatino, serif;}

Use Hex Colors

To cut down on characters, convert any RGB values to their hexadecimal equivalents. This may seem trivial, but every character counts!

Before:

#container {color: rgb(131, 100, 219);}

After:

#container {color: #8364DB;}

Eliminate Line Breaks

Go through each style block and remove unnecessary hard returns. You can also ditch the last semicolon

Before:

#container {
     margin: 5px;
     padding: 5px 10px 30px 18px;
}

After:

#container {margin: 5px; padding: 5px 10px 30px 18px}

10 Online CSS Compressors

CSS compressors automate much of the work of cleaning up your code. Many of them give you the percentage by which your file size has been reduced so be sure to try a few to see which one is best.

CSS Drive

screenshot

Options:

  • Compression Mode: Light, Normal or Super Compact
  • Comment Stripping: None, all, or those longer than a specified length

CSS Compressor

screenshot

Options (Choose Yes or No for Each):

  • Sort Properties
  • Compress Colors
  • Compress Font-weight
  • Lowercase Selectors
  • Remove Unnecessary Backlashes
  • Remove Unnecessary semi-colons

Arantius

screenshot

Options (Choose Yes or No for Each):

  • Strip Comments
  • Strip Comments at Least x Characters Long
  • One Rule Per Line
  • CSS Optimizer

    screenshot

    Options:

    • Do Not Remove Line Breaks (Yes or No)
    • Get CSS from URL, File, or Pasted Text

    Lottery Post

    screenshot

    Options: None

    Clean CSS

    screenshot

    Options (Choose Yes or No for Each):

    • Sort Selectors
    • Sort Properties
    • Optimize Selectors and Their Properties (0, 1 or 2)
    • Merge Shorthand Properties
    • Only Safe Optimisations
    • Compress Colors
    • Compress Font-weight
    • Lowercase selectors
    • Case for Properties (Lowercase of UpperCase)
    • Remove Unnecessary Backslashes
    • Convert !important-hack
    • Remove Last ;
    • Save Comments
    • Discard Invalid Properties (CSS2.1, CSS2.0 or CSS1.0)
    • Output As File

    Pingates

    screenshot

    Options (Choose Yes or No for Each):

    • Convert long colours names to hex
    • Convert long hex codes to short hex codes
    • Convert long hex to colour names
    • Convert RGB to hex
    • Remove zero measurements
    • Combine identical rules
    • Combine identical selectors
    • Combine properties
    • Remove overwritten properties
    • Remove useless values from margins and padding
    • Show statistics
    • Output in colour
    • Output using smallest size

    PHP Insider

    screenshot

    Options: None

    SevenForty

    screenshot

    Options:

    • Break Options: 500, 1000, 1500 or 2000

    Page Column

    screenshot

    Options: None

    GZIP

    screenshot

    Despite the horribly ugly website, GZIP is an incredibly useful tool for compressing many types of code. It’s not the easiest compression method to figure out though and may be confusing to beginners. Check out this tutorial for more information on GZIPPING your CSS.

    Conclusion

    As I said before, many of these methods may seem overzealous and inane. The trick is to look at the big picture. Though any one of these tips may have an almost insignificant effect, combining several or all of these techniques can result in a big impact on the file size of your CSS. Use the comments below to let us know what compression/optimization methods you use and why.

    Comments & Discussion

    57 Comments

    • http://www.designfollow.com designfollow

      great list

      thank you

    • http://www.webresauce.com Web Resauce

      This is a good list. There is however easy ways to Gzip such as the one below:
      http://thewebdevelopmentblog.com/2008/10/tip-speed-up-your-websites-using-gzip-and-merging-files/

      The above only requires a simple php file and a slight modification of the link you use for your CSS and Javascript.

      Look forward to some more articles soon!

    • http://diary.of.firas.ws Firas S.

      Useful tips. Thanks for sharing :)

    • Pingback: 20 techniques avancées CSS pour réaliser des effets de texte et de typographie

    • Pingback: Descubrimientos del 6 Diciembre 2009 | Blog de unique3w

    • http://ebiene.de Sergej Müller

      Nice css compressor: http://compressor.ebiene.de

    • http://trevorfitzgerald.com Trevor Fitzgerald

      Minify is a good one because it also compresses javascript files in addition to any stylesheets.

      http://code.google.com/p/minify/

      Very simple to set up and integrate, too.

    • http://www.h-quadrat.com hquadrat

      Hi there,

      some months ago I found this tiny little thing
      http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/

      And now I will test it against some of your links, we’ll see who does best :).

    • http://www.travisberry.com Travis Berry

      I messed with some of the compression methods but decided I liked my organized and commented code. Instead I just use gzip compression and call it good. An easy way to add it is to add

      SetOutputFilter DEFLATE

      to your .htaccess file. That also adds javascript compression.

    • http://www.travisberry.com Travis Berry

      Oops, the comments stripped out most of the code. http://imgur.com/LCXtI.png you can see an example of adding css and javascript gzip compression to your .htaccess here.

    • Pingback: links for 2009-12-06 | Digital Rehab

    • http://deerawan.com deerawan

      very nice list. Hmm..I often use csscompressor.com for compressing my CSS files

    • http://www.nothing.uk test

      response tester

    • http://wevlop.com deb

      Whenever i have to compress i use the CSS Drive one.

    • Pingback: CSS Brigit | 18 CSS Compression Tools and Techniques

    • Pingback: links for 2009-12-07 « Mandarine

    • http://www.howtowriteacoursework.com coursework

      nice compressor,

    • http://designredesign.net web designing templates

      worked out nicely

    • Pingback: CSS压缩大法:技巧与工具| CSS| 前端观察

    • http://denisefanov.ru Branding

      The greatest optimizator is CSSOptimiser/ Save the ~45% in my css. :)

    • Pingback: Mes favoris du 7-12-09 au 8-12-09 » Gilles Toubiana

    • gofry

      I never read the css after they are created, so I don’t care about readability. When I need to edit the css, I just fire up firefox with firebug, inspect element and find the stylesheet and line number where the element is styled and change it.

    • http://ict.lithium.be/ Bart Gysens

      GZip people, let Apache do the thinking for you.

      And don’t forget headers (expire dates) and use css-combining when using more then 1 css

    • http://www.haykranen.nl/en Husy

      It doesn’t make sense to do any pre-optimizing yourself like converting rgb values to hex or to remove comments. Then you’re just sacrificing readability and, in the end, maintainability for nothing.

      Instead, use some kind of server-side solution to minify your CSS and cache it, like GZip or another solution that minifies your CSS code much better than you could ever do manually.

    • Pingback: Haftalık Derleme – 4 » Müjdat Korkmaz: Blog

    • Pingback: Enlaces semanales que no he publicado (42) | Cosas sencillas

    • Pingback: 18 Методов и инструментов cжатия CSS | Превосходный журнал

    • Pingback: You are now listed on FAQPAL

    • Pingback: CSS压缩大法:技巧与工具 | Jaycee's Blog

    • Pingback: 10个在线CSS压缩工具 : Web启点

    • http://www.adobebusinesscatalyst.com/ sakura hasegawa

      great list. thanks for sharing it with us. i’ve been a constant visitor of your site but i guess i missed this entry. i’ve recently found interest in an application called Business Catalyst. not sure if you’ve heard of it, but hopefully you can write about it soon. :) cheers!

    • Pingback: 18个CSS精简压缩工具和技巧 « 幻岛|领地

    • Pingback: Adam Koch's Blog » Blog Archive » Comparison of 10 CSS Compressors

    • http://psdcollector.blogspot.com psdcollector

      thank you for sharing these great tools and techniques ! love gzip .

    • 53north

      Stripping the last semi colon may seem finnicky, until you consider even a fun hobby blog like mine has had over 250,000 page views in 2yrs.
      Multiply that by the 20 million blogs knocking around… It soon adds up to a leaner web.

    • Keith

      I use this one here at 8Ddesign a c# xaml application for CSS & Javascript

    • http://howtotweak.com Flinn

      thnx a lot for such a nice post,I m gonna save some kb’s now,their are a lot of line breaks in my css,though I do not comment a lot in a my css file.

    • http://www.iranynemetorszag.com Külföldi munka

      Wonderful read, and excellent points. Cheers

    • Pingback: Din nou despre CSS3 | CNET.ro

    • ekoder
    • Always21

      Awesome!!
      This is what i need!
      Thanks~

    • http://www.realtysouth.info/ South Realty

      Wonderful items from you, man. I?ve consider your stuff prior to and you are just extremely wonderful. I actually like what you have bought here, really like what you are saying and the way in which wherein you assert it. You?re making it enjoyable and you continue to care for to keep it smart. I can not wait to read far more from you. This is really a terrific website.

    • http://www.finanznachrichten.de Investor

      Great article and great links to tools.

      In case you write an update, there is one thing that I miss: I try to find such a tool that allows you to compress a CSS file so much that the text is not readable for humans any more, but browsers still can understand it.

      Do you have any recommendation for that?

    • http://www.priteshgupta.com Pritesh Gupta

      I like that compressor.ebiene.de, its cool.

    • Pingback: Optimize Website Load Time | Compression Tools and Techniques | PriteshGupta.com

    • http://www.kreditefuerselbstaendige.net/ Selbständiger

      Really useful list, thanks for that. I like the compressor form Sergej Müller a lot. I compress my basic css files such as base.css, grid.css etc.. with it. For other all the other files it is better to use one of the other compressors, so you have the possibility to choose new lines for each class etc..

    • http://digzz.com/stories/932275/Check_out_the_top_ranked_wifelovers_web_page_on_the_internet.html Willis Achilles

      I’ve been exploring for a bit for any high-quality articles or weblog posts on this sort of house . Exploring in Yahoo I at last stumbled upon this site. Reading this info So i am satisfied to show that I’ve an incredibly good uncanny feeling I found out just what I needed. I most without a doubt will make certain to do not omit this website and give it a glance regularly.

    • Pingback: Speed up page loading in Wordpress

    • http://csscompressor.in Css Compressor

      Its always better use the compressed version of css to reduce the weight of website. Even Google & Yahoo mentioned it in their website optimization check list.

    • http://wemakesites.net Martin Ivanov

      A brand new tool for CSS merging and minification with cool UI is available on this URL: http://acidjs.wemakesites.net/builder-css.html

    • http://www.metroeddie.com urban travelling

      I am really loving the theme/design of your web site. Do you ever run into any browser compatibility problems? Some of my blog readers have complained about my website not working correctly in Explorer but looks wonderful in Chrome. Do you have any ideas to assist fix this issue? This data is magnificent.

    • http://www.metroeddie.com urban travelling

      I have to convey my respect for your kindness for all those that call for guidance on this 1 field. Your particular commitment to passing the answer up and down has been incredibly functional and has continually empowered a lot of people just like me to accomplish their dreams.

    • http://www.youtube.com/watch?v=yT7NByCy5VY Sandpoint waterfront for sale

      Howdy! Do you know if they make any plugins to safeguard against hackers?
      I’m kinda paranoid about losing everything I’ve worked hard on. Any tips?

    • Julinapandit

      Tanks.

    • Pingback: Cleaning Up Your HTML and CSS Code | Learning from Lorelle

    • Pingback: Web Performance Resources and Optimization Tools | TechSlides

    • Pingback: MpacArts | People Hate Slow Websites

    Subscribe
    Membership
    About the Author