Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Minify CSS

Overview

Minifying CSS files can improve your page load performance.

CSS files are often larger than they need to be. For example:

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

Can be reduced to:

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

From the perspective of the browser, these 2 code samples are functionally equivalent, but the second example uses less bytes. Minifiers can further improve byte efficiency by removing whitespace:

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

Some minifiers employ clever tricks to minimize bytes. For example, the color value #000000 can be further reduced to #000, which is its shorthand equivalent.

Recommendations

Use a CSS minifier to minify your CSS code.

  • 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. This is usually accomplished with a build tool like Gulp or Webpack.

Consult your favorite search engine to explore all of the different minifiers out there and to find out which one is best for you.

More information

Lighthouse provides an estimate of potential savings based on the comments and whitespace characters that it finds in your CSS. This is a conservative estimate. As mentioned earlier, minifiers can perform clever optimizations (such as reducing #000000 to #000) to further reduce your file size. So, if you use a minifier, you may see more savings than what Lighthouse reports.

Sources:

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.