OneStopWebTools

Developer Tools

How to Minify CSS, JavaScript and HTML

Code written for humans contains indentation, comments and long names. Browsers do not need any of that. Minification removes it so files download faster — often with a noticeable saving on larger scripts and stylesheets.

Updated · 2 min read

What minification does

  • Removes comments, line breaks and unnecessary spaces.
  • In CSS, shortens values where safe, such as dropping the last semicolon in a rule.
  • In JavaScript, can shorten local variable names and simplify expressions.
  • Keeps whitespace that matters, such as inside <pre> elements and between inline words in HTML.

The result does exactly the same thing; it is just smaller and harder to read.

Minify step by step

  1. Open the HTML, CSS and JavaScript Minifier and choose the HTML, CSS or JavaScript tab.
  2. Paste your code. For HTML, decide whether inline styles should be minified too.
  3. For JavaScript, choose whether local variable names may be shortened and whether to remove console calls.
  4. Select Minify. If the code has a syntax error, the error is reported instead of producing broken output.
  5. Check the before-and-after size, then copy or download the result.

JavaScript is minified with Terser, a widely used open-source minifier, which runs in your browser.

Minification vs compression

Minification and server compression (gzip or Brotli) work together. Minification removes characters; compression then encodes what is left more efficiently during transfer. Most hosts, including typical shared hosting, enable compression automatically, but minifying first still reduces the final size. Neither replaces the biggest win on most sites: smaller images, which the Image Compressor handles.

A safe workflow

  1. Keep the original. Always edit the readable version and minify a copy. Name the copy clearly, such as style.min.css.
  2. Test before deploying. Load the page with the minified files and check that everything works.
  3. Watch out for name-dependent code. Code that relies on function or variable names at runtime may break when names are shortened; untick that option for such code.
  4. Clear caches after uploading, so visitors get the new files.

If you use a build tool such as Vite or webpack, or a WordPress caching plugin, minification may already happen automatically.

Frequently asked questions

Does minification help SEO?

Indirectly. Smaller files can improve loading speed, which affects user experience and Core Web Vitals. The gain is usually smaller than optimising images.

Can minified code be reversed?

It can be reformatted to be readable again, but removed comments and original variable names cannot be recovered. That is why you keep the original.

All guides