Minify CSS

Unminified CSS is the script in its original state, correctly indented, human-readable, and maintainable.

You can reduce the size of the script files through minification.

It takes the browser less time to load and read the smaller CSS file.

Why it is important

Developers create CSS files using comments, white space, and coherent variable names.

In this way, they make code and markup more readable for themselves and others who might work on them later.

However, when it comes to serving your pages, their coding techniques cause extra network traffic without providing any functional benefit.

Using a minified file version provides the same functionality but reduces network bandwidth usage.

The end user will also notice a significant increase in page speed.

How the audit fails

Sitefig uses the Lighthouse tool, which calculates minification savings by determining the ratio of minified (removed whitespaces) CSS and actual CSS code on the page.

Though simple, this method accurately identifies whether a CSS was already minified and offers a relatively conservative minification estimate.

Fixing the problem

You can probably use an online service for manually minifying your files for small sites that don't update often.

You paste your CSS into the service's UI, and it returns a minified version of the code.

Take a look at Minify CSSand learn how to minify your CSS code.

If you're a professional developer, you'd probably want to create a workflow that automatically minifies CSS before deploying it.

The most common tool for this is Gulp or Webpack.