Minify and beautify HTML, CSS and JavaScript

Two directions

Minify removes everything a browser does not need: spaces, line breaks, comments, and in JavaScript even long variable names, so files download faster. Beautify does the opposite and lays code out with consistent indentation and line breaks, which is how you read a minified file or tidy code pasted from elsewhere. The size before and after is shown for every minified result.

What each minifier does

• JavaScript, with Terser: removes whitespace and comments, and with Shorten variable names renames local variables to single letters. Compress code also removes code that can never run and simplifies expressions. Shorten top-level names goes further, which is only safe for scripts that other scripts do not reach through global names. Remove console calls strips logging meant for development.
• CSS, with CSSO: removes whitespace and comments, shortens colours and values, and with Merge and reorder rules combines rules that share selectors or declarations. Turn that off if your styles depend on rule order in a way CSSO cannot see.
• HTML, with html-minifier-terser: collapses whitespace between tags, removes comments, and can minify the CSS and JavaScript inside <style> and <script> tags at the same time.

Licence comments that start with /*! can be kept, since many open source licences require the notice to stay with the code.

How much it saves

Hand written JavaScript with comments typically shrinks by half or more, and CSS by a fifth to a half, depending on how much whitespace and how many comments it had. The saving that reaches visitors is smaller, because servers compress text on the way out with gzip or Brotli, which already removes much of the repetition. Minifying and compressing together still give the smallest downloads, and for JavaScript the shorter names also make the code faster to parse.

When to use it

Modern build tools such as Vite, webpack and esbuild minify automatically, so this page is for everything else: a script on a simple website, a snippet for an email template or a CMS, checking what a build tool would produce, or reading minified code from a website when debugging. Keep the readable original in your project and publish the minified copy; minified code is not meant to be edited.

If something goes wrong

• It reports a syntax error. The code does not parse. The message names the line; fix it in the original.
• The page breaks after minifying JavaScript. Something relies on a name that was shortened, often through a global. Switch off Shorten top-level names, then Shorten variable names.
• Styles change after minifying CSS. Switch off Merge and reorder rules.
• Spaces vanished between inline elements in HTML. Collapsing whitespace can join words across tags. Keep a space inside the text, or switch off Collapse whitespace.