HTML / CSS / JS 压缩工具
压缩HTML、CSS和JavaScript以减小文件大小——完全在浏览器中运行。
关于此工具
减小HTML、CSS和JavaScript文件的大小，加快页面加载速度。切换三个标签，粘贴代码，即时查看压缩后的输出以及原始大小、压缩后大小和缩减百分比。HTML压缩去除注释并折叠空白；CSS删除注释和空白；JS去除单行和块注释并折叠空白。
使用方法
- 1 选择HTML、CSS或JS标签。
- 2 将源代码粘贴到输入框中。
- 3 压缩后的输出和大小缩减会自动显示。
- 4 点击"复制输出"复制压缩后的代码。
Why minifying HTML, CSS, and JavaScript speeds up a page
Every byte your server sends has to travel the network and be parsed by the browser. Source code is written for humans — it is full of indentation, line breaks, blank lines, and explanatory comments that the browser does not need to do its job. Minification strips out everything that exists purely for readability, leaving functionally identical code that is smaller and downloads faster. On a high-traffic page, shaving even 20–30% off a stylesheet or script measurably improves load time, and smaller files compress better when the server applies gzip or Brotli on top.
This tool has three tabs — HTML, CSS, and JS — because each language has different rules about which characters are safe to remove. It shows the original size, the minified size, and the percentage reduction so you can see exactly what you saved.
What each mode removes
| Mode | Removes |
|---|---|
| HTML | Comments (except conditional [if] blocks), runs of whitespace, and spaces between tags |
| CSS | /* comments */, extra whitespace, spaces around { } : ; , selectors, and the last semicolon before } |
| JS | Block /* */ and line // comments, blank lines, and collapsed whitespace |
For HTML, the tool keeps conditional comments such as <!--[if IE]> intact because those are instructions to certain browsers, not human notes. For CSS, collapsing the space in color : red ; down to color:red is always safe. The JS minifier is a conservative whitespace-and-comment pass: it does not rename variables or restructure code, so it never changes behaviour.
A worked example
Paste this CSS into the CSS tab:
/* heading */h1 { color: navy; margin: 0;}
The minifier deletes the comment, collapses the indentation and newlines, removes the spaces around the braces and colons, and drops the final semicolon, producing h1{color:navy;margin:0}. The original is around 55 bytes; the output is about 25 — a reduction of more than half, reported live in the stats row.
Important limits to understand
This minifier works by pattern-matching whitespace and comments, which is fast and safe for well-formed, conventional code. It is not a full parser, so there are edge cases to respect:
- JavaScript without semicolons. Because the JS pass collapses newlines into spaces, code that relies on automatic semicolon insertion across line breaks could change meaning. Use explicit semicolons, or run code through a parser-based minifier (like Terser) for production bundles.
- Strings and regexes. A comment-like sequence inside a string (for example a URL containing
//) is an edge case for any regex-based minifier. Review the output of code that embeds such patterns. - HTML whitespace that matters. Inside
<pre>,<textarea>, or where you rely on a single space between inline elements, aggressive whitespace collapsing can shift layout. Check pages that depend on significant whitespace.
Best practices
- Keep a readable source. Always minify a copy. Edit the formatted original and re-minify; never hand-edit minified output.
- Minify, then compress. Minification and gzip/Brotli stack. Minified code compresses to an even smaller transfer size.
- Measure with the stats. If a file barely shrinks, it was probably already minified — running it again wastes effort.
- Test after minifying. Load the page or run the script once with the minified version before shipping it.
Use cases and privacy
Developers minify before deploying static assets, embedding inline styles in an email template, or pasting a snippet where size is constrained. It is handy for quick one-off files where setting up a full build pipeline is overkill. All three minifiers run entirely in your browser — your code is never uploaded to a server — so even proprietary markup or scripts stay on your own machine while you measure the savings.