Minification

How does minification work?

Minification is usually an automated build step. Developers keep readable source files, and the build produces minified versions for the live site. Browser developer tools can add whitespace back with a “prettify” function, and source maps link minified code to the original files for debugging (MDN, Wikipedia).

Lighthouse has audits for this: “Minify CSS” reports unminified CSS files and estimates the savings in KiB, and a parallel “Minify JavaScript” audit exists for JavaScript. For CSS, minifiers also apply shorthand such as turning #000000 into #000.

How does it differ from compression and obfuscation?

• Compression (gzip, Brotli) encodes the file for transfer, and the browser has to decompress it. Minified code needs no extra step because it runs as is. The two effects add up (web.dev).
• Obfuscation aims to make code hard to read. Minification aims for a smaller file, and its output is often reversible with a pretty-printer (Wikipedia).

Example

Before:

/* Primary button */
.button {
  color: #000000;
  margin: 0px;
}

After:

.button{color:#000;margin:0}

Common questions

Does minification change how a page looks? It should not. If a build step breaks a script, that points to a tooling problem.

Which tools are used? Google’s older PageSpeed Insights documentation names HTMLMinifier for HTML, cssnano and csso for CSS, and UglifyJS and Closure Compiler for JavaScript. Many CMS plugins and CDNs offer the same function.

Last updated: October 7, 2026