Skip to main content
ilovecalcs logoilovecalcs.

Dev · Live

HTML & CSS Minifier, smaller code, faster pages.

Paste any HTML or CSS, and this tool strips comments, collapses whitespace, and removes redundant characters instantly. See exactly how many bytes you save — everything runs locally in your browser.

Minification guideReal-time
HTML Input
40 lines
935 B
Minified HTML−35.7%
1 line
601 B

Original

935 B

Minified

601 B

Saved

334 B

Reduction

35.7%

What gets removed

Minification strips these from your source code

HTML

  • <!-- HTML comments -->
  • Whitespace between tags
  • Consecutive spaces & tabs
  • Leading / trailing whitespace
  • Empty lines & line breaks

CSS

  • /* CSS comments */
  • Spaces around { } ; : ,
  • Trailing ; before }
  • Whitespace inside ( )
  • Consecutive spaces & newlines

Minification guide

What minification is, why it matters for Core Web Vitals, and how it works.

What is code minification?

Minification is the process of removing all unnecessary characters from source code without changing its functionality. For HTML and CSS, this means stripping comments, collapsing whitespace, removing redundant semicolons, and eliminating newlines — all of which exist to make code readable for humans but are completely ignored by browsers.

The result is a smaller file that transfers over the network faster, parses faster, and consumes less memory during rendering — without altering a single pixel of what the user sees.

Why it matters: Core Web Vitals and page speed

Google's Core Web Vitals — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — are direct ranking signals in Google Search. LCP in particular measures how quickly the largest visible element renders, and it is heavily affected by how fast the browser can download, parse, and apply your CSS.

CSS is render-blocking by default: the browser will not paint anything until all CSS in the <head> has been downloaded and parsed. Every kilobyte you remove from your stylesheet directly reduces render-blocking time. Similarly, reducing HTML size means the initial document arrives faster, the browser can begin layout sooner, and the Time to First Byte (TTFB) overhead decreases when HTML is server-rendered.

Typical minification savings for real-world files:

  • HTML: 10–25% reduction — mostly from whitespace, indentation, and developer comments that accumulate in templated layouts.
  • CSS: 15–35% reduction — comments, aligned property values (padded with spaces), and verbose whitespace between rules contribute the most.

How HTML minification works

This tool applies three transformations to HTML:

  • Comment removal: HTML comments (<!-- ... -->) are stripped entirely. The exception is Internet Explorer conditional comments (<!--[if IE]>), which are preserved since they contain executable logic.
  • Inter-tag whitespace collapse: Any whitespace sequence between a closing tag and an opening tag is removed. This is safe for block elements (div, p, section) and significantly reduces file size in deeply nested HTML templates.
  • Whitespace normalisation: Runs of two or more spaces, tabs, or newlines within text content are collapsed to a single space, matching what the browser would render anyway.

Important caveat: collapsing inter-tag whitespace can affect inline elements. In CSS, display: inline elements separated by whitespace render a small gap (the "inline whitespace node" problem). If your layout relies on this gap for spacing between inline elements like<a>, <span>, or <img>, test carefully after minification. The correct long-term fix is usingdisplay: flex or display: grid instead of inline layout.

How CSS minification works

This tool applies five transformations to CSS:

  • Comment removal: All /* ... */ block comments are stripped, including multi-line comment blocks used as section dividers.
  • Structural whitespace removal: Spaces around the structural characters {}, :, ;, ,,>, ~, and + are removed, which handles most of the savings in hand-formatted CSS where developers vertically align property values.
  • Parenthesis whitespace: Spaces immediately inside( and before ) are removed — common incalc(), rgba(), and media query expressions.
  • Trailing semicolon removal: The final ;before a } is optional in CSS and can be safely removed.
  • Whitespace collapse: Any remaining multi-character whitespace sequences (including newlines) are collapsed to a single space.

Minification vs compression: what's the difference?

Minification and compression (gzip / Brotli) are complementary, not alternatives. Minification is a one-time transformation of the source file that reduces the number of characters before any compression takes place. Compression is then applied by the server at transfer time and reversed by the browser.

Compressing an already-minified file is more effective than compressing unminified code because:

  • Minification removes low-entropy characters (spaces, repeated identical sequences) that compression algorithms can handle but not eliminate as efficiently as direct removal.
  • A smaller pre-compression payload means less memory pressure during decompression on low-end devices.
  • For CDN and edge deployments that cache compressed assets, a smaller uncompressed baseline reduces cache storage costs.

Enable gzip or Brotli on your web server in addition to minifying — these two techniques together typically achieve 70–85% total reduction for CSS files.

Build-tool integration

For production projects, minification should happen automatically as part of your build pipeline rather than manually. Common solutions:

  • Next.js / React: CSS Modules, Tailwind CSS, and imported stylesheets are automatically minified by the built-in SWC and PostCSS pipeline when you run next build. HTML is handled by the framework's server rendering.
  • Vite: Uses esbuild to minify CSS in production builds by default. HTML can be minified with thevite-plugin-minify-html plugin.
  • Webpack: css-minimizer-webpack-plugin(wraps cssnano) handles CSS; html-webpack-plugin includes HTML minification options.
  • Plain projects: html-minifier-terser andcssnano are the most widely used standalone CLI tools.

This online tool is ideal for quick one-off minification, verifying what a minifier will produce, or environments where a build pipeline is not yet set up.