Code Minifier
Minify CSS, JavaScript, HTML, and JSON to reduce file size. Shows exact bytes and percentage saved.
How to Minify Code
- Select the language tab: JavaScript, CSS, HTML, or JSON.
- Paste your original source code into the left panel.
- Choose your minification options (remove comments, mangle variables, etc.).
- Click Minify Code — the compressed output appears on the right with file size stats.
- Copy or download the minified file for deployment.
How Much Can You Save?
Typical minification savings vary by code type:
| Type | Typical Savings |
|---|---|
| CSS | 15–40% |
| JavaScript | 20–50% |
| JavaScript (mangled) | 40–70% |
| HTML | 5–20% |
| JSON | 10–30% |
Combined with gzip/Brotli compression on your server, total transfer size reductions of 80–90% are common.
Why Minify Your Code?
Minification is a core web performance optimization. Every byte you remove from CSS and JS files means faster page loads — especially on mobile connections. Google's PageSpeed Insights and Core Web Vitals scores both reward minified assets.
Faster Load Times
Smaller files transfer faster over the network. Even a 30% reduction in JS file size can noticeably improve Time to Interactive on slower connections.
Better SEO
Google's Core Web Vitals are a ranking factor, and page speed directly impacts Largest Contentful Paint (LCP) and First Contentful Paint (FCP) scores.
Lower Bandwidth Costs
Smaller files mean lower CDN and hosting bandwidth bills, especially for high-traffic sites serving millions of requests per month.
Mobile Performance
Mobile users often have slower connections and data caps. Minified assets significantly improve the experience on 3G and 4G networks.
Frequently Asked Questions
What is variable mangling?
Mangling replaces long variable and function names with short ones (a, b, c, etc.). This significantly reduces file size but makes the minified code unreadable without source maps.
Should I minify my development code?
No — keep your development files readable. Minify only for production deployment. Most build tools (Webpack, Vite, Rollup) handle this automatically during the build step.
What is a source map?
A source map is a file (or embedded comment) that maps minified code back to the original. It lets browser DevTools show original line numbers and variable names when debugging production code.
Can I minify HTML as well?
Yes. HTML minification removes comments, extra whitespace, and unnecessary attributes. Savings are typically smaller than CSS/JS but still contribute to faster initial page loads.
What's the difference between minification and obfuscation?
Minification removes unnecessary characters to reduce file size. Obfuscation scrambles code to make it harder to reverse-engineer. This tool performs minification, not obfuscation.
Should I use this instead of Webpack/Vite?
For quick one-off tasks, yes. For ongoing projects, build tools like Webpack, Vite, or Parcel are better — they handle minification automatically on every build and can do tree-shaking and bundling too.
Frequently Asked Questions
How much will minification reduce my file size?
Typical reductions are 30-70% for JavaScript and CSS. HTML typically compresses 10-30%. The exact saving depends on how much whitespace and how many comments are in your original code. The tool shows you the exact bytes saved.
Is minified code safe to use in production?
Yes — minified code is functionally identical to the original. All whitespace, comments, and formatting are removed, but the logic is unchanged. Minification is standard practice for production web deployment.
Can I un-minify (beautify) code?
Use our Code Formatter tool to beautify minified code. Paste the minified code, select the language, and the formatter will re-indent and structure it readably.
Does this minifier work on CSS frameworks like Tailwind or Bootstrap?
Yes — paste any CSS (including framework output) and it will be minified. For Tailwind specifically, the Tailwind CLI's built-in purge and minify process is more thorough for production use.
Is my code sent to a server?
No. All minification happens in your browser. Your code never leaves your device.