CSS / JS Minifier
Minification reduces the size of CSS and JavaScript files by stripping comments and collapsing unnecessary whitespace, without changing the code's behavior. This lightweight client-side tool processes your code instantly in the browser — nothing is ever sent to a server — and shows you the original size, minified size, and percentage saved so you can gauge the impact at a glance.
While production projects typically use build-tool minifiers (such as esbuild, Terser, or Lightning CSS) that perform advanced optimisations like variable renaming and dead-code elimination, this calculator is ideal for quick checks, learning exercises, or one-off snippets where pulling in a full build pipeline is overkill.
How it works
Lightweight minification: (1) remove /* … */ block comments and // line comments; (2) collapse runs of whitespace (spaces, tabs, newlines) to a single space; (3) remove spaces around delimiters such as : ; { } , > ~ + for CSS, and = + - * / ; : { } ( ) [ ] , for JS. Savings % = (originalBytes − minifiedBytes) / originalBytes × 100.
Use cases
- Quickly shrink a CSS snippet before pasting it into a CMS or email template
- Check how much whitespace and comments inflate a JS utility function
- Learning how minification works step-by-step without a build tool
- Preparing small inline scripts or styles for HTML email clients
- Estimating bandwidth savings before setting up a full build pipeline
Frequently asked questions
What does a CSS or JavaScript minifier actually do?
A minifier reduces file size by stripping out everything the browser does not need to run the code: block and line comments, extra spaces, tabs, and line breaks. It also removes spaces around delimiters like braces, colons, and semicolons. The code's behavior stays exactly the same — only the formatting changes.
Does minifying CSS or JS change how the code works?
No. Lightweight minification only removes comments and collapses whitespace, so the logic and output remain identical. That said, edge cases like comments inside strings can trip up simple minifiers, so always test the minified result before shipping it.
How much smaller will my file be after minification?
It depends entirely on how much of your file is comments and whitespace. Heavily commented, well-indented code shrinks the most, while already-compact code sees little change. This tool shows the original size, minified size, and percentage saved so you can measure the exact impact for your snippet.
Is my code sent to a server when I use this minifier?
No. Everything runs client-side in your browser using JavaScript, and your code never leaves your device. That makes it safe to use even with proprietary or sensitive snippets.
Should I use this instead of Terser or esbuild for production?
For production builds, dedicated minifiers like Terser, esbuild, or Lightning CSS are the better choice because they also rename variables, eliminate dead code, and apply other advanced optimisations. This tool is meant for quick checks, learning, and one-off snippets where setting up a build pipeline would be overkill.