Minify HTML, CSS, and JS — Reduce File Sizes for Faster Pages

Minification removes whitespace, comments, and unnecessary characters from HTML, CSS, and JavaScript without changing behavior. Here's what gets minified, how much it saves,...

Mian Ali Khalid · 2026-05-11 · 6 min read

Use the tool

HTML / CSS / JS Minifier

Minify HTML, CSS, or JavaScript. Strips whitespace, comments, and unnecessary characters. Shows size reduction percentage.

Open HTML / CSS / JS Minifier →

Minification removes whitespace, comments, and redundant syntax from HTML, CSS, and JavaScript files. The code runs identically — the changes are invisible to the browser but reduce file sizes by 15–40%, which directly reduces page load time.

Use the HTML Minifier to minify HTML, CSS, and JavaScript in your browser.

What minification removes

HTML minification

<!-- Before minification (85 bytes): -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags -->
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
</html>

<!-- After (62 bytes — 27% smaller): -->
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Page Title</title></head></html>

HTML minification removes:

Whitespace between tags
Comments ()
Optional closing tags (</li>, </td>, </tr> in HTML5)
Attribute quotes when not required (<input type=text> is valid HTML5)
Boolean attribute values (disabled="disabled" → disabled)

CSS minification

/* Before (180 bytes): */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #4A90E2;
  color: #ffffff;
  border-radius: 4px;
}

/* After (107 bytes — 41% smaller): */
.button{display:flex;align-items:center;justify-content:center;padding:12px 24px;background-color:#4A90E2;color:#fff;border-radius:4px}

CSS minification removes:

Whitespace and newlines
Comments
Trailing semicolons before }
0 units (margin: 0px → margin:0)
Color shorthand (#ffffff → #fff)
Shorthand property merging

JavaScript minification

// Before (190 bytes):
function calculateTotal(items) {
  // Calculate the sum of all item prices
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

// After (76 bytes — 60% smaller):
function calculateTotal(i){let t=0;for(let n=0;n<i.length;n++)t+=i[n].price;return t}

JavaScript minification removes:

Whitespace and newlines
Comments
Renames local variables to shorter names (mangling)
Removes dead code
Simplifies literal expressions (true → !0, false → !1)

JS minification is more aggressive than HTML/CSS minification because variable renaming requires understanding scope.

How much minification saves

Typical savings on real-world files:

File type	Typical savings
HTML	10–30%
CSS	25–45%
JavaScript	30–60%
Minified + Gzipped	70–90% total vs original

Gzip (applied by most web servers) compresses already-minified files further. Minified code compresses better than formatted code because repeated characters (more whitespace = more repeated space chars) don’t compress as efficiently.

When to minify

Deployment workflow

Always minify in your production build. Never minify source files you’re editing — you’d lose readability.

Typical modern workflow:

Write formatted, commented source code
Build step (Webpack, Vite, Parcel) minifies automatically
Deploy minified output to production

Static site generators

Jekyll, Hugo, and Astro have built-in minification. For Astro:

// astro.config.mjs
export default defineConfig({
  build: {
    inlineStylesheets: 'auto',
  },
  vite: {
    build: {
      minify: 'esbuild',  // or 'terser'
    }
  }
});

Manual minification

The HTML Minifier is useful when:

You have standalone HTML files without a build pipeline
You’re minifying third-party HTML
You need to check what a minifier would output
You’re working with code snippets for documentation

Minification tools by type

HTML

html-minifier-terser (Node.js) — most configurable
HTMLMinifier (online) — quick for manual use

CSS

cssnano (PostCSS plugin) — production standard
clean-css (Node.js) — fast and configurable
csso (Node.js) — good at structural optimization

JavaScript

Terser (Node.js) — replaces UglifyJS, standard for modern JS/ES modules
esbuild — extremely fast, good compression
Google Closure Compiler — most aggressive compression

Build tools (handle all three)

Vite — uses esbuild for JS, cssnano for CSS
Webpack — TerserPlugin for JS, CssMinimizerPlugin for CSS
Parcel — automatic minification on production builds

CSS minification pitfalls

Don’t minify source files

If you edit minified CSS, you’ve made your source code uneditable. Keep the formatted original and generate minified output at build time.

Sourcemaps

Minified files are hard to debug. Sourcemaps link minified lines back to original source lines:

// Terser generates sourcemaps:
const { code, map } = await minify(source, { sourceMap: true });

Browser DevTools automatically use sourcemaps when available, showing original code in the debugger despite the minified file being loaded.

Property order in CSS

Some CSS minifiers reorder properties. If your CSS relies on property declaration order for specificity or cascading effects, verify the minified output behaves the same. This is unusual in standard CSS but can occur with unusual patterns.

Minification vs compression (gzip/brotli)

Minification and compression are complementary:

Minification — reduces file size by removing characters
Gzip/Brotli — further compresses the file during HTTP transfer

Both should be applied. Minification reduces the size that gets compressed; compression reduces transfer size further. Together they achieve 70–90% size reduction.

Configure your web server to serve gzip or brotli:

# Nginx:
gzip on;
gzip_types text/html text/css application/javascript;
gzip_min_length 1024;

HTML Minifier — minify HTML, CSS, and JavaScript online
HTML Minification Guide — what minification removes
Image Compressor — compress images alongside code

Critical CSS Inlining — Eliminate Render-Blocking CSS for Faster Load — Critical CSS inlining embeds above-the-fold styles directly in HTML to eliminate…
GZIP Compression for HTML — How It Works and How to Enable It — GZIP compression reduces HTML file size by 60-80% before sending to browsers. Le…
HTML Comments Guide — Syntax, Uses, and When Minifiers Remove Them — HTML comments use  syntax and are removed by minifiers unless they're co…
HTML Minification — What It Does and How Much It Saves — HTML minification removes whitespace, comments, and redundant attributes to redu…
Image Compression Guide — Reduce File Size Without Losing Quality — Image compression reduces file size by removing redundant data. Here's how lossy…

Related tool