HTML Minifier and Compressor Online

Use this HTML minifier to minify or compress page markup and speed up delivery. Write, paste or upload your HTML, select compression options, and get a minified markup file. The tool strips unnecessary bytes while keeping scripts and styles working, so pages load faster on mobile and desktop.

Core capabilities

  • Compress HTML by removing extra whitespace and redundant characters
  • Remove comments and optional closing tags to cut file size
  • Minify inline CSS and inline JavaScript when enabled
  • Collapse boolean attributes and drop empty attributes safely
  • Convert absolute links to relative links using a base if you provide one
  • Option to preserve single line breaks for readability when needed
  • Keep important markup intact so behavior and layout remain unchanged
  • Run entirely in your browser so no server upload is required

How to use this HTML Compressor?

  1. Write, paste, drag and drop, or open your HTML file in the input editor
  2. Choose features to enable such as inline CSS minify or inline JS minify
  3. Pick trimming rules for comments, optional tags, and attribute quotes
  4. Click the Minify HTML button to produce the optimized output
  5. Review the result, use the preview, then copy or download the compressed file

Why use an HTML Minifier or Optimizer?

Smaller HTML reduces bandwidth and improves perceived performance. Faster markup lowers time to first meaningful paint and first contentful paint which helps user experience and search engine performance. You can also use an HTML5 formatter before minifying to ensure clean and consistent markup for debugging.

Minification also helps when you bundle many components and want consistent production builds. For mobile users and slow networks the savings are often most noticeable.

Key differences: original HTML Vs Minified Markup

  • Original HTML is readable with clear spacing and comments
  • Minified HTML removes comments and extra spacing to reduce bytes
  • Optional tags may be removed where safe to do so
  • Functionality and rendering remain the same when minification is correct

Example 1: Simple page

Original HTML

Copy
Input Size: 0.34 KB
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample Page</title>
    <style>
      body { font-family: Arial, sans-serif; margin: 20px; }
    </style>
  </head>
  <body>
    <!-- Main header -->
    <h1>Welcome</h1>
    <p>This is a sample page that demonstrates HTML before compression.</p>
  </body>
</html>

Minified HTML

Copy
Input Size: 0.21 KB
<!doctype html><html lang=en><meta charset=utf-8><title>Sample Page</title><style>body{font-family:Arial,sans-serif;margin:20px}</style><h1>Welcome</h1><p>This is a sample page that demonstrates HTML before compression.

Example 2: Inline CSS and JS

Original HTML

Copy
Input Size: 0.29 KB
<html>
  <head>
    <style>
      .btn { padding: 10px 20px; background: #007acc; color: #fff; }
    </style>
    <script>
      function greet() {
        console.log("Hello world");
      }
    </script>
  </head>
  <body>
    <button class="btn" onclick="greet()">Click</button>
  </body>
</html>

Minified HTML

Copy
Input Size: 0.17 KB
<style>.btn{padding:10px 20px;background:#007acc;color:#fff}</style><script>function greet(){console.log("Hello world")}</script><button class=btn onclick=greet()>Click</button>

Customization options

The minifier provides flexible options so you can control how aggressively the HTML is reduced. Pick the combination that matches your workflow and testing strategy.

Option Default Description
Case Match False Treat tags and attributes as case sensitive when true
Minify CSS True Compress inline style blocks and style attributes
Minify JS True Compress inline scripts and event handler code
Strip Comments True Remove HTML comments from the output
Strip Quotes True Drop safe attribute quotes when allowed by HTML rules
Keep Breaks False Preserve one line break in places where it improves readability
Strip Empty Attrs True Remove attributes that have no value
Collapse Booleans True Omit values for boolean attributes such as checked or disabled
Collapse Space True Reduce redundant whitespace without altering inline text where it matters
Inline Whitespace False Collapse space between inline elements when safe
Strip Tag Space False Remove space between tags and attributes to shrink markup
Safe Collapse False Consolidate multiple spaces to one while preserving layout where needed
Decode Entities False Convert certain HTML entities back to characters
Omit Tags True Remove optional closing tags where HTML rules allow it
Keep Slash False Retain trailing slash on self closing tags for compatibility
Minify URLs empty Base URL to rewrite absolute links to relative when provided
No Attr Escape False Prevent escaping of characters inside attribute values
Handle IE Comments False Process conditional comments used for legacy Internet Explorer support
Quote Style Double Quote Choose double or single quote for attribute values in output
Ignore Regex empty Fragments that match this pattern will not be altered
Strip Empty Tags False Remove elements that have no content and no attributes
Strip Defaults True Remove attributes that match default values in HTML specifications
Strip Script Type True Remove type attributes from script tags for modern HTML
Strip Style Type True Remove type attributes from style and link tags when safe

Best practices

  • Keep a readable source and use minified files in production
  • Test inline CSS and JS before minifying
  • Use source maps for complex scripts
  • Check third-party scripts before minification
  • Test pages on mobile after compression
  • Automate minification in your build pipeline

Conclusion

This HTML minifier and compressor helps you reduce and minify HTML output and improve load times. Choose the right balance of options for your site and test the result across devices.