How to Minify JavaScript, CSS, and JSON (Free, No Build Step)

Minification is one of those things everyone knows they should do
before shipping to production, but reaching for a full build pipeline
just to shrink one file is overkill. Here's what minification actually
does, and a quick way to do it without setting up tooling.

What minification actually removes

Minifying JS, CSS, or JSON strips out everything that doesn't affect
how the code runs:

Whitespace and indentation
Line breaks
Comments
Sometimes: shortening variable names (depending on the minifier)

It does not rename things to make code unreadable — that's
obfuscation, a different (and often unnecessary) step.

Example: before and after

\css /* Primary button style */ .button { background-color: #1a73e8; padding: 12px 24px; border-radius: 6px; } \\

becomes:

\css .button{background-color:#1a73e8;padding:12px 24px;border-radius:6px} \\

Same rendering, smaller payload. Multiply that across every CSS and
JS file on a page and the savings add up, especially on mobile
connections.

When you don't want a full build pipeline

If you're working on a small script, a one-off snippet, or you just
want to shrink a JSON payload before sending it somewhere with a size
limit, spinning up webpack or a CLI minifier is a lot of setup for a
small task. For that, I built a browser-based
JS, CSS & JSON Minifier —
paste code in, get minified output back, nothing leaves your browser.

JSON minification specifically

This one's less talked about but genuinely useful: if you're storing
JSON in a URL query parameter, a database TEXT column with a size cap,
or a config value with strict limits, minifying it (stripping
whitespace between keys/values) can meaningfully reduce size without
changing the data at all.