CSS/JS/HTML Minifier
Minify CSS, JavaScript and HTML to reduce file size
How to use CSS/JS/HTML Minifier
Minify CSS, JavaScript and HTML to reduce file size. Removes whitespace and comments. Free online code minifier tool.
Why minify CSS, JavaScript, and HTML?
Minification removes unnecessary characters from code — whitespace, comments, newlines, and redundant syntax — without changing functionality. The result is smaller files that transfer faster over the network.
- Web performance: A 100KB unminified CSS file might become 60KB minified — a 40% reduction. Combined with gzip/Brotli compression, the transfer size drops further. Smaller files mean faster page loads, especially on mobile connections.
- JavaScript production builds: All modern JS bundlers (webpack, Vite, Parcel, esbuild) minify JavaScript as part of the production build. Understanding the output helps debug production issues.
- CSS optimization: Remove comments documenting your CSS before shipping to production. Shorthand property values and remove redundant units (0px → 0).
- Email HTML: Some email clients have size limits for HTML emails. Minifying the HTML reduces the risk of Gmail clipping the message.
- Quick manual optimization: Minify a CSS snippet or inline script before embedding in another file — without setting up a full build pipeline.
Beyond minification: True JavaScript optimization also involves tree-shaking (removing unused code), bundling (combining files), and code splitting (loading only what is needed). Minification alone reduces size by 20-40%; full optimization can reduce 10x.
Frequently Asked Questions
What is the difference between minification and obfuscation?
Minification removes whitespace and shortens names for smaller file size — it is a side effect that the code becomes harder to read. Obfuscation intentionally makes code difficult to understand and reverse-engineer — renaming variables to single characters, adding dead code, and encoding strings. Minification is standard practice; obfuscation is used to protect proprietary logic.
Can minified code be un-minified?
CSS and HTML can be pretty-printed back to readable form since they are fully deterministic. JavaScript minification that renames variables cannot be perfectly reversed — variable names are lost. Source maps (.map files) link minified code back to original source code for debugging in browser DevTools.
What is a source map?
A source map is a JSON file that maps minified/compiled code back to the original source. Browser DevTools use source maps to show original variable names and line numbers when debugging minified code. Include source maps in development; optionally exclude them in production to protect source code.
Does HTML minification affect SEO?
No — search engine crawlers parse the DOM, not the raw HTML bytes. Minified HTML is functionally identical to formatted HTML. Minification only affects file transfer size, not content or structure.
What is tree-shaking?
Tree-shaking removes unused code (dead code elimination) from JavaScript bundles. If you import a library but only use 2 of its 50 functions, tree-shaking removes the other 48 from the bundle. It requires ES modules (import/export syntax) and is performed by bundlers like webpack and Rollup, not by simple minifiers.
Manual minifier vs build tool vs CDN
A manual minifier (this tool) is for quick, one-off optimization of a snippet without build tooling. A build tool (webpack, Vite, Parcel) automates minification as part of every production build — essential for projects with many files. A CDN may serve pre-minified versions of popular libraries (jQuery, Bootstrap, React). For production websites, automated build tools are the standard. This tool is useful for learning, debugging, or optimizing a single file without setting up a build pipeline.