CSS Minify - Compress Your CSS For Better Page Speed

Apa Manfaat Menggunakan CSS Compresor?

Tools Online Gratis Untuk Meminify CSS, manfaat CSS Compressor ini unuk membuat CSS yang dibuat tidak mudah dibaca dan juga dapat mempercepat loading blog hingga 20% (tergantung dari ukuran css yang di minify)

Sebelum dan Sesudah Menggunakan CSS Compressor

/*
CONTOH CSS SEBELUM DI MINIFy / COMPRES
*/
blockquote {
  background-color: #ededed;
  color: #213040;
  display: block;
  font-size: 18px;
  font-style: italic;
  margin: 40px 0 20px;
  padding: 40px 20px 20px;
  position: relative;
  border-top: 3px solid #008c5f;
  border-bottom: 3px solid #008c5f;
  border-radius: 5px;
}

blockquote:before {
  content: '\201D';
  font: 700 60px Arial,sans-serif;
  color: #fff;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

blockquote:after {
  content: '';
  background-color: #008c5f;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 100px;
}

/*
CONTOH (1) CSS SESUDAH DI MINIFy / COMPRES
*/
blockquote{background-color:#ededed;color:#213040;display:block;font-size:18px;font-style:italic;margin:40px 0 20px;padding:40px 20px 20px;position:relative;border-top:3px solid #008c5f;border-bottom:3px solid #008c5f;border-radius:5px}blockquote:before{content:'\201D';font:700 60px Arial,sans-serif;color:#fff;position:absolute;top:-20px;left:0;right:0;text-align:center;z-index:1}blockquote:after{content:'';background-color:#008c5f;position:absolute;top:-25px;left:0;right:0;display:inline-block;width:50px;height:50px;margin:auto;border-radius:100px}



/*
CONTOH (2) CSS SESUDAH DI MINIFy / COMPRES
*/
blockquote{background-color:#ededed;color:#213040;display:block;font-size:18px;font-style:italic;margin:40px 0 20px;padding:40px 20px 20px;position:relative;border-top:3px solid #008c5f;border-bottom:3px solid #008c5f;border-radius:5px}
blockquote:before{content:'\201D';font:700 60px Arial,sans-serif;color:#fff;position:absolute;top:-20px;left:0;right:0;text-align:center;z-index:1}
blockquote:after{content:'';background-color:#008c5f;position:absolute;top:-25px;left:0;right:0;display:inline-block;width:50px;height:50px;margin:auto;border-radius:100px}

CSS Minify Tool

Minifying CSS takes the beautified, well formed CSS code that you have written and removes the spacing, indentation, newlines, and comments. These elements are not required for CSS to be used successfully. It also makes the CSS more difficult to read.

The 'best practice' of many developers is to maintain a 'beautified' version, and when rolling out their project will run the styles through a minification program. They will also combine their many style files into one file.

Why use CSS Minifier?

The purpose of minifcation is to increase the speed of a website. Minimisation can make a script up to 20% smaller, resulting in a faster download time. Some dev elopers will also use it to 'obfuscate' their code. This makes it difficult for the code to be read, thereby making it more difficult to reverse engineer or copy.

It is also common practice to combine all the CSS files for a single website into one file. This has a number of benefits. It reduces the number of HTTP r equest that need to be made to get all the elements of a website. It also makes minification and gzip compression more effective.

Info Minification: en.wikipedia.org/wiki/Minification_(programming)