How to Minify CSS, JS, and HTML (2026)

Minification removes whitespace, comments, and redundant characters from CSS, JS, and HTML without changing what the code does. A typical stylesheet shrinks by 20–40%; JavaScript often compresses by 30–50%. Every kilobyte saved reduces parse time and speeds up page load — especially on mobile connections.

What Minification Actually Does

The process differs slightly per language, but the core idea is the same: strip everything the browser does not need to execute the code.

How to Minify Manually (and Why You Might Not Want To)

For CSS, the main rules are: remove all /* comments */, collapse runs of whitespace to a single space, drop the space around : and {}, and remove the last semicolon before a closing brace. For example:

/* Before */
.card {
  display: flex;
  gap: 16px;
  background-color: #ffffff;
}

/* After */
.card{display:flex;gap:16px;background-color:#fff}

Doing this by hand is error-prone and does not scale. A single misplaced character breaks the entire stylesheet. For anything beyond a quick test, use a dedicated minifier that parses the language before transforming it — so it cannot produce invalid output.

Minification vs Compression vs Bundling

These three techniques are often confused but serve different purposes. Minification rewrites the source to be shorter. Compression (gzip or Brotli) encodes the bytes for transfer and is transparent to the browser. Bundling merges multiple files into one to cut request count. They stack: minify first, then let your server compress the result. Bundling is a build-step concern and applies mainly to JavaScript.

Most CDNs and hosting platforms apply gzip or Brotli automatically. Minification is still worthwhile because it reduces the size of what gets compressed — a smaller input produces a smaller output even after compression.

Use the CSS / JS / HTML Minifier to do this instantly.