Minify CSS

This means that the URL in question contains CSS files that are not minified or could be minified further.

Why is this important?

When creating CSS files, developers tend to use spacing, comments and well-named variables to make code and markup readable for themselves. It also helps others who might later work on the assets. While this is a plus during development, it becomes a negative when it comes to serving your pages. Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit.

These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Minification works by analyzing and rewriting the text-based parts of a file to reduce its overall size, resulting in faster response times and lower bandwidth costs.

What does the Hint check?

This Hint will trigger for any internal URL which references CSS files that could be minified further.

Examples that trigger this Hint:

The Hint would trigger for any CSS resource URL which contains comments, characters or spacing that is functionally redundant:

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

How do you resolve this issue?

To solve this issue, you would need to use a CSS minifier to minify your CSS code, which will automatically strip out the redundant elements.

• For small sites that you don't update often, you can probably use an online service for manually minifying your files. You paste your CSS into the service's UI, and it returns a minified version of the code.
• For professional developers, you probably want to set up an automated workflow that minifies your CSS automatically before you deploy your updated code (e.g. Gulp or webpack)

Further Reading

• Minify CSS (Lighthouse documentation)
• How to Minify Your Website’s CSS, HTML & Javascript
• Google Developers: Minify CSS