Minifiers Tools
Compress and optimize code for production. Reduce file sizes while maintaining functionality.
Smaller payloads mean faster pages. These minifiers compress JavaScript, CSS, and HTML using the same engines popular build tools use, with options to keep your output readable when you need to debug it.
3 tools availableWhat a minifier may change, and what it must not
A minifier is safe only where the specification says the characters do not matter, and that rule is language-specific. Two of the three languages here have a rule that decides most regressions.
A newline in JavaScript is not always removable
ECMA-262 section 12.10 defines Automatic Semicolon Insertion: when a token is "a restricted token" and it "is separated from the previous token by at least one LineTerminator, then a semicolon is automatically inserted before the restricted token". Compress a file by deleting newlines and two statements can fuse into one expression. That is why a correct JavaScript minifier inserts semicolons instead of only stripping whitespace - and why the only valid test is your suite, run against the minified asset.
HTML whitespace depends on where it sits
The WHATWG HTML standard says that "ASCII whitespace before the html element, at the start of the html element and before the head element, will be dropped when the document is parsed", and that whitespace after the html element "will be parsed as if it were at the end of the body". Outside pre, textarea and the other whitespace-sensitive elements, that is free to remove. Inside them it is content, however tempting the byte count looks.
| Language | Safe to remove | Changes behaviour | Specification |
|---|---|---|---|
| HTML | leading and trailing document whitespace, comments, tags the parser may omit | whitespace inside pre and textarea; tags that cannot be omitted must not be | WHATWG HTML |
| CSS | comments and inter-token whitespace | nothing semantic when the tool is correct - so verify by rendering, not by reading | CSS Syntax Module Level 3 |
| JavaScript | comments, and whitespace that is not load-bearing | a newline that Automatic Semicolon Insertion turns into a semicolon | ECMA-262 section 12.10 |
CSS is the quiet case. The CSS Syntax specification consumes comments during tokenization rather than emitting them as tokens, so removing a comment is a removal and not a rewrite - but a minifier that also touches values, colour shorthands or calc() expressions is doing arithmetic on your behalf. Render the page before and after and compare. Use the JavaScript Minifier, the CSS Minifier and the HTML Minifier to inspect the exact output before it reaches a build pipeline, and ship a source map for anything minified.
Sources: ECMA-262, section 12.10 Automatic Semicolon Insertion; WHATWG HTML Standard, syntax; CSS Syntax Module Level 3.