HTML Minifier

Input

Output

About HTML Minifier

A HMTL minifier is a tool that reduces the size of HTML files by removing unnecessary characters such as comments, whitespace, and reduces code in styles, scripts and in tags. The HTML minifier is used to optimize the HMTL code for faster loading and improved performance of web pages. The using of html minifer will imporove your page perfomance like

Reduced File Size

Minifying HTML removes unnecessary characters, whitespace, and comments, resulting in a smaller file size. This reduction in file size can lead to faster download and rendering times, especially for users with slower internet connections or mobile devices.

Improved Page Load Times

Smaller HTML files load faster, reducing the overall page load time. This can enhance the user experience and increase user engagement on your website.

Bandwidth Savings

Minifying HTML reduces the amount of data that needs to be transferred from the server to the client. This can help save bandwidth, especially for websites with high traffic or limited bandwidth allocations.

Better SEO Performance

Search engines consider page load speed as a ranking factor. By reducing the file size and improving the load times of your web pages, HTML minification can positively impact your website's search engine optimization (SEO) efforts.

Enhanced Caching

Minified HTML files can be more efficiently cached by web browsers and content delivery networks (CDNs). Smaller file sizes allow for more efficient storage and retrieval, leading to improved caching performance.

How to implement a Simple HMTL Minifier?

Using js

<!DOCTYPE html>
<html>
<head>
  <title>Minifier</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    p {
      font-size: 16px;
      line-height: 1.5;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to Minifier</h1>
    <p>This is a simple HTML minifier.</p>
    <p>You can use this tool to compress your HTML code and remove unnecessary whitespace, comments, and other elements to optimize your website's performance.</p>
    <p>Simply copy and paste your HTML code into the input box below and click the "Minify" button.</p>
    
    <form>
      <textarea id="input" rows="10" cols="50" placeholder="Paste your HTML code here..."></textarea><br>
      <button type="button" onclick="minify()">Minify</button>
    </form>
    
    <h2>Minified HTML:</h2>
    <pre id="output"></pre>
  </div>
  
  <script>
    function minify() {
      var input = document.getElementById("input").value;
      var output = document.getElementById("output");
      
      // Remove HTML comments
      input = input.replace(/<!--[\s\S]*?-->/g, "");
      
      // Remove unnecessary white space
      input = input.replace(/\s{2,}/g, " ");
      
      // Remove line breaks
      input = input.replace(/\r?\n|\r/g, "");
      
      // Remove spaces around equal signs in attributes
      input = input.replace(/\s*=\s*/g, "=");
      
      // Remove quotes around attribute values when possible
      input = input.replace(/(['"])(.*?)\1/g, "$2");
      
      output.textContent = input;
    }
  </script>
</body>
</html>

Run


Using python

import re

def minify_html(html):
    # Remove HTML comments
    html = re.sub(r'', '', html)

    # Remove whitespace and line breaks
    html = re.sub(r'\s+', ' ', html)
    html = html.replace('\r\n', '')
    html = html.replace('\n', '')
    html = html.replace('\r', '')

    # Remove spaces around equal signs in attributes
    html = re.sub(r'\s*=\s*', '=', html)

    # Remove quotes around attribute values when possible
    html = re.sub(r'([\'"])(.*?)\1', r'\2', html)

    return html

# Example usage
html = '''
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>'''

minified_html = minify_html(html)
print(minified_html)

Run in Colab


Using php

<?php
function minifyHTML($html) {
    // Remove HTML comments
    $html = preg_replace('//', '', $html);

    // Remove whitespace and line breaks
    $html = preg_replace('/\s+/', ' ', $html);
    $html = str_replace("\r\n", '', $html);
    $html = str_replace("\n", '', $html);
    $html = str_replace("\r", '', $html);

    // Remove spaces around equal signs in attributes
    $html = preg_replace('/\s*=\s*/', '=', $html);

    // Remove quotes around attribute values when possible
    $html = preg_replace('/([\'"])(.*?)\1/', '$2', $html);

    return $html;
}

// Example usage
$html = '<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>';

$minifiedHTML = minifyHTML($html);
echo $minifiedHTML;
?>


Similar Minifiers

CSS


Minify your CSS Code

Minify Now


JS


Minify your JS Code

Minify Now

Converters you might like

Encode/Decode

Encode or decode your input using our encoder/decoder tools

UNIT CONVERTER

Converts a given unit value to different unit formats

IMAGE CONVERTER

Converts a given image to different image formats

GUIDE

The converter used here has some method to get most of it.

Minify - This button Minifies the given input code into minified format.

To upload any files from your device you can click the upload button to upload the respective code files.

To copy the generated ouput or provided codes click on the copy button.

To Download the generated ouput or provided codes click on the download button.

To export the generated ouput or provided codes we provided a mail button to export to mail immediately.

The input you give are not stored in any manner while you make any use of this tool. This is a full secure platform, you can freely use the tools and user's privacy is most important to us.

And Finally don't forget to give your feedback. click on the at the top provided to give feedback.
Version - 101.7.1.1


FEEDBACK

Rating


Message



Select: All, None, Reset