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