HTML & CSS Minifier Online: Compress HTML and CSS Code

HTML & CSS Minifier

Minifying means writing the same code with fewer characters: without the comments, the indents, the line breaks and the other things that a person needs to read the code and a browser does not need to run it. A smaller file is sent faster, and that helps the speed of a page. This page minifies HTML and CSS at once, tells you how many bytes you saved, and does it in your browser, so your code is not sent to a server.

How to use it

1. Paste the code in the left box. The tool finds out if it is HTML or CSS (you can choose it yourself).
2. Look at the options under the boxes and switch off what you do not want.
3. Press Copy, or Download to get a file. The line above the buttons shows how many bytes the code had and has now.

What it does to CSS

• Removes the comments. The comments that begin with /*! (licenses) stay, unless you switch this off.
• Removes the spaces and line breaks, and the spaces around { } ; , and around >, + and ~ in selectors.
• Removes the last semicolon of a rule: a{color:red;} becomes a{color:red}.
• Shortens the colours: #ffffff becomes #fff, and #aabbccdd becomes #abcd.
• Removes the zero before a point: 0.5em becomes .5em.
• Removes the empty rules, and the rules that hold only empty rules.

An example:

/* the button */
.btn:hover , .btn:focus {
    color : #ffffff ;
    margin : 0.5em 0 ;
    box-shadow : 0 0 0 0.2rem rgba( 0 , 123 , 255 , 0.25 ) ;
}

becomes

.btn:hover,.btn:focus{color:#fff;margin:.5em 0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}

The tool never touches a text in quotes (content: "a b"), an address in url(...), or the spaces that CSS needs: the spaces around + and - in calc(), the space in a descendant selector (a :hover is not a:hover) and the value of a custom property (--name). Modern CSS with nesting, @media, @supports, @layer and @keyframes is understood.

What it does to HTML

• Removes the comments. The conditional comments of old Internet Explorer (<!--[if IE]>) and the comments that begin with <!--! stay.
• Turns every run of spaces and line breaks into one space, and removes it where it is not shown: between block tags (<div>, <p>, <li>, <td> and the like) and at the ends of a block.
• Keeps one space between inline elements. In <b>a</b> <i>b</i> the space is a part of the text, and without it the words would stick together.
• Writes the tags in the short form: one space between the attributes, none around =, one space between the class names.
• Minifies the CSS in <style> and in the attribute style="", and writes JSON-LD (<script type="application/ld+json">) without spaces.
• Does not change <pre>, <textarea>, <script>, the texts of the attributes, and the entities such as  .

What it does not do

• JavaScript is not minified. The code in <script> is left as it is, and the page tells you about it. A bad minifier of JavaScript breaks programs, so use a build tool for it.
• It does not rename classes, merge rules, remove unused CSS, remove the quotes of the attributes or the optional tags (</li>, </p>). Tools that do it save a few percent more, and break a page now and then. This one prefers to be safe.
• It does not make a source map.

How much it saves

Hand-written CSS with comments and indents usually loses a fifth to a third of its size, and HTML much less, as most of it is text. If your server already compresses the files with gzip or Brotli, the gain in the transferred size is smaller, as repeated spaces compress well. You can see if your site uses it with the Brotli checker, and see the weight of a page with the website page size checker.

Good practice

• Keep the original files. Do not edit the minified ones: they are hard to read.
• For a site that you build, minify in the build step (Vite, esbuild, webpack, Gulp) and not by hand. Use this page for a quick check, for a snippet, or for a file that has no build.
• Test the result. Open the page and look at it before you put the minified code on a live site.

Limitations

• The tool reads the code as a browser does, but it does not check that it is correct. A broken HTML or CSS comes out shorter and still broken.
• The kind is found out by the first character: a code that begins with < is HTML. Choose HTML or CSS yourself if it is not so.
• A very big file (several megabytes) can make the page slow, as the work is done by your browser.
• Your code is not saved. Only your choice of the options stays in the browser.