Minify CSS

Benefits of Minify CSS

Minifing CSS can help you reduce web page size upto 48%, It is one of the most important step for front end optimizarion. Which will result in faster page loading speed and improve user experience on any website or web app.

How does it works?

The term “minify” is programming lingo that describes the processes of removing unnecessary characters in the source code. These characters include whitespaces, line breaks, comments, and block delimiters which are useful for us humans but unnecessary for machines. We minify the files of a website containing CSS, HTML, and Javascript code so your web browser can read them faster.

Here is an example of what CSS minification looks like.

CSS Before Minification

    body {
  margin: 0;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #575757;
  text-align: left;
  background-color: #f5f6f7; }

[tabindex="-1"]:focus {
  outline: 0 !important; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 20px; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

CSS After Minification

    body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#575757;text-align:left;background-color:#f5f6f7}[tabindex="-1"]:focus{outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:20px}p{margin-top:0;margin-bottom:1rem}

Obviously, this is just a small example using a snippet of CSS code, but you can imagine the the amount of space this would save when minifying thousands of lines of code. So, if you wanted to do this manually by hand, technically you could. But you would run a high risk of error and needlessly shave valuable time off or your life!