Minify CSS, JavaScript and HTML: what it removes and how to do it

Short answer: Minifying removes what code doesn’t need to run, such as comments, spaces and repeated rules, so CSS, JavaScript and HTML files download smaller. Do it in your build or with a setting on your platform, and let the server compress what is left. Lighthouse flags unminified CSS and JavaScript files.

What minification removes

web.dev describes minification as removing the unnecessary and redundant characters that make source code readable for people. It isn’t strictly a compression algorithm.

Browsers don’t need code comments, so stripping them from CSS, HTML and JavaScript reduces the transfer size of the page. Spaces and tabs can go too, except where the page needs them, such as the spaces in HTML text that people read.

A smart CSS minifier can also merge rules that repeat a selector. web.dev warns that this can’t always be applied aggressively, because selectors are often repeated on purpose, for example inside media queries.

In web.dev’s example, a small HTML page with its CSS and JavaScript goes from 516 to 204 characters, a saving of about 60%.

Chrome for Developers shows a CSS example: two rules with the same background color become one. For the browser, both versions work the same, and the second uses fewer bytes. Some minifiers go further and shorten the color #000000 to #000.

How Lighthouse flags unminified files

When we ran PageSpeed Insights on November 8, 2026, it used Lighthouse 13.6.0. Its report names these audits Minify CSS and Minify JavaScript.

Chrome for Developers says each audit lists the unminified files, along with the potential savings in kibibytes (KiB).

For CSS, Lighthouse estimates the savings from the comments and whitespace it finds. Chrome for Developers calls this a conservative estimate: a minifier can save more than Lighthouse reports.

Minifying JavaScript can reduce payload sizes and script parse time, according to Chrome for Developers. Our guide to PageSpeed Insights explains how to read the rest of that report.

How to minify your code

For a small site you don’t update often, Chrome for Developers says you can probably use an online service. You paste your CSS into it, and it returns a minified version.

For professional developers, it suggests an automated workflow that minifies the CSS before each deploy. That is usually done with a build tool like Gulp or Webpack.

For JavaScript, it names Terser as a popular compression tool. It says webpack v4 includes a plugin for it by default, to create minified build files.

On WordPress, a number of plugins can concatenate, minify and compress your styles and scripts. Chrome for Developers suggests doing the minification up front with a build process, if possible.

web.dev adds that you can keep readable, well-formatted source code apart from the optimized code you ship. Source maps give you a readable view of that production code.

Minify and compress

Minifying and compressing add up: web.dev says compression on top of minification can give additional savings.

In its table, jQuery 3.7.1 goes from 302 KiB to 69 KiB with Brotli, and its minified file from 85 KiB to 27 KiB.

web.dev also compares a framework’s versions: the development version of Angular 1.8.3 is nearly 1.4 megabytes, and its production version is 177 kilobytes.

As of Lighthouse 13, the text compression check sits in the Document request latency insight. Our guide to gzip compression explains how to turn compression on.

Minifying isn’t removing unused CSS

Lighthouse checks CSS that a page doesn’t use in a separate audit, Reduce unused CSS. Chrome for Developers says it lists stylesheets with unused CSS.

By default, a browser must download, parse and process every external stylesheet it finds before it shows any content. Unused CSS also slows down how the browser builds the render tree.

The Coverage tab of Chrome DevTools can help you tell critical CSS from non-critical CSS. Our guide to website speed covers the other ways to make your pages load faster.

In our view, check your pages after you turn minification on: the layout, the menus and the forms should work as before.

Minify your CSS and JavaScript, step by step

1. Run PageSpeed Insights on a page and look for the Minify CSS and Minify JavaScript audits.
2. Turn on minification in your build tool, or with a setting or plugin on your platform.
3. Publish the minified files, and keep the readable source files for editing.
4. Clear your caches and check that your pages look and work as before.
5. Run PageSpeed Insights again on the page you tested.

Steps 1 to 3 follow Chrome for Developers and web.dev. Steps 4 and 5 are our advice.

Before you call it done

• The Minify CSS and Minify JavaScript audits no longer list your files.
• Your build or your platform minifies every new release automatically.
• You edit the readable source files, not the minified ones.
• Your server compresses the minified files with Brotli or gzip.
• Your pages look and work as they did before.
• You checked the Reduce unused CSS audit too.

RememberMinifying strips what browsers don’t need from CSS, JavaScript and HTML. Do it automatically in your build or platform, compress what is left and check your pages afterwards.

With our web design service, we build for speed from the first page: images sized for the screen, few plugins and caching.

Questions about minifying CSS, JavaScript and HTML

Does minifying change how my site looks or works?

It shouldn’t. Chrome for Developers shows a minified CSS example that works the same for the browser and only uses fewer bytes. web.dev notes that merging repeated rules can’t always be applied aggressively, because selectors are often repeated on purpose. In our view, check your pages after you turn it on.

How much smaller does minified code get?

It depends on the code. In web.dev’s example, a small page goes from 516 to 204 characters, a saving of about 60%. The development version of Angular 1.8.3 is nearly 1.4 megabytes, and its production version is 177 kilobytes.

Should I minify HTML too?

web.dev applies the same idea to HTML as to CSS and JavaScript. HTML comments can go, and so can spaces and tabs, except the ones the page needs, such as the spaces in the text people read.

Which tools minify CSS and JavaScript?

Chrome for Developers names build tools like Gulp or Webpack for CSS, and Terser for JavaScript, with a plugin that webpack v4 includes by default. On WordPress, a number of plugins can minify styles and scripts. For a small site you don’t update often, you can probably use an online service.

Is minifying the same as removing unused CSS?

No. Minifying shrinks the code you keep, and removing unused CSS deletes rules the page doesn’t use. Lighthouse checks them in separate audits, Minify CSS and Reduce unused CSS. The Coverage tab in Chrome DevTools can help you tell critical CSS from non-critical CSS.

Sources

We read these pages on November 8, 2026. Chrome for Developers: Minify CSS, Minify JavaScript, Remove unused CSS and Enable text compression. web.dev: Optimize the encoding and transfer size of text-based assets. On our site: our web design page, plus our guides to PageSpeed Insights, gzip compression and website speed.