Free Code Minifier — Minify JavaScript, CSS, HTML Online

Every kilobyte your website sends to a visitor costs time. On a 3G connection, an extra 100KB of JavaScript adds half a second to page load. On a slow mobile network, it adds more. Visitors don't wait -- they leave. Minification shrinks your code files without changing what they do.

Our free code minifier compresses JavaScript, CSS, and HTML by removing whitespace, comments, and unnecessary characters. Paste your code, click minify, and copy the compressed output. No build tools, no signup, no data uploaded to any server.

What Minification Actually Does

Minification is a set of transformations that reduce file size without changing behavior. Here's exactly what happens to your code:

• Whitespace removal. Spaces, tabs, and newlines that exist for human readability are stripped. The browser doesn't need them -- it parses tokens, not formatting.
• Comment removal. Single-line comments (//), block comments (/* */), and HTML comments (<!-- -->) are deleted. They exist for developers, not for execution.
• Variable shortening (JS only). Local variable names like customerOrderTotal get shortened to single characters like a. The browser doesn't care what variables are named, and shorter names mean fewer bytes.
• Dead code elimination (JS only). Unreachable code paths, unused variables, and redundant statements are removed entirely.
• Shorthand optimization (CSS). Properties like margin: 10px 10px 10px 10px collapse to margin:10px. Color values like #ffffff become #fff.

The critical point: minified code is functionally identical to the original. Same inputs produce the same outputs. The difference is purely in file size and human readability.

Why File Size Matters for Web Performance

Google's Core Web Vitals directly impact search rankings, and file size affects every metric. Larger JavaScript files take longer to download (increasing First Contentful Paint) and longer to parse and execute (increasing Largest Contentful Paint and Time to Interactive).

The numbers are concrete. According to HTTP Archive data, the median web page loads 500KB of JavaScript. On a typical 4G connection, that's about 1.5 seconds just to transfer the JS files -- before parsing and execution add another 1-3 seconds on mid-range phones.

Minification alone can cut JavaScript file sizes by 30-50%. Combined with gzip or Brotli compression on your server, total transfer size drops dramatically. A 500KB JS file might become 150KB after minification, then 45KB after gzip. That's a 91% reduction.

For CSS, the impact is smaller in absolute terms (CSS files are usually smaller than JS) but still meaningful. Every millisecond of CSS download time is a millisecond your page renders without styles, causing layout shift or flash of unstyled content (FOUC).

JavaScript vs. CSS vs. HTML Minification

JavaScript minification is the most aggressive. Beyond whitespace and comment removal, JS minifiers shorten variable names, inline simple functions, collapse constant expressions, remove dead code, and optimize boolean logic. A well-written 100KB JS file can drop to 40-50KB after minification.

CSS minification is more straightforward. It removes whitespace, comments, and redundant semicolons. It collapses shorthand properties, removes units from zero values (0px becomes 0), and merges duplicate selectors. The savings are typically 20-40% because CSS has less redundancy than JS.

HTML minification is the lightest touch. It removes whitespace between tags, strips comments, removes optional closing tags, and collapses boolean attributes (disabled="disabled" becomes disabled). HTML savings are usually 10-30% because HTML is already relatively compact. The bigger wins come from minifying the inline CSS and JS embedded within the HTML.

How Much Space You Actually Save

File Type	Typical Original	After Minify	Savings
JavaScript (app bundle)	500 KB	280 KB	44%
CSS (framework + custom)	150 KB	105 KB	30%
HTML (complex page)	80 KB	60 KB	25%
JSON (API response)	200 KB	160 KB	20%

These are conservative estimates. Heavily commented codebases with verbose variable names see larger savings. Minified files then compress even further with gzip (add another 60-70% reduction on top). The total pipeline -- minify then compress -- is standard practice for production deployments.

When to Minify (and When Not To)

Always minify production code. Every file served to end users should be minified. This includes your JavaScript bundles, CSS files, and HTML templates. There is no downside to minifying production code -- it loads faster and costs less bandwidth.

Never minify development code. You need readable code during development. Minified variable names make debugging impossible. Keep your source files formatted and use our code formatter to keep them consistently styled.

Use our tool for one-off minification. If you're embedding a script in a CMS, adding inline CSS to an email template, or pasting code into a field that doesn't have a build pipeline, our free minifier is the fastest path. Paste, click, copy.

Use build tools for automated minification. For projects with a build step (Webpack, Vite, esbuild, Rollup), configure minification in your production build. This way, every deploy is automatically minified without a manual step.

Sell Custom Apparel — We Handle Printing & Free Shipping

Frequently Asked Questions

How much smaller does minified code get?

Typical savings are 30-50% for JavaScript, 20-40% for CSS, and 10-30% for HTML. The savings depend on how much whitespace, comments, and verbose variable names exist in the original. Combined with gzip compression on your server, total transfer size can drop by 80-90%.

Does minification break my code?

No. Minification removes whitespace, comments, and shortens variable names -- it does not change program logic. The minified code produces identical output to the original. Always test after minifying, but breakage from minification alone is extremely rare with modern tools.

Should I minify during development?

No. Minified code is unreadable and impossible to debug. Keep your development files formatted and readable. Minify only for production builds. Most build tools (Webpack, Vite, esbuild) handle this automatically in production mode.

What is the difference between minification and compression?

Minification removes unnecessary characters from the source code itself. Compression (gzip, Brotli) encodes the file into a smaller binary format during transfer. They stack: minify first to reduce the source, then compress for transfer. Both reduce what the user downloads.

Can I reverse minification?

Partially. You can re-format minified code to add whitespace back using a code formatter, but shortened variable names cannot be recovered. This is why you should always keep your original source files and only minify the production output.