Minify CSS

Come minificare i CSS per risparmiare spazio

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.