HTML, CSS & JavaScript Minifier
Strip the comments and whitespace, keep the behaviour — with an honest note about the limits.
What the hTML, CSS & JS Minifier does
Minification removes the characters a computer does not need — comments, indentation, line breaks and the spaces around punctuation — without changing what the code does. On a typical stylesheet that is a 25–40% reduction before any compression is applied, and since smaller files download faster and parse sooner, it is one of the cheapest performance wins available.
This minifier is deliberately conservative, and it is worth understanding why. A production
minifier such as Terser or cssnano builds a full syntax tree, which lets it rename local variables,
drop unreachable code and reorder declarations safely. Doing that in a page like this would mean
shipping a large parser to every visitor. Instead, this tool tokenises the input just enough to tell
code from strings and comments — so a /* inside a string is never mistaken for a
comment — and then applies whitespace rules within that.
The consequence is that CSS minification here is close to what a dedicated tool achieves, HTML minification is straightforward, and JavaScript minification is limited to comment removal and whitespace collapsing. It will not shorten your variable names or remove dead code. It is the right tool for a small inline script or a stylesheet you are pasting into a template, and the wrong tool for a large application bundle, which belongs in a real build pipeline.
Two safety notes. Licence comments beginning /*! are preserved by default, because
many libraries require attribution to survive minification. And the output should always be tested
before deployment — that is true of every minifier, not just this one.
How to use it
- Choose the language: CSS, JavaScript or HTML.
- Paste your source into the left box.
- Press Minify and check the saving.
- Test the output in your project before deploying it — then copy or download it.
A worked example
A commented, generously spaced CSS component:
/* Card component
Used on the homepage and category hubs. */
.card {
background : #131820;
border : 1px solid #1e2732; /* subtle edge */
border-radius : 14px;
}minifies to a single line:
.card{background:#131820;border:1px solid #1e2732;border-radius:14px}That is 178 bytes down to 68 — a 62% saving, because the source was heavily commented and aligned. A more typical stylesheet saves 25–35%. Note that the final semicolon before the closing brace is dropped, which is valid CSS, and that the comment inside the rule is removed along with the block comment above it.
Frequently asked questions
Will minifying break my code?
It should not, but always test. The riskiest input is JavaScript relying on automatic semicolon insertion across lines, which any whitespace-based minifier can disturb. This tool keeps JavaScript line breaks precisely to reduce that risk, but a proper build tool is safer for anything substantial.
Why does it save less on JavaScript than on CSS?
Because it does not rename variables or remove dead code — that needs a full parser and would mean shipping a large library to every visitor. Terser and esbuild in your build pipeline will do considerably better on JavaScript.
Should I minify if my server already uses gzip or Brotli?
Yes, though the gain is smaller than it looks. Compression handles repetition well, so minified-plus-compressed is typically only a few percent smaller than compressed alone. The real benefit is a smaller file for the browser to parse, which matters on low-powered devices.
Does it keep licence comments?
Yes, when Keep /*! */ licence comments is ticked — the convention every minifier follows. Many open-source licences require the attribution notice to survive minification, so leaving this on is usually the correct choice.