HTML, CSS & JavaScript Minifier

Every space, line break and comment in your code is sent to every visitor, even though browsers do not need them. Our free tool lets you minify CSS, HTML, JSON and JavaScript in one place. The CSS minifier strips comments and collapses whitespace without touching strings, url() values or calc() spacing. The HTML minifier removes comments and extra whitespace while leaving pre, textarea, script and style content alone. JSON loses its whitespace and, optionally, its comments, and JavaScript is compressed with the open-source Terser library. You see the original and minified sizes, the percentage saved and an estimated gzip size, and your code never leaves your browser.

How to use the Code minifier

1. 1 Choose a tabSelect HTML, CSS, JSON or JavaScript. Each tab uses rules designed for that language, so pick the one that matches the code you are pasting.
2. 2 Paste your codePaste a stylesheet, a page, a configuration file or a script into the input box. For JavaScript, any syntax error is reported with its line and column.
3. 3 Set the optionsDecide whether to keep licence comments, strip JSONC comments, minify inline style blocks in HTML, or compress and mangle names in JavaScript.
4. 4 Compare the sizesCheck the original size, the minified size, the percentage saved and the estimated gzip size, which is closer to what visitors actually download.
5. 5 Copy and testCopy the minified output into your project or build, then load the page and check that layout and scripts still work before you deploy.

What minification does and does not do

Minification removes characters that make code readable to people but mean nothing to a browser: comments, indentation, line breaks and repeated spaces. Done properly, the minified file behaves exactly like the original, it is simply smaller. For CSS, HTML and JSON this is mostly a matter of removing whitespace and comments safely. For JavaScript a dedicated tool can go further, shortening local variable names and rewriting expressions into more compact forms that do the same thing.

Minification is not the same as compression, obfuscation or optimisation of what the code does. It will not remove unused CSS rules, merge duplicate selectors across files, or make a slow script faster. It is one small step in making a page lighter, alongside compressing images, loading fewer third-party scripts and caching files properly. Keep your readable source files as the master copy and treat minified files as output you can regenerate at any time.

How each language is minified

Each tab follows rules chosen to avoid changing behaviour. Whitespace is significant in some places, such as inside strings, inside a pre element or between two words, so a good minifier has to know where it can safely remove characters and where it must leave them alone.

• CSS: comments are removed, with an option to keep licence comments that start with a slash, an asterisk and an exclamation mark. Whitespace runs are collapsed, the final semicolon in each block is dropped, and strings, url() values and the spaces around plus and minus signs inside calc() are left exactly as written, because calc() needs them.
• JSON: whitespace outside strings is removed, and you can optionally strip line comments and block comments so that JSONC files, such as some editor and tool configurations, become strict JSON. Numbers are kept exactly as written, so values such as 1.50 or very long integers are not rounded or reformatted.
• HTML: comments are removed except Internet Explorer conditional comments, which older templates still rely on. Runs of whitespace collapse to a single space and whitespace between block-level tags is removed. The content of pre, textarea, script and style elements is left untouched, with an option to minify inline style blocks using the CSS rules.
• JavaScript: code is processed by Terser, a widely used open-source minifier. The compress option rewrites code into shorter equivalent forms, mangle shortens local variable and function names, and licence comments can be kept. If the code cannot be parsed, you see the error with its line and column.

Minification, gzip and Brotli work together

Most web servers and content delivery networks compress text files before sending them, using gzip or the newer Brotli format. Compression is very good at squeezing out repetition, including repeated whitespace, so the difference between a minified and an unminified file is usually smaller after compression than before. That leads some people to think minification is pointless when compression is switched on.

In practice the two combine. Compression cannot remove comments or shorten variable names, and a smaller input generally gives a smaller compressed output. The browser also has to decompress and then parse the full file, so fewer characters means a little less work on the device, which matters most on lower-end phones. That is why the tool shows an estimated gzip size alongside the raw sizes: it is measured in your browser using the built-in CompressionStream feature, and gives a realistic idea of what visitors will download. Your server's settings may differ slightly, and Brotli usually achieves a smaller result than gzip.

If you are unsure whether your site already compresses files, open your browser's developer tools, load the page, and look at the response headers for a CSS or JavaScript file. A content-encoding header of gzip or br shows that compression is active.

Source maps, build tools and WordPress

Minified code is hard to debug, because every error points to line 1 of a very long file. Source maps solve this by linking positions in the minified file back to the original source, so browser developer tools can show you the readable version. Build tools generate source maps automatically. This tool is aimed at quick, one-off jobs, so it does not produce source maps; for a project you maintain, minify as part of your build instead.

If your site has a build process, it probably minifies already. Vite and webpack minify CSS and JavaScript in production builds by default, and frameworks built on them, including Laravel with Vite, do the same. Many WordPress caching and performance plugins include options to minify and combine CSS and JavaScript, and some hosting control panels and content delivery networks offer it too. In those cases, enable the feature in one place only, because minifying files twice adds risk for little benefit.

A manual minifier is most useful for small sites without a build step, for snippets you paste into a CMS or tag manager, for email templates, for checking how much a file could shrink, and for making a JSON payload or configuration file smaller before you send or store it.

Core Web Vitals and real-world gains

It is worth being realistic about speed. On a typical small business site, minifying CSS and HTML might save a few kilobytes after compression, which on its own is unlikely to transform your Core Web Vitals scores. Large images, heavy third-party scripts, slow hosting and too many web fonts usually have a much bigger effect. Google's PageSpeed Insights flags unminified CSS and JavaScript as an opportunity, and it is an easy one to fix, but treat it as part of good housekeeping rather than a cure.

CSS deserves special attention because it is render-blocking: by default the browser will not display the page until it has downloaded and processed the stylesheets in the head. Smaller stylesheets reach the browser sooner, which can help Largest Contentful Paint a little, especially on slow mobile connections. Removing unused CSS and inlining the small amount needed for the first screen often helps more than minification alone.

JavaScript affects responsiveness as well as download time. Terser can noticeably reduce the size of a large script, but the browser still has to run it, so loading less JavaScript, deferring what is not needed straight away and removing unused libraries remain the most effective ways to improve Interaction to Next Paint.

Avoiding breakage and keeping your code private

A careful minifier should never change how your code behaves, but problems can still arise. JavaScript that relies on function or variable names at runtime can break when names are mangled, and code that depends on missing semicolons being inserted automatically can behave differently when lines are joined. HTML that depends on whitespace between inline elements, such as buttons or images placed side by side, may shift slightly when spaces collapse. Always test the minified result in a browser before replacing your live files.

Everything happens in your browser. Your code is not uploaded, logged or stored, which makes the tool suitable for client projects and unreleased work. Remember that minification is not protection: minified code is still readable with a formatter, so never put secrets such as API keys or passwords in front-end CSS, HTML or JavaScript.

Examples you can copy

Before:
/*! Theme v2 | MIT licence */
/* Main button */
.btn {
  padding: 0.75rem 1.5rem;
  width: calc(100% - 2rem);
  background: url("img/arrow.svg") no-repeat;
}

After (licence kept):
/*! Theme v2 | MIT licence */.btn{padding:0.75rem 1.5rem;width:calc(100% - 2rem);background:url("img/arrow.svg") no-repeat}

Before:
{
  // site settings
  "name": "Make It Flow",
  "price": 1.50,
  "tags": ["seo", "tools"]
}

After:
{"name":"Make It Flow","price":1.50,"tags":["seo","tools"]}

Before:
function totalWithVat(net) {
  const vatRate = 0.2;
  return net + net * vatRate;
}

After:
function totalWithVat(t){return t+.2*t}

Common mistakes to avoid

Frequently asked questions