CSS and JS Minifier
CSS and JS minifier: minify CSS and JavaScript in your browser and see the exact bytes and percent you saved. Free, no sign-up, and it runs in your browser.
Dedicated page: /en/css-js-minifier
Quick answer
A CSS and JS minifier removes whitespace, comments and unnecessary characters from your code to shrink file size without changing what the code does. Smaller stylesheets and scripts download and parse faster, which improves page speed and Core Web Vitals scores.
About this CSS and JS Minifier
CSS and JS minifier: minify CSS and JavaScript in your browser and see the exact bytes and percent you saved. It is one of the Developer Tools on ToolUstad, and like every tool here it runs entirely in your browser: nothing you type, paste or open is uploaded to a server, and there is no sign-up or usage limit.
What is minification?
Minification is the process of removing everything a browser does not need from CSS and JavaScript files: comments, indentation, line breaks and redundant characters, and in JavaScript sometimes shortening local variable names. The code behaves identically but the file can shrink by 20 to 60 percent. This tool minifies safely in your browser and reports exactly how many bytes and what percentage you saved.
Minification vs other optimisations
| Technique | What it does | Reversible? |
|---|---|---|
| Minification | Removes whitespace and comments | Effectively one way; keep your source |
| Gzip / Brotli compression | Compresses the file for transfer | Yes, decoded by the browser |
| Uglification / mangling | Also renames variables to single letters | One way; can break eval-style code |
| Tree shaking | Removes unused code entirely | Build time decision |
When and why to minify
- Launching a static site: hand written CSS and JS usually ship unminified by default.
- Improving PageSpeed scores: smaller files help Largest Contentful Paint and total blocking time.
- Email and embedded widgets: inline CSS in HTML emails benefits from every saved byte.
- Quick one off jobs: a single file that does not justify setting up a build pipeline.
Best practices
- Always keep the unminified source: minified code is for delivery, not editing.
- Combine minification with Brotli or gzip on the server for the full saving.
- Test the minified file once in a browser, especially JavaScript with automatic semicolon insertion edge cases.
- Use source maps in production if you need to debug the minified output.
Common mistakes to avoid
- Minifying a file that contains a syntax error and shipping broken code.
- Removing licence comments that legally must stay with the code.
- Expecting minification to fix slow code: it shrinks download size, not execution cost.
- Editing the minified file directly and losing the change next build.
Who is the minifier for?
Front end developers, site owners on static hosting like Cloudflare Pages, email developers and anyone fixing a PageSpeed warning without a build setup. Full pipelines with esbuild, Terser or Lightning CSS do more, but installing one to shrink a single stylesheet is like buying a factory to make one sandwich.
Where minification fits in a modern pipeline
On a build based site, tools like esbuild, Terser or Lightning CSS minify automatically, and you should let them. This page based minifier earns its place everywhere a pipeline does not reach: the hand maintained marketing site, the WordPress child theme file edited over SFTP, the email template built in a text editor, the one landing page on Cloudflare Pages that needs to pass a PageSpeed audit today. In all of those, the workflow is the same: paste the source, copy the minified output, keep the original somewhere safe, and check the byte saving, which the tool reports so you can prove the improvement rather than assume it.
Learn: how to use the CSS and JS Minifier
- Pick CSS or JavaScript.
- Paste your code (or load the sample) and the minified output and size stats appear. Click Minify any time to refresh.
- Copy the minified code or download it as a .min file.
Features
- Real token-based JavaScript minifier: comments removed, strings and regex literals untouched
- CSS minifier that strips comments and needless whitespace and semicolons
- Before and after sizes, bytes removed and saved percentage
- Sample code for both languages, copy and download
Worked example
The CSS sample shrinks from 216 bytes to 118 bytes, a saving of about 45%. The JavaScript sample keeps its regex /\s+/g and its division 10 / 2 intact, which naive minifiers often break.
Frequently asked questions
Is the minified JavaScript safe to ship?
The minifier only removes comments and unneeded whitespace; it never renames variables or rewrites logic, and it protects strings, template literals and regexes. Still, test minified output before deploying, as with any minifier.
Why not rename variables for more savings?
Renaming (mangling) can break code that relies on names, such as inline handlers and some libraries. Whitespace-only minification is the safe default for a paste-in tool.
Does minifying CSS change how it looks?
No. Only comments, extra spaces and the final semicolon in each rule are removed. Selector order and values are unchanged.
Is my code uploaded?
No. Minification runs entirely in your browser.
Is minified code safe to use in production?
Yes, minification is a standard, behaviour preserving step used by virtually every production website. This tool uses conservative transforms. As with any deployment, load the page once afterwards to confirm everything works.
How much smaller will my files get?
Typical savings are 20 to 40 percent for CSS and 25 to 60 percent for JavaScript, depending on how much commenting and indentation the source has. The tool shows your exact before and after byte counts.
What is the difference between minify and compress?
Minification edits the code itself to remove unneeded characters. Compression (gzip or Brotli) encodes the whole file for transfer and the browser decodes it. They stack: minify first, then compress, for the smallest download.
Will minifying break my JavaScript?
A conservative minifier, like this one, removes comments and whitespace only where the grammar makes that safe, and production code worldwide is minified this way every day. The risky cases are known: code that relies on automatic semicolon insertion in unusual places, or comment style hacks from the early web. The safe workflow is simple: minify, load the page once, and keep the original file as your editable source.
Related tools
More Developer Tools like this one, plus two picks from other categories. Each opens its own dedicated page.