Smaller files for production, readable code for debugging
This minifier shrinks CSS, JavaScript and HTML for production and shows exactly what you saved: the original size, the minified size and the size after gzip, which is what your visitors actually download. JavaScript is minified with terser, the minifier used by most modern build tools, and CSS with csso, which also merges duplicate rules. Switch to Beautify to turn a minified bundle or stylesheet back into indented, readable code. Your code is processed in your browser and never uploaded.
How to minify or beautify code
- 1Choose the language: CSS, JavaScript or HTML. Dropping a
.css,.jsor.htmlfile on the input picks it for you. - 2Choose Minify to shrink the code or Beautify to format it.
- 3Adjust the options: for JavaScript, whether to mangle names and compress; for CSS, whether to restructure rules; for HTML, whether to minify inline styles and scripts. License comments are kept unless you turn that off.
- 4Read the sizes under the result to see the saving before and after gzip.
- 5Copy the output or download it as
.min.js,.min.cssor.html.
What minification does
Minification removes everything a browser does not need to run code: comments, indentation, line breaks and optional semicolons. Good minifiers go further. terser renames local variables to single letters (mangling), removes unreachable code, folds constant expressions and shortens if statements into ternaries. csso shortens colours (#ff0000 becomes red), drops zero units, and merges rules with identical declarations or selectors.
The result behaves exactly like the original, but is typically 30–70% smaller for JavaScript and 15–40% smaller for CSS before compression.
Why gzip size matters
Web servers and CDNs compress text files with gzip or Brotli before sending them, so the number that affects load time is the compressed size, not the raw one. Compression already removes much of the repetition minification targets, which is why a 60% minification saving can shrink to 20% after gzip. That is still worth having on every page view, and mangling in particular keeps paying off after compression.
The gzip figure here uses level 6, the default for nginx and most servers. Brotli usually comes out another 10–20% smaller.
Options explained
- Mangle names
- Renames local variables and function parameters to short names. Global names and object properties are never renamed, so code that other scripts call keeps working.
- Compress
- For JavaScript, terser's optimisation passes: dead code removal, constant folding, inlining. For CSS, csso's restructuring, which merges and reorders rules where it is safe.
- Keep license comments
- Keeps comments that start with /*! or contain @license or @preserve, which many open-source licenses require you to retain.
- Inline CSS and JS
- In HTML, minifies the contents of <style> and <script> elements and style attributes. JSON-LD blocks are compacted too; scripts of other types are left alone.
- Remove attribute quotes
- Writes class=nav instead of class="nav" where HTML allows it. Valid HTML, but some XML tools and templating systems dislike it, so it is off by default.
How HTML is minified
HTML minification here is deliberately conservative. Comments are removed, except Internet Explorer conditional comments. Runs of whitespace collapse to a single space, and whitespace next to block elements such as <div> and <p>, where it never renders, is removed. A single space is always kept between inline elements, because removing it would join <b>big</b> <i>world</i> into one word. The contents of <pre> and <textarea> are never touched.
If an inline script has a syntax error it is left exactly as it was and you are told which line it is on, rather than the whole page failing.
Beautifying minified code
Beautify uses js-beautify to re-indent code: one statement per line for JavaScript, one declaration per line for CSS and nested indentation for HTML. It is the quickest way to read a minified third-party script or to make sense of a stylesheet copied from a browser. Beautifying cannot bring back the original variable names or comments a minifier removed, but the structure becomes easy to follow.
For other formats, see the JSON formatter and the SQL formatter.
Frequently asked questions
- Is my code uploaded anywhere?
- No. terser, csso and js-beautify run in your browser, so your code stays on your device.
- Will minified JavaScript still work?
- Yes. terser only makes changes that preserve behaviour. Code that relies on function or class names at run time, such as some dependency injection frameworks, may need mangling turned off.
- Does it support modern JavaScript and ES modules?
- Yes. terser understands modern syntax including classes, async/await, optional chaining and top-level await. Files with import or export statements are minified as ES modules.
- Can it minify TypeScript or JSX?
- No. Compile TypeScript or JSX to JavaScript first, then minify the output. A syntax error with a line and column is shown if the code is not plain JavaScript.
- What is the difference between minifying and gzip?
- Minifying rewrites the code itself to be shorter. Gzip is a compression the server applies to any file when sending it. They work together: minify first, then let the server compress.
- Can I unminify JavaScript or CSS?
- Yes. Choose Beautify to re-indent minified code. Original variable names and comments cannot be recovered, but the structure becomes readable.
- Why is my CSS getting rules merged or reordered?
- That is csso's restructuring, which merges rules with the same declarations or selectors. It is safe for normal stylesheets; turn off Compress if you rely on a precise rule order across selectors with equal specificity.