Minify CSS

How minify CSS to save space

Speed performance

How minify CSS to save space

Minified CSS files can give you the opportunity to save some space in terms of KiB (kibibytes): SeoChecker lists you in a table like the one below all the unminified CSS files, their size and their potential saving:

If you minify your CSS files, this will result in a saving in terms of loading performance, because usually they tend to be larger than it's needed.

For instance:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

can become:

h1, h2 { background-color: #000000; }

that uses a lot less bytes than the first one and it results completely equivalent to it. It can also be used without whitespace:

h1,h2{background-color:#000000;}

You can minify your CSS files in two ways:

• if you are a professional developer, the best solution for you is to arrange an automated workflow to minify it automatically. You can use a tool such as Webpack or Gulp.
• if you have a small site that is not updated frequently, there is the option to minify the files manually with an online service: you simply have to paste the CSS code in the service and you will obtain a minified version of it.