Minify HTML CSS JS Online

Overview

The free web tool to minify HTML, CSS and JS involves removing any unnecessary characters from within a file to help reduce its size and thus make it load faster.

Why to minify CSS, JS, and HTML?

To minify HTML, CSS and JS files provides advantages for both the website visitors as well as the site owner. By minifying your files you will benefit by reducing the amount of data transfer required, files will run more quickly in the client's browser. Therefore minification can help improve your website speed.

How to use?

  1. Enter code in the editor.
  2. Select Features
  3. Click "Minify" button and it will minify the code and show in output.

Minify HTML

Input:
<div class="container">
    <nav>
        <ul>
            <li><a class="menu" href="#">About </a></li>
            <li><a class="menu" href="#">Contact </a></li>
            <li><a class="menu" href="#">Services</a></li>
            <li><a class="menu" href="#">Contact Us</a></li>
        </ul>
    </nav>
</div>
Output:
<div class=container><nav><ul><li><a class=menu href=#>About</a><li><a class=menu href=#>Contact</a><li><a class=menu href=#>Services</a><li><a class=menu href=#>Contact Us</a></ul></nav></div>

Minify CSS

Input:
.container{
    max-width:960px;
    margin:0 auto;
}
nav ul li{
    list-style:none;
    float:left;
    padding-right:20px;
}
nav ul li a{
    text-decoration:none;
    color:#222;
    background-color:#ccc;
    padding:4px 5px;
}
.active{
    background-color:#d90000;
    color:#fff;
}
Output:
.container{ max-width:960px; margin:0 auto; } nav ul li{ list-style:none; float:left; padding-right:20px; } nav ul li a{ text-decoration:none; color:#222; background-color:#ccc; padding:4px 5px; } .active{ background-color:#d90000; color:#fff; }

Minify JS

Input:
$(document).ready(function() {
    $('ul li a').click(function() {
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});
Output:
$(document).ready(function() { $('ul li a').click(function() { $('li a').removeClass("active"); $(this).addClass("active"); }); });