UFOZoo

Code Minifier — Minify HTML, CSS & JavaScript Online

Compress and optimize HTML, CSS, and JavaScript by removing whitespace and comments. Reduce file size and improve page load speed. 100% client-side processing.

Features

  • Minify HTML, CSS, and JavaScript in one unified tool — no need to switch between different sites
  • Automatic language detection — paste any code and the tool identifies HTML, CSS, or JS automatically
  • Remove comments (HTML <!-- -->, JS // and /* */, CSS /* */) to strip unnecessary bytes
  • Collapse whitespace — eliminate extra spaces, tabs, and line breaks for compact output
  • Real-time size comparison with original vs minified size and compression ratio percentage
  • One-click copy to clipboard and save as .html, .min.js, or .min.css file
  • Detailed statistics including bytes saved, compression ratio, and character count
  • Support for large files with browser-native processing — no file size limits
  • 100% client-side processing — your source code never leaves your browser
  • Dark mode compatible with clean, minimal interface optimized for developer workflow

How to Use

  1. 1Select your language tab — HTML, JavaScript, or CSS — or paste code and let auto-detect choose for you
  2. 2Paste or type your code into the input editor. You can also load an example using the sample buttons above the editor
  3. 3Configure minification options: toggle Remove Comments and Collapse Whitespace on or off
  4. 4Your code is minified automatically as you type — the output panel updates instantly with size statistics
  5. 5Copy the minified output to your clipboard with one click, or save it as a file using the Save button
  6. 6Check the Size Comparison section to see original vs minified size and the exact compression ratio achieved
  7. 7Toggle Remove Comments on if your code has many explanatory comments that aren't needed in production
  8. 8Toggle Collapse Whitespace off if preserving some formatting in the minified output is important for debugging
  9. 9Use the sample buttons (HTML, JS, CSS) to quickly test how minification affects different code types

Frequently Asked Questions

What is code minification?

Code minification is the process of removing unnecessary characters from source code without changing its functionality. This includes stripping whitespace, comments, and redundant syntax. Minified code is smaller, loads faster over the network, and improves website performance metrics like Core Web Vitals.

Is my code sent to a server?

No. All minification happens entirely in your browser using JavaScript. Your code never leaves your device, is never transmitted over the network, and is never stored anywhere. You can even disconnect from the internet after the page loads and it will still work.

What's the difference between HTML, JS, and CSS minification?

HTML minification removes comments, collapses whitespace between tags, and can optionally remove optional end tags. JS minification strips comments and unnecessary whitespace while preserving string literals and regex patterns. CSS minification removes comments, collapses whitespace, and tightens spacing around braces, colons, semicolons, and commas.

Will minification break my code?

This tool uses conservative regex-based minification that is safe for most code. It preserves string contents, template literals, and regex patterns in JavaScript. However, for production builds we recommend using dedicated tools like Terser (JS), cssnano (CSS), or html-minifier-terser (HTML) for more thorough and AST-aware optimization.

Does minification preserve inline CSS and JS inside HTML?

This tool processes each language independently. If you paste HTML, only the HTML is minified — inline CSS in <style> tags and JS in <script> tags are preserved as-is. For full optimization of inline code, minify each language separately.

How much size reduction can I expect?

Typical reduction ranges from 20-50% depending on the code. HTML with lots of comments and whitespace can see 30-40% reduction. JavaScript and CSS typically see 25-50% reduction. The exact savings depend on how verbose the original code is and which options you enable.

Can I reverse minified code back to readable form?

No, this tool does not include a beautify/unminify feature. Minification is a lossy process — whitespace and comments are removed permanently. To restore readability, use a dedicated code formatter or beautifier tool for your specific language.

Is there a file size limit?

The practical limit depends on your device's available memory. Most files under 5-10 MB work smoothly in modern browsers. Extremely large files may cause sluggishness. For those cases, use command-line tools like Terser, cssnano, or html-minifier-terser instead.

Is the minified code still valid?

Yes. This tool uses conservative regex-based minification that preserves code functionality. HTML structure (tags, attributes, content), JavaScript syntax (strings, regex, operators), and CSS rules are all maintained. The only changes are: whitespace removal, comment stripping, and optional byte-saving transforms that don't alter behavior.

What should I do after minifying my code?

After minification: (1) Copy the minified output to your build/production directory. (2) For JavaScript, rename to .min.js; for CSS, rename to .min.css. (3) Update your HTML references to point to the minified files. (4) Test the minified code in your target browsers to ensure no edge case issues. (5) Consider integrating minification into your build pipeline with Webpack, Vite, or Gulp.

Does minification work on frameworks like React or Vue?

This tool works on the raw output — HTML, CSS, and JS files. For React/Vue/Angular apps, minify the final build output (the bundled JS/CSS files). Most modern frameworks already include minification in their production build step. Use this tool for additional optimization on static HTML files, legacy code, or small scripts outside your main build pipeline.

Related Tools