How to Minify HTML, CSS, and JavaScript (And When to Bother)

If you're using Next.js, Vite, Create React App, or any modern framework, your production build is already minified. You don't need to think about this. If you're writing a static HTML page by hand or maintaining a legacy codebase without a build step, minification is a meaningful optimization.

What Minification Does

It removes everything a browser doesn't need to parse the code: whitespace, newlines, comments. For JavaScript, it also renames variables to single characters (a, b, c instead of userAuthentication, requestPayload, responseHandler). The code runs identically — the parser doesn't care about names or spaces. You just can't read it anymore, which is fine for production.

JavaScript: Terser Is the Standard

Terser (the successor to UglifyJS) is what most build tools use under the hood. If you need to run it manually: npx terser input.js -o output.min.js. It handles modern JavaScript including ES2020+ syntax. The output is a valid .min.js file you can serve directly.

CSS: Lightning CSS or cssnano

Lightning CSS (the newer option) is significantly faster than cssnano and handles modern CSS features well. cssnano is more battle-tested and widely used in PostCSS pipelines. Both produce similar output size. If you're using Tailwind CSS, its production build already removes unused classes, which is a more significant size reduction than whitespace removal.

HTML: Usually Not Worth Manual Effort

HTML minification saves less than JS and CSS, and the tools are less mature. For a static site, html-minifier-terser works. For a framework, check whether it's already handled — Next.js minifies HTML in production. The 5–15% savings in HTML is less impactful than JavaScript minification, and the risk of whitespace-sensitive HTML breaking is real in edge cases.