Guide

How to Minify HTML and CSS (and Why It Helps)

Learn what minification does, how much it saves, and how to minify code safely for production.

A minifier strips comments, whitespace, and line breaks from HTML or CSS to reduce file size. Smaller files download faster, which improves page load time and Core Web Vitals.

What minification does

Minification removes characters that the browser does not need: comments, redundant whitespace, and line breaks. It may also shorten colours (#ffffff → #fff) and collapse redundant CSS. The code behaves identically — only the bytes shrink. Gzip then compresses the result further on top.

How much it saves

Minification typically cuts HTML and CSS file size by 20–60% depending on how much whitespace and commenting the source had. Combined with gzip, the wire savings are larger still. For a CSS file with lots of indentation and comments, the reduction is most dramatic.

How to minify safely

  1. Keep your original, readable source file — minify a copy for production.
  2. Paste the code into the minifier.
  3. Copy the minified output and deploy it.
  4. Test the production page to confirm nothing broke.

Examples

A CSS block with comments and one declaration per line might shrink from 4.2 KB to 1.8 KB after minification — a 57% saving before gzip. An HTML page with generous indentation might drop from 32 KB to 22 KB.

When a minifier is useful

  • Preparing production HTML, CSS, or inline styles.
  • Reducing payload size for faster page loads.
  • Inlining critical CSS for above-the-fold rendering.
  • Compressing email templates that have tight size limits.

Put it into practice

Use the HTML / CSS Minifier right now — free, in your browser, no sign-up required.

Try the HTML / CSS Minifier