Chuyển đổi miễn phí

HTML Công cụ khai thác

Giảm thiểu và nén mã HTML ngay lập tức trong trình duyệt của bạn. Xóa nhận xét, thu gọn khoảng trắng và giảm kích thước tệp. Miễn phí và riêng tư.

Kéo và thả tệp HTML vào đây

Hỗ trợ các tệp .html và .htm. Hoặc dán HTML của bạn ở trên.

Hoặc

Về công cụ này

Tính năng thu nhỏ HTML sẽ loại bỏ các ký tự không cần thiết khỏi nguồn của trang web — khoảng trắng giữa các thẻ, nhận xét, trích dẫn thừa, thẻ đóng tùy chọn — để giảm kích thước tệp mà không thay đổi cách hiển thị của trang. Mức tiết kiệm trên mỗi trang rất khiêm tốn (thường là 10–30%) nhưng lại tăng lên theo nhiều yêu cầu, đặc biệt đối với các trang tĩnh hoặc các trang được phân phát mà không nén động.

Công cụ rút gọn này loại bỏ khoảng trắng giữa các phần tử cấp khối, thu gọn các khoảng trắng bên trong văn bản không có ý nghĩa, loại bỏ các nhận xét HTML (ngoại trừ các nhận xét có điều kiện của IE), xóa các trích dẫn thuộc tính dư thừa khi được thông số HTML5 cho phép và bỏ qua các thẻ đóng tùy chọn (</p>, </li>) khi thông số kỹ thuật cho phép. Kết quả hiển thị giống hệt với nguồn trong mọi trình duyệt.

Việc thu nhỏ hữu ích nhất khi được kết hợp với tính năng nén gzip hoặc Brotli ở cấp máy chủ. Việc nén đã loại bỏ phần lớn việc giảm thiểu tiết kiệm, nhưng cả hai kết hợp vẫn đánh bại việc nén - đặc biệt đối với các trang web có lưu lượng truy cập cao, nơi chi phí băng thông là vấn đề quan trọng.

Tại sao giảm thiểu HTML

HTML nhỏ hơn tải nhanh hơn, đặc biệt là trên các kết nối và mạng di động chậm hơn. Trọng lượng trang ảnh hưởng trực tiếp đến Các chỉ số quan trọng của trang web — Thời gian hiển thị nội dung lớn nhất và thời gian tính đến Byte đầu tiên đều cải thiện khi máy chủ trả về ít HTML hơn để phân tích cú pháp. Đối với các trang web có thứ hạng SEO phụ thuộc vào điểm số Core Web Vitals, việc thu nhỏ là một cải tiến có thể đo lường được.

HTML được rút gọn cũng làm giảm chi phí băng thông trên quy mô lớn. Một trang web phục vụ một triệu trang mỗi ngày với mức tiết kiệm 10 KB trên mỗi trang sẽ tiết kiệm được 10 GB đầu ra hàng ngày. Tác động phức tạp đối với các trang web tĩnh được cung cấp từ CDN tính phí bằng cách truyền dữ liệu.

Cách sử dụng

Dán HTML, lấy phiên bản rút gọn.

  1. Thêm đầu vào HTML: Dán nguồn HTML vào vùng nhập hoặc thả tệp .html. Công cụ khai thác chấp nhận mọi đánh dấu HTML5 hợp lệ.
  2. Chọn tùy chọn: Mặc định loại bỏ nhận xét và thu gọn khoảng trắng; bạn có thể vô hiệu hóa các chuyển đổi riêng lẻ nếu bạn cần bảo toàn các phần tử cụ thể (ví dụ: giữ nhận xét cho tài liệu).
  3. Giảm thiểu: Công cụ khai thác duyệt luồng mã thông báo HTML, áp dụng từng chuyển đổi được kích hoạt. Đầu ra là HTML giống hệt về mặt chức năng với kích thước được giảm bớt.
  4. Sao chép hoặc tải xuống: Sử dụng kết quả làm HTML được cung cấp. Xác nhận trang hiển thị chính xác trong trình duyệt đích trước khi triển khai.

Các trường hợp sử dụng phổ biến

Chi tiết kỹ thuật

Công cụ khai thác xử lý mã thông báo HTML theo mã thông báo. Khoảng trắng giữa các phần tử cấp khối (<div>, <p>, <ul>) bị xóa vì nó không ảnh hưởng đến kết xuất. Khoảng trắng bên trong ngữ cảnh nội tuyến (<span>, <a>, nội dung văn bản) được giữ nguyên vì nó có thể ảnh hưởng đến kết xuất.

Theo mặc định, các nhận xét sẽ bị loại bỏ nhưng các nhận xét có điều kiện (<!--[if IE]>) vẫn được giữ nguyên. Dấu ngoặc kép thuộc tính bị xóa khi trình phân tích cú pháp HTML5 cho phép - các giá trị thuộc tính một từ không có dấu cách hoặc ký tự đặc biệt có thể bỏ qua dấu ngoặc kép.

Các thẻ đóng tùy chọn được bỏ qua theo thông số HTML5: </p>, </li>, </td> và một số thẻ khác có thể được bỏ qua khi có thẻ anh chị em theo sau ngụ ý việc đóng của chúng. Điều này thật bất thường khi đọc nhưng HTML5 hợp lệ mà các trình duyệt phân tích cú pháp giống hệt nhau.

Thực tiễn tốt nhất

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

Việc thu nhỏ HTML sẽ loại bỏ những gì?
Khoảng trắng không cần thiết giữa các thẻ, nhận xét HTML (<!-- -->), thẻ đóng tùy chọn (</li>, </p>, </td>), giá trị thuộc tính mặc định (type="text" trên đầu vào) và giá trị thuộc tính boolean (disabled="disabled" → bị tắt).
Việc thu nhỏ có thể phá vỡ trang của tôi không?
Hiếm khi, nhưng có thể xảy ra nếu CSS của bạn dựa vào khoảng trắng giữa các thành phần nội tuyến hoặc nếu JavaScript sử dụng phép so sánh bên trongHTML. Luôn kiểm tra đầu ra được rút gọn. Công cụ này sử dụng các cài đặt bảo thủ theo mặc định.
Tôi có nên giảm thiểu HTML nếu tôi sử dụng một khung như Next.js không?
Hầu hết các framework hiện đại (Next.js, Nuxt, Angular) đều tự động thu nhỏ HTML trong các bản dựng sản xuất. Công cụ này hữu ích cho các tệp HTML tĩnh, mẫu email và dự án không có hệ thống xây dựng.
Điều này có giảm thiểu CSS và JavaScript nội tuyến không?
Công cụ này tập trung vào cấu trúc HTML. Nội dung <style> và <script> nội tuyến được giữ nguyên. Đối với những điều đó, hãy sử dụng các công cụ khai thác CSS và JavaScript chuyên dụng để có kết quả tối ưu.
Thẻ đóng tùy chọn có an toàn để xóa không?
Có theo thông số HTML5, mặc dù kết quả khó đọc hơn. Một số đội vô hiệu hóa chuyển đổi này để rõ ràng, chấp nhận hình phạt kích thước nhỏ.
HTML của tôi có được tải lên máy chủ không?
Không. Công cụ khai thác chạy trong trình duyệt của bạn.
Điều này so sánh với html-minifier-terser như thế nào?
html-minifier-terser là công cụ rút gọn HTML chuẩn của Node.js và tạo ra kết quả mạnh mẽ hơn một chút. Công cụ này bao gồm các chuyển đổi tương tự để sử dụng phía trình duyệt mà không cần thiết lập bản dựng.
Tôi nên giảm thiểu luôn luôn hay có chọn lọc?
Luôn luôn cho sản xuất. Không bao giờ cho mã nguồn trong kiểm soát phiên bản; HTML có thể đọc được trong nguồn là điều cần thiết để bảo trì.