CSS Minifier online

Why use CSS minifier?

How minifying CSS files can improve performance?

The purpose of minification is to increase the speed of a website, improve your page load performance and reduce network payload sizes. Minimisation can make a script up to 50% smaller, resulting in a faster download time.

CSS files are often larger than they should be and often being in the head section of the page code blocking the first paint of your page itself.

Unminified code example:

/* My CSS Document */
h1 {
  font-size: 3em;
  color: #000000;
}
h2 {
  font-size: 2em;
  color: #CCCCCC;
}
.my-first-class {
  background-color: #000000;
}
.my-second-class {
  background-color: #000000;
}

The code example can be reduced to:

h1{font-size:3em;color:#000}h2{font-size:2em;color:#CCC}.my-first-class,.my-second-class{background-color:#000}

From the browser's point of view, these 2 code samples are equivalent, but the minified vesrion uses less bytes. CSS Minify can further improve byte efficiency by removing code redoundance, whitespace and comment lines.

Minifying CSS code increase the performance of your site, increase page speed and download times by making the code easier to read and to interpret.