CSS, JavaScript & HTML Minifier — Smaller, Faster Code

What is a Code Minifier?

A Code Minifier (कोड मिनिफ़ायर) makes CSS, JavaScript and HTML files smaller without changing what they do. Code written for humans is full of things browsers don't need: comments explaining decisions, indentation, blank lines, long descriptive variable names and optional semicolons. Every one of those characters must be downloaded by every visitor. Minification strips them out, so pages download and parse faster — which helps visitors on slow mobile data, improves Core Web Vitals and can support better search rankings.

This free tool minifies all three web languages in one place. CSS and HTML are minified instantly by our own careful minifiers, which protect strings, url() values, calc() expressions and whitespace-sensitive elements. JavaScript is minified by Terser, the same engine used by popular build tools, with optional variable-name mangling. You see the original size, the minified size and the percentage saved, and you can download the result — all without uploading your code anywhere.

Key Features

• Three languages — CSS, JavaScript and HTML.
• Terser for JavaScript — compression, dead-code removal and optional mangling.
• Safe CSS minification — strings, unquoted url() values and calc() never broken.
• Conservative HTML minification — pre, textarea, script and style content untouched.
• Licence comments kept — /*! … */ notices preserved by default.
• Inline CSS — optionally minify <style> blocks inside HTML.
• Savings report in bytes and percent.
• Open, copy and download .min files.

How to Minify Code — Step by Step

1. Choose the language tab.
2. Paste your code or click Open file. A sample is loaded so you can see how it works.
3. Set options — keep licence comments, mangle names (JS), minify inline styles (HTML).
4. Press Minify (CSS and HTML also update automatically as you type).
5. Check the savings and the message for any errors.
6. Copy or download the minified file.

Worked Example

The sample stylesheet on this page is 333 bytes with a licence comment, a regular comment, indentation and spaces around colons and braces. Minified, it becomes 248 bytes — about 25.5% smaller:

/*! Theme v1 | MIT */ .card{margin:0 auto;padding:16px 24px;width:calc(100% - 2rem);background:url("img/bg one.png") no-repeat}.card>h2,.card .title:hover{color:#1B98E0;font-family:"Open Sans",sans-serif}@media (max-width:600px){.card{padding:8px}}

Notice what was kept: the licence comment, the spaces inside calc(), the space inside the quoted file name, the space in “.card .title” (which means “a .title inside .card”) and the space after “@media”. The sample HTML shrinks by about 28% while the <pre> block keeps its exact spacing.

How CSS Minification Works Here

• Comments are removed, except /*! licence comments if you keep them.
• Strings in quotes and unquoted url() values are copied exactly.
• Whitespace runs collapse, and spaces around { } ; , and > are removed.
• Spaces before colons are removed inside declarations but kept in selectors, because “a :hover” and “a:hover” mean different things.
• The last semicolon before a closing brace is removed.
• Spaces next to + and - are never touched, so calc(), sibling selectors and negative values stay valid.

The minifier does not rewrite colours, shorten zeros or merge rules — optimisations that save a little more but carry more risk. For aggressive optimisation in a build pipeline, tools like cssnano or Lightning CSS go further.

JavaScript Minification with Terser

Terser parses your JavaScript into a syntax tree, applies safe transformations — removing dead code, folding constants, shortening expressions — and prints it back without unnecessary whitespace. With mangle on, local variable and function names like monthlyRate become single letters. Global names and object properties are left alone, because changing them could break code elsewhere. The sample EMI function becomes a single short line that calculates exactly the same result. If your code has a syntax error, Terser reports the line and column so you can fix it.

HTML Minification Without Surprises

HTML whitespace is sometimes meaningful: two links separated by a space look different from two links touching each other, and anything inside <pre> or <textarea> is displayed exactly. This minifier therefore removes comments (but keeps old Internet Explorer conditional comments), collapses runs of whitespace into single spaces, removes whitespace between block-level tags, and restores a single space between common inline elements. Scripts and styles are protected; inline <style> blocks can optionally be minified with the CSS minifier.

Minification, Compression and Page Speed

Minification and server compression (gzip or Brotli) complement each other. A typical stylesheet might shrink 25% from minification and then another 70–80% during compressed transfer. Together with caching, image optimisation (try our Image Compressor) and fewer render-blocking resources, minified assets help pages reach good Largest Contentful Paint scores. Tools like Google PageSpeed Insights flag unminified CSS and JavaScript as an opportunity — this minifier is a quick way to fix that for small sites without a build system.

A Simple Workflow for Small Websites

1. Keep your editable files as style.css and script.js in a source folder.
2. When you are ready to publish, minify each one here and save as style.min.css and script.min.js.
3. Reference the .min files in your HTML, adding a version number such as ?v=20261018 so browsers fetch the new copy.
4. Upload the minified files and test the live page on desktop and mobile.
5. Next time you change something, edit the source file and repeat — never edit the .min file directly.

When a project grows beyond a handful of files, automate these steps with a build tool such as Vite, esbuild or webpack, which run Terser and CSS minifiers for you on every build.

Debugging Minified Code

Minified code is hard to read, so errors in production often point to “line 1, column 4,312”. Build tools solve this with source maps, files that map minified positions back to your original code; browsers' developer tools load them automatically. This online minifier does not produce source maps, which is another reason to keep your original files: if something breaks, reproduce the problem with the unminified version first, fix it there, then minify again.

Common Uses

• Minifying stylesheets and scripts for small static websites.
• Shrinking code before uploading to shared hosting such as Hostinger.
• Reducing the size of HTML email templates, where some clients clip very large messages.
• Preparing snippets for widgets, bookmarklets and embeds.
• Checking how much a build step would save.
• Fixing PageSpeed “minify CSS / JavaScript” warnings.
• Trimming inline scripts and styles in landing pages built by hand.

Common Mistakes to Avoid

• Overwriting the original — keep readable source files and save minified copies separately.
• Forgetting to update links — point your pages to style.min.css and script.min.js.
• Mangling code that uses names at runtime (for example function.name or some frameworks' dependency injection).
• Not bumping cache versions — browsers may keep the old file; add a version query like ?v=2.
• Skipping testing after minification.

Troubleshooting

• JavaScript error with line and column — fix the syntax error in your source, then minify again.
• “Could not load the JavaScript minifier” — the first JS minification needs internet to fetch Terser.
• Layout looks different after HTML minification — a space between inline elements may matter; add &nbsp; or adjust the source.
• Very small saving — the code was probably already compact or minified.
• Licence comment missing — make sure “Keep /*! licence */ comments” is ticked and the comment starts with /*!.
• Output empty — paste some code first; the message explains any problem found.

Quick Glossary

• Minification: removing characters not needed for execution.
• Mangling: renaming local variables to shorter names.
• Dead code: code that can never run, safe to remove.
• Source map: a file mapping minified code back to the original for debugging.
• gzip / Brotli: server-side compression applied during transfer.
• Render-blocking resource: CSS or JS that delays the first paint of a page.
• Beautifier / formatter: the opposite of a minifier — adds indentation back for readability.
• Cache busting: changing a file name or version query so browsers download the updated file.

Why Use This Minifier?

It handles CSS, JavaScript and HTML in one place, uses a proven engine for JavaScript, protects the tricky parts of CSS and HTML, shows real savings and keeps your code private — free and without sign-up.

CSS / JS / HTML Minifier — Key Facts

Frequently Asked Questions

Explore More Prompt Minds Tools

CSS / JS / HTML Minifier works great alongside our other free tools. Every Prompt Minds tool runs entirely in your browser — no sign-up, no uploads, no watermarks. Browse all free tools.