HTML, CSS and JavaScript Minifier

How to use the HTML, CSS and JavaScript Minifier

1. Choose the language tab: HTML, CSS or JavaScript.
2. Paste your code. For HTML, decide whether inline styles should be minified too.
3. For JavaScript, choose whether local variable names may be shortened and whether to remove console calls.
4. Select Minify. If the code has a syntax error, the minifier reports it instead of producing broken output.
5. Copy or download the result and test it before deploying. Keep the original, readable version for editing.

Example: a small stylesheet

/* Buttons */
.button {
  padding: 12px 20px;
  color: #ffffff;
  background-color: #2742d8;
}

becomes

.button{padding:12px 20px;color:#ffffff;background-color:#2742d8}

The comment, line breaks, indentation and the last semicolon are removed; the values themselves are untouched. On real stylesheets, savings of 20–40% before server compression are typical.

Why minify code

Comments, indentation and descriptive variable names make code readable for people but are ignored by browsers. Removing them reduces the bytes visitors download and the time browsers spend parsing. Minification works alongside server compression (gzip or Brotli): compressed minified files are usually smaller still than compressed original files.

Most production build tools minify automatically. This tool is useful when you work without a build step — a small static site, a CMS theme, a snippet for a tag manager — or want to check what a minifier changes.

What each minifier does — and does not do

• CSS: removes comments (except those starting with /*!, which conventionally hold licences), collapses whitespace and removes it around { } : ; , and combinators, and drops the last semicolon in each block. Text inside strings and url() is never changed. Spaces inside calc(), which are meaningful, are kept.
• HTML: removes comments and collapses runs of whitespace to a single space, which browsers render the same way. Content inside <pre>, <textarea>, <script> and <style> is preserved, because whitespace matters there. A single space is kept between inline elements so words do not run together.
• JavaScript: uses Terser, which parses the code into a syntax tree, applies safe optimisations, optionally shortens local names and prints the smallest equivalent code. The code is parsed, never executed.

Limitations to keep in mind

• The HTML minifier does not rewrite attributes or remove optional tags, which keeps it safe but means more aggressive tools can save a little more.
• Code that relies on Function.prototype.toString or variable names at runtime may break when names are shortened; untick that option for such code.
• Terser is about 1 MB and is downloaded from this site only the first time you minify JavaScript.
• Always test minified code before deploying it.

How your data is handled

Your code is minified in your browser. Nothing is uploaded, and Terser is served from this website rather than a third-party CDN.

Frequently asked questions