HTML Minifier - Nén HTML Online

Nén là gì?

Nén là quá trình giảm thiểu mã và đánh dấu trong các trang web và tệp kịch bản của bạn. Đây là một trong những phương pháp chính được sử dụng để giảm thời gian tải và sử dụng băng thông trên các trang web. Nén cải thiện đáng kể tốc độ và khả năng truy cập của trang web, trực tiếp chuyển thành trải nghiệm người dùng tốt hơn. Nó cũng có lợi cho người dùng truy cập trang web của bạn qua gói dữ liệu hạn chế và muốn tiết kiệm băng thông khi lướt web.

Tại sao nên nén HTML?

Khi tạo HTML, các nhà phát triển thường sử dụng khoảng trắng, chú thích và biến có tên rõ ràng để làm cho mã và đánh dấu dễ đọc cho chính họ. Nó cũng giúp những người khác có thể làm việc trên tài sản sau này. Mặc dù điều này là một điểm cộng trong giai đoạn phát triển, nhưng nó trở thành một điểm trừ khi phục vụ các trang của bạn. Máy chủ web và trình duyệt có thể phân tích nội dung tệp mà không cần chú thích và mã được cấu trúc tốt, cả hai đều tạo ra lưu lượng mạng bổ sung mà không cung cấp bất kỳ lợi ích chức năng nào.

Để nén các tệp HTML, cần loại bỏ chú thích và khoảng trắng thừa, cũng như rút gọn tên biến để giảm thiểu mã và giảm kích thước tệp. Phiên bản tệp đã nén cung cấp cùng một chức năng trong khi giảm băng thông của các yêu cầu mạng.

Ví dụ

Trước khi nén

      
<html
    style="color: green">
    <!-- đây là một chú thích -->
    <head>
        <title>Ví dụ HTML hỗn hợp</title>
        <style>
            h1 {
                font-family: comic sans;
                color: #f0f;
            }
            div {
                background: yellow !important;
            }
            body {
                max-width: 50em;
                margin: 1em 2em 1em 5em;
            }
        </style>
    </head>
    <body>
        <h1>Ví dụ HTML hỗn hợp</h1>
        <script>
            function jsFunc(arg1, arg2) {
                if (arg1 && arg2)
                    document.body.innerHTML = "achoo";

            }
        </script>
    </body>
</html>
      
    

Sau khi nén

      
<html style="color: green"> <head><title>Ví dụ HTML hỗn hợp</title><style>h1{font-family:comic sans;color:#f0f;}div{background:yellow !important;}body{max-width:50em;margin:1em 2em 1em 5em;}</style></head><body><h1>Ví dụ HTML hỗn hợp</h1><script>function jsFunc(arg1,arg2){if(arg1&&arg2)document.body.innerHTML="achoo";}</script></body></html>