CSS Compressors - CSS Optimizers
One of the most important thing when developing websites is page loading speed, to load as quickly as possible, especially in the case of large websites with lots of CSS code where faster loading means increased usability and user satisfaction.
CSS Compression tools improves your load time performance by removing comments from code, placing each command in one single line, removing unneeded ‘white space’ characters like space, new line, and tab to reduce its size.
Keep in mind, if you really want to optimize website performance, after the development stage, you should go further with CSS sprites, minifying JavaScript, gzip compression and caching your files.
Try out these online CSS optimization tools, some of them also offer JavaScript compression, and see how they can speed up website response time and save your bandwidth as well.
Online CSS Compression Tools
1. cssdrive.com CSS Compressor – comes in 2 modes: Normal and Advanced. You can choose from three levels of compression. The ‘Normal’ mode should work well in most cases, creating a good balance between the two.
2. Clean CSS – CSS Formatter and Optimiser based on csstidy available in English, German and French.
3. CSS Compressor at csscompressor.com - select from 4 levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.
4. CSS Optimizer at cssoptimiser.com - Optimize CSS via URI, File Upload or directly input CSS code into the form. There is no any fancy options.
5. codebeautifier.com CSS Compressor – another one based on CSSTidy
6. askapache.com online CSS Compression Tool - this CSS minification tool uses part of the JavaScript port of the YUI Compressor, and part of the W3 CSS Validator. You can upload a CSS file, specify CSS url, or just paste the CSS code without any options included.
7. Robson iceyboard.no-ip.org CSS Compressor - You can upload a file, specify CSS file url, or paste the CSS code. Good compression options.
8. flumpcakes.co.uk CSS Optimizer - this tool reads CSS just like a browser would. So using hacks which are browser specific will give random results, make sure any hacks are removed before use.
9. ebiene.de – JavaScript and CSS compression tool. You can choose between basic and powerful compression.
10. pagecolumn.com – Compress CSS, find and remove unused class and id in CSS (optional).
11. Pingates.com - You can specify CSS file url, or paste the CSS code. The same options as at 7. – Robson iceyboard.no-ip.org CSS Compressor.
12. Lotterypost.com CSS Compressor - you just need to paste CSS code and click the Compress. Good info about the ways the CSS Compressor reduces the size of your CSS style sheet.
13. Peterbe.com - The XHTML, HTML and CSS compressor. Without any options.
14. Refresh-sf.com - Online JavaScript/CSS Compression Using YUI Compressor. Just paste your code into the text area or select a file to upload. Then choose your compression type, JS or CSS.
15. Sevenforty.com CSS Compressor - based on the Java YUI Compressor and utilizes most of the same rule sets in addition to a few extras added. Simply upload CSS file you wish to shrink down, select your line break option and and you will get compressed CSS file in a zip archive.
16. phpinsider.com – by Monte Ohrt, no fancy options, just paste the CSS code and collect the result.
17. Devtrench.com - another CSSTidy based compressor.
18. Cssportal.com - CSS Code Formatter and Optimizer, also CSSTidy based.
19. Mabblog.com – Specify CSS file url, or paste CSS code, no fancy options.
20. Creativyst.com – CSS and JavaScript compressor.
21. Generateit.net – CSSTidy based CSS compressor.
22. Arrantius.com CSS Compressor – written in javascript so there is no transmitting your CSS to unknown server. It takes out comments and whitespace from a CSS file, nothing more.
23. Artiss.co.uk - only file upload, option to remove comments or not.
24. Homepage-Performance.de – options like to delete white spaces, last semicolon, replace colors, etc. You can only paste the CSS code.
25. Isnoop.net – options to remove white spaces, indent CSS and new line before opening brace.
Additional CSS Tools:
CSS Validator Firefox Add-On - Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page.
CSS Analyser – check the validity of your CSS, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
SqueezeBox CSS files packer Windows application - allows you to pack single or multiple CSS style sheets and Javascript files for any number of pages.
Conclusion:
To summarize, try a few of them, experiment with CSS compressors, many of them give you the compression statistics, percentage by which your file size has been reduced.
Is there any other CSS compressors around the web or some other useful CSS tool we didn’t include here, please let us know.
An Arab site has the same properties
http://ndif.tk/
One thing to be careful with some of these compressors, is that a majority of the top ones strip out the new CSS3 design code. So if you are coding for webkit effects, some of these may not be in your best interest to use.
I personally use http://www.creativyst.com/Prod/3/.
It may not have many options, but minifies it fairly well enough to be readable.
Thanks for the post!
Thanks for the sources. Really useful. Will feature some of it in my posts. Bookmarked.
East or west, CSSDRIVE is the best.
These are great compressors. I will have to try a few and see what works best for me.