CSS & JS Minifier

The effect of minification is reduced if you're already using gzip

Let's be honest: minification mostly removes whitespace and newlines, which are the exact patterns that compression algorithms like gzip and Brotli are best at. For a compressor that already excels at reducing repetitive patterns to just a few bytes, removing that repetition beforehand doesn't make a huge difference.

The general trend is this: even if minification achieves a 30% raw size reduction compared to the original, the savings after gzip are usually much smaller. So don't mistake a claim like "minification saved 30%" for an equivalent reduction in actual transfer size.

This is why this tool's stats include a "Result after gzip" figure. That number is much closer to what actually travels over the network. Try it yourself: measure the gzipped size of your original source, then compare it to the gzipped size of the minified result. If the difference is only a few KB, then minification is more about source obfuscation than transfer size savings.

When this tool is enough · When you should use a build tool

This tool only performs safe minification, like removing whitespace and comments. It does not perform advanced optimizations like variable name mangling, dead code elimination, or property merging. The savings are lower than dedicated tools not because it lacks features, but because we chose not to implement them—renaming identifiers with a custom parser can silently break code that relies on dynamic references.

What to watch out for in CSS minification

When the 'CSS colors · 0 shorthand' option is enabled, six-digit hex colors are shortened to three digits, and values like `0.5em` become `.5em`. There are a few pitfalls here.

• You have to distinguish whether `#abcdef` is a color value or an ID selector. This tool only shortens colors when they appear in a property value, so it won't touch the same string if it's used as a selector.
• Whitespace inside `calc()` is significant. Removing the spaces around the minus sign in `calc(100% - 20px)` breaks the calculation entirely. This tool does not touch the contents of `calc()`.
• Comments starting with an exclamation mark (`/*!`) and `@license` comments are kept if the '`/*!*/ · @license comments`' option is checked. Be sure to keep this enabled when minifying open-source libraries. Removing license notices is a license violation.
• If the minified result is unreadable, you can use the "Beautify (CSS)" button to reformat it. However, comments that were removed will not come back. Always keep a copy of your original source.

JS Minification — Why aren't all newlines removed?

JavaScript has Automatic Semicolon Insertion (ASI), which means newlines can sometimes act as semicolons. Recklessly joining all lines can change how the code behaves.

• This tool only removes newlines in places where a statement must continue, such as after commas, operators, or opening parentheses. Other newlines are preserved. This is why the result is not always a single line.
• In the rare case that it's ambiguous whether a slash (`/`) is for division or a regular expression, minification is aborted to be safe, and you'll be told why. If your code didn't get smaller, this might be the reason.
• After minification, the result is re-checked by the browser's parser. If the syntax is broken, the result is discarded.

// The newline after return is interpreted as a semicolon, causing it to return undefined
function f() {
  return
  { ok: true }
}

// Conversely, removing this newline changes the behavior
var a = b
(function(){})()   // If joined, it becomes a call: b(function…)

What to do if minification breaks your code

1. First, check if the original source code was already broken. This tool validates the result with the browser's parser, so if an error occurs, it's highly likely the original source already had a syntax issue.
2. Check if the language auto-detection was wrong. Files with mixed content like CSS-in-JS or HTML snippets can confuse the detector. Try manually selecting the CSS or JS tab and running it again.
3. If you pasted multiple concatenated files, try minifying them one by one. This will quickly narrow down which file is causing the problem.
4. See if directives like `@license` or `webpackChunkName` were removed. Enable the option to preserve `/*!*/` comments.
5. If it still doesn't work, don't use this tool to minify it. It's time to set up a proper build tool. Working code that's less compressed is better than compressed code that's broken.