WebBeautify

Strip comments, estimate gzip, measure savings

Optimization next to minify: strip comments, strip extra whitespace, estimate gzip size, SVG optimizer / SVG minify. “Minified” and “small after gzip” are different numbers. Quote both or you start folklore.

Typical stylesheet on the wire24 KB pretty18 KB minified~6 KB gzip
Optimize tools

Why gzip size after minify is the number that matters

Gzip repeats patterns. Minify deletes comments and pretty spaces those patterns were repeating. They stack. A stylesheet might go 24 KB pretty → 18 KB minified → about 6 KB gzipped. A gzip size calculator is a compass (level-6-ish), not your CDN’s invoice. Brotli often wins on HTTPS text; a gzip estimate is answering gzip.

Typical stylesheet on the wire24 KB pretty18 KB minified~6 KB gzip
Pretty CSS 24 KB → minified 18 KB → gzip about 6 KB. The steps stack.

How to strip comments and tidy SVG without wrecking strings

Keep comments in git. Strip them in the copy that goes live — `// TODO: auth` is a gift in a pull request and a leak in a public bundle. A careful JavaScript comment stripper will not treat `"http://x.com"` as a comment; a reckless regex will. SVG optimize removes empty groups and editor `id="Layer_1"`; that is markup hygiene, not PNG compression. Raster images need a different tool.

Tools in this hub

Questions about optimize

If gzip already shrinks files, why minify first?

Gzip repeats patterns. Minify deletes comments and pretty spaces those patterns were repeating. They stack. A 10 KB stylesheet might become ~3 KB on the wire after gzip even before you obsess over one more space.

Is a gzip size estimate exact?

It is directional — like a level-6 style guess, not your CDN’s dictionary or a billing invoice. Use it to settle “is this worth it?” not to invoice a host.

Should I strip comments in git?

Usually no. Keep comments in source. Strip them in the copy that goes live. // TODO: auth is a gift in a pull request and a leak in a public bundle.

SVG optimize versus SVG minify?

Same family. Minify talks to extra markup. Optimize talks to cleanup — empty groups, editor id="Layer_1". Fun fact: those layer names are not pixels. Deleting them does not change the drawing.

Can I optimize a PNG or JPEG here?

Raster compression is a different job (quantization, quality). Image to Base64 encodes; it does not shrink pixels. SVG hygiene is markup. Do not confuse the three.

Does comment stripping respect strings?

A careful JS pass will not treat "http://x.com" as a comment. A reckless regex will. Always read the output. If a URL died, the stripper ate a slash-slash inside a string.

Should I use a generic whitespace stripper on code?

Prefer a language minifier. HTML spaces can be layout. JS newlines next to return can be syntax. Whitespace strip is for prose, logs, and the odd blob that is not a language.

What numbers should I quote in a review?

Raw bytes, minified bytes, then gzip/Brotli bytes. Example: 24 KB → 18 KB → 6 KB. One number without the others is how folklore starts.