Minification is the process of stripping out any of the unnecessaries that developers add to their files to make them easier to read and prettier to view. Things like white space (spaces), comment characters, line breaks, tabs, etc.

Example,

Original (279 bytes):

body {
font-family: helvetica, arial, sans-serif;
color: block;
line-height: 1.2em;
}

/* make divs centered */
.center {
display: block;
margin: 0 auto;
}

#box {
border: 1px solid #000;
padding: 15px;
margin-top: 5px;
}

Minified (165 bytes):

body{font-family:helvetica,arial,sans-serif;color:block;line-height:1.2em}
.center{display:block;margin:0 auto}#box{border:1px solid #000;padding:15px;
margin-top:5px}

The original CSS is now 41% smaller after minification! For low traffic websites, saving 114 bytes on a page load isn’t significant but for high volume sites, 1000 page loads (ignoring caching for the sake of argument) is about 111K of less data to be transferred. Now imagine a site like amazon.com getting millions of hits – the bandwidth savings becomes quite significant.

So, web developers. Reduce your bandwidth footprint and minify your CSS and Javascript files! You can use the free tool below to do so:

CSS/JavaScript Minify-O-Matic!