What is code minification?

Minification removes unnecessary characters from source code (HTML, CSS, JavaScript) without changing functionality – whitespace, comments, line breaks, and sometimes long variable names get shortened. The result: smaller files = faster page loads = better Core Web Vitals = better SEO. A typical CSS file shrinks 20-40% after minification; JavaScript can shrink 30-50%; HTML 5-15%. These savings compound across an entire site – and on mobile networks where every kilobyte matters. This tool minifies HTML, CSS, and JavaScript with one-click switching between languages. For production websites, always serve minified versions of your code – keep readable source code for development, minify on deploy.

How to use this tool

1. Choose language tab — HTML, CSS, or JavaScript – each has different minification rules.
2. Paste code in input box — Your unminified code – with comments, whitespace, line breaks.
3. Read minified output — Compact version on the right. Below shows original vs minified size and saved percentage.
4. Copy or download — Copy button for clipboard. Download saves as .html, .css, or .js file.

What gets removed

HTML minification:

• HTML comments <!– –>
• Whitespace between tags
• Extra spaces within attributes
• Optional closing tags (in some cases)

CSS minification:

• CSS comments /* */
• Whitespace around selectors and properties
• Spaces around { } : ; ,
• Trailing semicolons before }

JavaScript minification:

• Line comments // and block comments /* */
• Extra whitespace and newlines
• Spaces around operators (where safe)
• Sometimes: variable name shortening (advanced minifiers like Terser only)

What’s NOT removed:

• Necessary functional code
• Strings inside quotes (whitespace preserved)
• Conditional comments (IE-specific)
• License headers (often kept for legal reasons)

Examples

Original CSS:

/* Main styles */
.button {
    background: blue;
    color: white;
    padding: 10px 20px;
    /* TODO: add hover */
}

.button:hover {
    background: darkblue;
}

Minified (60% smaller):

.button{background:blue;color:white;padding:10px 20px}.button:hover{background:darkblue}

Original HTML:

<!-- Header -->
<div class="header">
    <h1>Welcome</h1>
    <p>Hello world</p>
</div>

Minified (~30% smaller):

<div class="header"><h1>Welcome</h1><p>Hello world</p></div>

Tips & best practices

• Always minify production code – never serve unminified to end users
• Keep readable source code in version control – minify only during build/deploy
• Modern build tools (Webpack, Vite, Parcel, Rollup) handle minification automatically – learn them
• For HTML: minification saves 10-15%. For CSS: 30-40%. For JS: 40-50%. Cumulative savings significant
• Combine with gzip/brotli compression for additional 60-80% size reduction in transit
• Test minified code before deploying – some edge cases (template literals, regex) can have issues
• For maximum JS minification, use Terser (mangles variable names too) – this tool is basic, doesn’t mangle

Limitations & notes

This tool does BASIC minification – removes whitespace and comments. For production-grade minification, use dedicated tools: Terser (JS, includes name mangling for ~50% extra savings), cssnano (CSS), html-minifier (HTML). These handle edge cases better. Don’t minify code containing templates, regex literals with whitespace, or other special patterns without testing the result.

Frequently Asked Questions

Will minification break my code?

Basic minification (whitespace/comment removal) is safe in 99% of cases. Advanced minification (variable name shortening) can break code that uses string-based lookups or eval(). Test in dev environment before deploying. If something breaks, the fix is usually 1-2 lines.

Should I minify HTML too?

Yes, but savings are modest (5-15%). For HTML with lots of inline JavaScript or comments, more like 20%. The bigger wins are in CSS and JS. For static HTML pages, minification still helps a little – every byte matters on slow networks.

What’s the difference between minification and compression?

Minification: removes characters from source code (smaller file size). Compression: encoding the file with gzip/brotli for transmission (much smaller transit size). Stack both: minify, then compress. Combined savings: 80-90% of original size.

Why do I see minified code in browser DevTools?

DevTools ‘pretty print’ button reformats minified code for readability. The actual file on server is still minified – DevTools is just showing you a beautified version for debugging.

Should I use source maps with minified code?

Yes, for debugging. Source maps connect minified code to original source – so when an error occurs in production, you can debug in original code. Modern build tools generate them automatically. Keep source maps separate (.map files) – don’t serve in robots.txt.

How much does minification really help page load?

Significantly. A page with 100 KB unminified CSS+JS becomes ~50 KB after minification. With gzip on top: ~15 KB. From 1 second download time on 3G to 0.15 seconds. Compound across multiple resources, the difference is huge.

Can I un-minify code?

Yes – ‘beautifiers’ add whitespace back (Prettier, beautifier.io). But variable names that got mangled (like ‘a’, ‘b’) can’t be restored to original meaningful names. Always keep source code separately.

Related tools

JSON Formatter · HTML Table Generator · XML Formatter