How to Minify CSS and JavaScript Online

Use this guide when you need to minify CSS online, minify JavaScript online, or quickly understand what minification changes before reaching for a build tool.

The scenario

You are shipping a static page or a small widget. The CSS and JavaScript files are readable, but the browser is downloading more bytes than the actual code needs. You want to keep the readable source and ship a smaller copy to production.

A CSS minifier and a JavaScript minifier rewrite the file to produce the same result with fewer bytes. The goal is a faster first paint and a smaller transfer over the network, without changing how the page behaves.

What does minify mean?

Minify means rewriting source code so it produces the same result with fewer bytes. The transformation is mechanical: a minifier removes whitespace and comments, collapses repeated structures, and shortens local names where it is safe to do so. The language remains valid CSS or JavaScript, so the browser parses it directly.

Minification is not the same as compiling, bundling, or compressing. It is a text-to-text transformation that keeps the file as the same language.

How CSS minification works

A CSS minifier focuses on whitespace, comments, and a handful of safe textual rewrites:

• Removes /* comments */ that are not license banners.
• Collapses runs of spaces and removes newlines between tokens.
• Drops the last semicolon in a rule block.
• Trims spaces around {, }, :, and ;.

Here is a small before-and-after example.

/* button base */
.btn {
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
}

After minification:

.btn{color:#ffffff;padding:10px 16px;border-radius:6px}

The selectors, properties, and values stay the same. Only whitespace and comments are removed.

How JavaScript minification works

JavaScript minifiers do the same whitespace and comment work, then add a few safe rewrites that depend on the language:

• Strip comments and unnecessary whitespace.
• Drop optional semicolons and braces only when grammar still parses unambiguously.
• Shorten local variable and parameter names that are not exported.
• Collapse simple constants such as true into !0 if the tool supports it.

Light example:

// utility
function greet(name) {
  const message = "Hello, " + name;
  return message;
}

After light minification:

function greet(n){return"Hello, "+n}

For larger codebases, dedicated tools such as Terser perform deeper passes. The general rule is the same: the output still runs in the browser without any extra step.

Try it in DevTools Box

The Code Minifier on DevTools Box runs in your browser. Paste a snippet, pick CSS or JavaScript, and copy the result. Nothing is uploaded; the transformation happens locally.

Open Code Minifier →

Minify vs gzip vs bundle vs obfuscate

These terms are often mixed up. They solve different problems and can be combined.

Minify

Edits the source text. The file remains valid CSS or JavaScript and is smaller on disk.

Gzip and Brotli

Compress the bytes during transfer. The server sends a compressed stream and the browser decompresses it before parsing. Gzip works on top of minified files and shrinks them further. Most static hosts enable this by default.

Bundle

Combines many source files into one or a few output files. Bundlers such as esbuild, Rollup, Vite, and webpack also run a minifier as part of their production build.

Obfuscate

Goes beyond minification by rewriting the code to be hard to read or reverse-engineer. Obfuscation usually increases file size and can hurt performance. It is a separate concern from shipping smaller files.

When to minify

• Production builds of websites, landing pages, and embeds.
• Sharable code snippets where a smaller copy is easier to paste.
• Inline <style> or <script> blocks where every byte counts.

Keep the readable version checked into source control and minify on the way out. Most build tools already do this when you run a production build command.

Common pitfalls

Minifying invalid input

A minifier expects valid CSS or JavaScript. If the source has a syntax error, the minifier may produce incorrect output or refuse to run. Format and validate the source first.

Removing license banners

Open source libraries often include a license comment that must be preserved. Heavier minifiers can keep banners that start with /*! or include a license marker.

Touching third-party code

If you minify a file that is already minified, you usually do not save any bytes and you may break source maps. Skip files that ship pre-minified.

Losing the readable source

Never replace the readable source with the minified output. Keep both, and rebuild the minified copy from the source whenever it changes.

FAQ