CSS Minifier
Compress CSS, HTML, or JavaScript instantly — client-side, nothing is sent to a server.
Why minify your code?
Minification removes whitespace, comments, and redundant syntax from CSS, HTML, and JavaScript without changing behaviour. The result is smaller files that transfer faster over the network. A typical CSS file shrinks by 20–40%, HTML by 10–20%, and JavaScript by 30–60% with variable renaming. Faster transfers improve page load time, reduce bandwidth costs on servers and CDNs, and positively affect Core Web Vitals scores — especially LCP and FID. Minification is a standard step in every production build pipeline alongside bundling and compression (gzip/brotli).
CSS, HTML, and JS — how each is minified
CSS minification (clean-css) collapses whitespace, removes comments, merges shorthand properties, removes redundant units (0px → 0), and applies Level 2 optimisations like merging duplicate selectors. HTML minification (html-minifier-terser) collapses inter-element whitespace, strips HTML comments, removes optional closing tags, and recursively minifies any embedded <style> and <script> blocks using the same CSS and JS engines. JavaScript minification (terser) parses the AST, removes dead code, inlines constants, renames local variables to single letters, and removes unreachable branches — achieving the highest compression ratios of the three.
Before deploying minified code
Always keep your original source files — minified code is nearly impossible to debug or maintain. In production, generate source maps alongside your minified files so browser DevTools can map errors back to the original lines. Most build tools (Vite, webpack, Rollup, esbuild) handle minification and source maps automatically via their production mode. Use this tool for quick one-off checks, to understand how much a file compresses, or to minify standalone snippets. For full projects, integrate minification into your build pipeline rather than minifying manually.