Nén HTML

HTML nhỏ hơn, trang nhanh hơn

HTML do người viết (hoặc do trình tạo trang sinh ra) đầy thụt lề, xuống dòng và comment. Trình duyệt không cần những thứ đó. Công cụ nén HTML loại bỏ ký tự thừa mà trang vẫn hoạt động y như cũ, và hiển thị HTML characters trước và minified HTML characters sau, để bạn thấy đã tiết kiệm được bao nhiêu.

HTML nhỏ hơn tải nhanh hơn, nhất là trên mạng 4G, và đó là file đầu tiên trình duyệt cần trước khi hiển thị bất cứ thứ gì.

Hãy nén một bản sao cho môi trường production và giữ bản gốc dễ đọc để chỉnh sửa.

Cách dùng công cụ nén HTML

1. Dán code HTML của bạn.
2. Gửi để nén.
3. So sánh số ký tự.
4. Sao chép HTML đã nén và thử trang trước khi triển khai.

Ví dụ

Một trang nhỏ

Đầu vào:

<!DOCTYPE html>
<html>
  <head>
    <title> My page </title>
  </head>
  <body>
    <!-- main nav -->
    <p class="intro">
      Hello   <b>world</b>
    </p>
  </body>
</html>

Kết quả:

<!DOCTYPE html><html><head><title>My page</title><body><p class=intro>Hello <b>world</b>

Khoảng trắng và comment đã mất, dấu nháy quanh intro bị bỏ, và các thẻ đóng mà HTML cho phép lược bỏ (như </p>, </body> và </html>) được xóa. Trình duyệt vẫn hiển thị y hệt.

Ứng dụng phổ biến

• Giảm dung lượng trang HTML tĩnh và landing page.
• Nén mẫu email HTML (một số ứng dụng email cắt bớt thư lớn).
• Thu nhỏ đoạn HTML và widget nhúng trên website khác.
• Chuẩn bị bản build production khi không có công cụ build.
• Thu nhỏ mẫu email HTML trước khi gửi, sau khi đã thử trên các ứng dụng email chính.

Mẹo và lưu ý

• Giữ file gốc dễ đọc. Code đã nén rất khó chỉnh sửa.
• Khoảng trắng trong <pre> và <textarea> có ý nghĩa; hãy kiểm tra các phần đó sau khi nén.
• Gmail cắt email lớn hơn khoảng 102 KB, nên nén email HTML lớn giúp giữ thư nguyên vẹn.
• Nén phía server (gzip hoặc Brotli) cộng dồn với minify để truyền tải còn nhỏ hơn.
• Nén cả style và script bằng công cụ nén CSS và công cụ nén JS.

Trường hợp đặc biệt và giới hạn

• Thẻ đóng tùy chọn bị xóa, vẫn là HTML hợp lệ nhưng có thể làm rối công cụ yêu cầu mọi thẻ đều đóng, như một số trình tạo email hoặc trình phân tích XML. Hãy thử trước khi dùng kết quả ở đó.
• Khoảng trắng trong <pre> và <textarea> được giữ nguyên, vì ở đó nó có ý nghĩa.
• Thẻ template (như {{ }} hoặc <?php ?>) có thể bị thay đổi. Hãy nén HTML đã render cuối cùng, không nén template.
• CSS và JavaScript inline cũng được nén, nên hãy kiểm tra trang vẫn hoạt động.

Câu hỏi thường gặp

Nén HTML có tác dụng gì?

Nó xóa các ký tự trình duyệt không cần, như khoảng trắng thừa, xuống dòng và comment, làm file nhỏ hơn.

Nén có làm hỏng trang không?

Hiếm khi, nhưng nội dung nhạy với khoảng trắng và script inline có thể bị ảnh hưởng. Luôn thử bản đã nén.

HTML đã nén có giúp SEO không?

Gián tiếp. Trang nhanh hơn cải thiện trải nghiệm người dùng và Core Web Vitals. Công cụ tìm kiếm đọc HTML đã nén bình thường.

HTML của tôi sẽ nhỏ đi bao nhiêu?

Tùy lượng khoảng trắng và comment. Mức tiết kiệm 10–30% là phổ biến với HTML viết tay.

Có nên nén HTML do CMS sinh ra không?

Thường plugin cache hoặc tối ưu hiệu suất làm việc đó tự động. Dùng công cụ này cho trang tĩnh, template đã render và email HTML.

Công cụ liên quan

• Nén CSS: Nén CSS bằng cách xóa mọi ký tự không cần thiết.
• Nén JS: Nén JS bằng cách xóa mọi ký tự không cần thiết.
• Xóa thẻ HTML: Xóa mọi thẻ HTML khỏi một đoạn văn bản thật dễ dàng.
• Chuyển đổi HTML entity: Mã hóa hoặc giải mã HTML entity cho bất kỳ nội dung nào.
• Tính dung lượng văn bản: Xem dung lượng văn bản theo byte (B), kilobyte (KB) hoặc megabyte (MB).