Rút gọn HTML

Cách sử dụng

1. Dán đoạn HTML bạn muốn thu nhỏ.
2. Giữ nguyên tùy chọn mặc định trừ khi có lý do — đó là các tùy chọn an toàn.
3. Rút gọn, rồi sao chép hoặc tải kết quả về.
4. Việc bỏ dấu nháy thuộc tính mặc định tắt; chỉ bật khi bạn đã kiểm tra kết quả.

Tính năng

• Giữ khoảng trắng có hiển thị và xóa khoảng trắng không hiển thị.
• Giữ nguyên từng byte nội dung của pre, textarea, script và style.
• Giữ chú thích điều kiện và chú thích giấy phép, những thứ mà bước build hoặc trình duyệt vẫn xử lý.
• Đọc thẻ theo từng ký tự, nên dấu > nằm trong giá trị thuộc tính không bị nhầm là điểm kết thúc thẻ.

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

Vì sao tệp của tôi không nhỏ đi bao nhiêu?

Vì phần rút gọn an toàn được trong HTML vốn rất ít. Phần lớn dung lượng một trang nằm ở script, style và hình ảnh, những thứ công cụ này không đụng đến — còn khoảng trắng có thể xóa mà không đổi hiển thị thường chỉ là phần thụt lề. Hãy phục vụ kết quả kèm nén gzip hoặc brotli, thứ tiết kiệm nhiều hơn hẳn so với việc rút gọn.

Vì sao phải giữ khoảng trắng giữa hai thẻ?

Vì `<span>a</span> <span>b</span>` hiển thị thành "a b", bỏ khoảng trắng đó sẽ thành "ab". Đó là dấu cách giữa hai từ chứ không phải phần thụt lề. Khoảng trắng chỉ bị xóa hẳn khi nằm cạnh thẻ khối, nơi trình duyệt vốn không hiển thị nó. Đó chính là khác biệt giữa một công cụ rút gọn và một công cụ phá văn bản.

Có nên bỏ dấu nháy ở thuộc tính không?

Thường là không nên. Đó vẫn là HTML hợp lệ và tiết kiệm hai byte mỗi thuộc tính, nhưng kết quả khó đọc hơn, dễ hỏng khi sửa về sau, và gây rối cho một số công cụ template hay trình soạn thảo. Tùy chọn này mặc định tắt, và dấu nháy chỉ bị bỏ khi giá trị không chứa gì cần đến chúng.

Công cụ liên quan