HTML Minifier: Minify and Compress HTML Code Online
Paste your HTML and get a smaller file in one click. This free HTML minifier removes comments, extra spaces, line breaks and optional characters, and can minify the CSS and JavaScript inside your page at the same time. You see how many bytes you saved, and a switch turns the tool into an HTML beautifier, so you can also unminify code that is packed onto one line. It runs in your browser and your code is never uploaded.
Use it to speed up a landing page, shrink an email template, prepare HTML to embed in a JavaScript or PHP string, or read minified HTML from a site you are debugging.
Use the toolSizes are in bytes (UTF-8), the same count a server reports. Test the page after minifying, especially if you turn on JavaScript minifying.
Smaller files
Removes comments, spaces and line breaks the browser ignores.
Inline CSS and JS
Optionally shrink style and script blocks too.
Beautify mode
Unminify code so each tag is on its own line.
Private by design
Your HTML never leaves your browser.
Paste your HTML into the Input pane, keep the default options or choose your own, and press Minify HTML. The smaller code appears next to your original with the bytes saved. Switch to Beautify to make packed code readable again.
Key Takeaways
- Minifying removes comments, extra spaces and line breaks that a browser does not need, so the file is smaller and the page looks the same.
- The tool reports the bytes you saved. Pages with deep indentation and many comments save the most.
- Text inside pre and textarea is kept exactly as typed, because its spaces are visible on the page.
- Turn on the CSS and JavaScript options to shrink style and script blocks too, and test the page afterwards.
- Beautify mode puts each tag on its own line and indents nested elements, but it cannot bring back comments that were removed.
How to Minify HTML Online
-
1STEP 1 Paste your HTML into the input box, or upload an .html file.
-
2STEP 2 Leave the default options on, or choose exactly what to remove: comments, whitespace, or inline CSS and JavaScript.
-
3STEP 3 Click Minify. The smaller code appears next to your original with the bytes saved.
-
4STEP 4 Check the result in your browser or email tool. If something looks off, turn off the last option you changed.
-
5STEP 5 Copy the minified HTML or download it as a file.
What Is HTML Minification?
HTML minification is the process of removing everything a browser does not need to display the page. Developers add indentation, line breaks and comments so that code is readable, but the browser ignores most of them. Taking them out makes the file smaller, so it downloads faster and uses less bandwidth.
Minification does not change what the page looks like or what it does. It only changes how the code is written. That is different from compression such as gzip or Brotli, which is applied by the server while sending the file. The two work well together, because minified files compress better than messy ones.
HTML Minifier Before and After
Here is a small page before minifying. It is 251 characters:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<!-- main styles -->
<style> body { margin: 0; } </style>
</head>
<body>
<h1>Hello</h1>
<p>Welcome to my page.</p>
</body>
</html>After minifying, with comments and whitespace removed, it is 182 characters:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My Page</title><style>body { margin: 0; }</style></head><body><h1>Hello</h1><p>Welcome to my page.</p></body></html>That is about 27 percent smaller, even for a tiny page. On real pages with deeper nesting, long comments and big inline scripts, the saving depends on how much whitespace and commenting the original had.
What the HTML Minifier Removes
| What is removed | Example | Effect on the page |
|---|---|---|
| Comments | None. Comments are never shown | |
| Indentation and line breaks | Tabs and blank lines between tags | None in most cases |
| Repeated spaces | Welcome to my page | Spaces collapse to one, as the browser already does |
| Spaces around block tags | Between and | None |
| Optional quotes (if enabled) | class="nav" becomes class=nav | None when the value has no spaces |
| Whitespace in inline CSS and JS (if enabled) | Spaces and comments in style and script blocks | None if the code is valid |
What Stays Untouched
- Text inside pre and textarea tags, because their spaces and line breaks are shown to the visitor.
- Conditional comments such as the old IE comments, if you choose to keep them.
- Single spaces between inline words, such as between two links or a word and a span, where the space is visible.
- Text inside quoted attribute values, such as alt text and data attributes.
- Your content: words, links, images and structure are not changed.
HTML Minifier With CSS and JavaScript
Many pages carry style and script blocks directly in the HTML. Turn on the CSS and JavaScript options to shrink those blocks too. Whitespace and comments are removed from CSS, and comments and spacing are removed from JavaScript. If your JavaScript relies on automatic semicolon insertion or unusual formatting, test the page after minifying. For large separate files, minify the .css and .js files with a build tool and use this page for HTML and small inline blocks.
HTML Beautifier: Unminify HTML
Switch to Beautify mode to reverse the look of minified code. The tool puts each tag on its own line and indents nested elements, which makes a one-line page readable. This is useful when you view source on a minified site, receive code from a plug in or have to edit an old template.
Beautifying cannot bring back comments that were removed, and it cannot restore the original spacing choices of the author. It can only make the structure readable again, so always keep a copy of your original source.
How to Compress HTML for Faster Page Load
Minifying HTML is one step in making a page fast. These changes usually help more together than any single one does.
- Minify HTML, CSS and JavaScript before you publish.
- Turn on gzip or Brotli compression on your server or CDN.
- Compress and resize images, which are usually the largest part of a page.
- Use browser caching so repeat visitors do not download the same files again.
- Remove scripts, widgets and fonts you do not need.
HTML is often a small part of total page weight, so expect modest gains from minifying HTML alone. Test with a speed tool before and after to see the real difference for your page.
Minify HTML for WordPress, Shopify and Email
- WordPress. Many caching and performance plug ins have a minify HTML switch. Use this tool when you only need to shrink a single block, a custom HTML widget or a template.
- Shopify and other builders. Theme code is often edited in place, so keep the original file and paste the minified version only into places where you do not edit by hand.
- Email templates. Some email programs are picky about code. Test your minified email in the programs your readers use before sending, and keep conditional comments if you support older versions of Outlook.
- JavaScript or PHP strings. Minify first, then escape quotes and backslashes for your language so the string is valid.
Common HTML Minifier Problems and Fixes
- The page looks different after minifying. Spaces between inline elements may have been removed. Turn off aggressive whitespace removal or add the space back.
- A script stopped working. Turn off inline JavaScript minification, check for missing semicolons, and minify that script with your build tool.
- A preformatted block lost its layout. Make sure the option to keep pre and textarea content is on.
- Broken HTML gives odd results. The tool works best on valid HTML. Fix unclosed tags first, for example with the XML Formatter if your code is XHTML.
- The result is not much smaller. The code may already be minified, or most of the weight may be in images or scripts rather than markup.
Is My HTML Private?
Yes. The tool processes your code in your browser. It is not uploaded or stored, so you can use it for unreleased pages and client work. Remove API keys and passwords from any code you share elsewhere.
More Free Developer and Text Tools
Tidy structured data with the XML Formatter or JSON Formatter, and clean up queries with the SQL Formatter. Compare the original and minified versions line by line with the Text Compare tool, or check the file length with the Word Counter.
FAQs
What does an HTML minifier do?
An HTML minifier removes comments, extra spaces, line breaks and other characters that a browser does not need, so the file becomes smaller. The page looks and works the same. A smaller file downloads faster and uses less bandwidth, which can help page speed, especially on slow connections and mobile devices.
How do I minify HTML code online?
Paste your HTML into the input box or upload an .html file, choose your options and click Minify. The smaller code appears with the bytes saved. Copy it or download it. If anything looks wrong, turn off the last option you changed and try again, then compare the page in your browser.
Is it safe to minify HTML?
Usually yes, because browsers ignore the whitespace and comments that are removed. Problems appear with pre and textarea content, spaces between inline elements, and scripts that depend on formatting. Keep the original file, test the minified page in a browser, and turn off options if something changes.
How much smaller will my HTML be?
It depends on your code. Pages with deep indentation, many comments and large inline blocks save the most. A tiny example in this guide shrank by about 27 percent. Pages that are already compact, or where most weight is images and scripts, will see a smaller gain.
What is the difference between minifying and compressing HTML?
Minifying rewrites the code to remove characters that are not needed. Compression, such as gzip or Brotli, is done by the server when it sends the file and is undone by the browser. They work together, and minified HTML usually compresses a little better than unminified HTML.
Can I unminify HTML or make it readable again?
Yes. Switch to Beautify mode and the tool puts each tag on its own line and indents nested elements. It cannot restore comments that were removed or the original spacing, so keep your unminified source file safe. Beautify is also handy for reading the source of minified pages.
Does the tool also minify CSS and JavaScript?
Yes. Turn on the CSS and JavaScript options to minify style and script blocks inside your HTML. For separate .css and .js files, a build tool is the better choice for big projects. Always test the page after minifying inline scripts, because unusual code can break.
Is my HTML uploaded to a server?
No. The minifier runs in your browser, and your HTML is not sent to a server or saved. You can use it for unreleased pages and client projects. As good practice, remove keys, passwords and personal data from any code before you share it with other people.
Related Free Tools
XML Formatter
Format, validate and minify XML in your browser.
Open the toolJSON Formatter
Beautify, validate and minify JSON in your browser.
Open the toolText Compare
Find every difference between two texts.
Open the toolWord Counter
Count words, reading time and keyword density as you type.
Open the toolReady to shrink your HTML?
Go back to the minifier, paste your code and press Minify HTML.
Use the tool