Nowadays, it is very important website load very fast. infact, speed is one factor used by Google, Bing and other major search engine to rank site on search engine result page. also if a website is slow, it gradually looses it visitors which in turn increase the website bounce rate.
One of the numerous ways to make website load at lightening speed is by compressing and minifying website CSS files. by so doing you are reducing the size of the CSS stylesheet and when a browser is retrieving or downloading the CSS file(s), it does so quickly because the css file size is small which in turn increase website loading speed.
Illustrations
Uncompressed Cascading Style Sheets (CSS)
[css]
table.revision-info td {
margin: 0px;
padding: 0px;
}
div.revision-graph { position: absolute; min-width: 1px; }
div.changeset-changes ul { margin: 0; padding: 0; }
div.changeset-changes ul > ul { margin-left: 18px; padding: 0; }
li.change {
list-style-type:none;
background-image: url(../images/bullet_black.png);
background-position: 1px 1px;
background-repeat: no-repeat;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 20px;
margin: 0;
}
[/css]
Compressed Cascading Style Sheets (CSS)
[css]
table.revision-info td{margin:0px;padding:0px}div.revision-graph{position:absolute;min-width:1px}div.changeset-changes ul{margin:0;padding:0}div.changeset-changes ul >ul{margin-left:18px;padding:0}li.change{list-style-type:none;background-image:url(../images/bullet_black.png);background-position:1px 1px;background-repeat:no-repeat;padding-top:1px;padding-bottom:1px;padding-left:20px;margin:0}
[/css]
List Of Online CSS Compressors
-
CSScompressor.com
CSS Compressor is an online tool to compress and reduce CSS code size and make your web pages load faster. it has useful compression options such as Compression Mode ranging from low, standard, high, highest; and how the compression should go. -
CSSdrive.com
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two. Switch to Advanced mode instead for greater customization.
-
Minifycss.com
Minifycss is a high performance free online CSS Compressor tool. it has advanced features to give veteran programmers greater control over how you compress your CSS. Beginner? don’t worry; leaving it advanced features set to default will give you the same great compression, and it couldn’t’t be easier to use.
-
Cleancss.com
Cleancss helps you get smaller CSS file sizes and better written code. The way the optimizer works actually lets you decide how much compression you want. From super compressed (virtually unreadable and editable by a human being) to visually pleasing. I prefer the standard setting because it gives you a little of both.
Important Note: Your code should be well-formed. This is no validator which points out errors in your CSS code. -
Arantius.com
This is, though, written in javascript so it’s all client side (no transmitting your CSS to someone elses’ server), and it has a few more capabilities, plus configurable options. It basically takes out comments and whitespace from a CSS file, which can save more space than you might imagine.
-
Codebeautifier.com
Yet another online CSS compressor tool.
There are tons of other CSS minifying web tool online. if you know of any that has been of great help to you, do drop a comment. I’ll love to hear from you.