Thoạt nhìn, khoảng trắng trong markup HTML có vẻ chẳng quan trọng — trình duyệt vẫn sẽ hiển thị mọi thứ đúng như bình thường. Nhưng có vài chỗ trong tài liệu là ngoại lệ, nơi việc xóa khoảng trắng thực sự làm thay đổi giao diện trang.
Những gì có thể xóa an toàn
Công cụ nén loại bỏ comment HTML <!-- ... -->, khoảng trắng và xuống dòng thừa giữa các thẻ, dấu ngoặc kép quanh thuộc tính mà giá trị không chứa khoảng trắng, và đôi khi cả các thẻ đóng không bắt buộc như </li>.
Lỗi kinh điển: hai từ dính liền thành một
Một khoảng trắng giữa hai phần tử inline là khoảng cách thực sự hiển thị trên trang, chứ không chỉ là định dạng trong source code. <span>foo</span> <span>bar</span> hiển thị thành "foo bar" có khoảng cách; nếu khoảng trắng đó bị xóa một cách vô tư, kết quả âm thầm biến thành "foobar" dính liền không có khoảng cách nào. Một công cụ nén cẩn thận chỉ xóa khoảng trắng không ảnh hưởng đến hiển thị — ví dụ giữa các thẻ block — và giữ nguyên khoảng trắng giữa các phần tử inline.
Nén so với khả năng đọc trong lúc phát triển
Trong quá trình phát triển, HTML thường được để nguyên định dạng có thụt lề vì giúp dễ nhìn cấu trúc hơn trong DevTools. Nén chỉ được áp dụng cho bản build cuối cùng trước khi publish, khi khả năng đọc của con người không còn quan trọng nữa.
Vì sao cần dùng công cụ này
- Giảm kích thước trang HTML trước khi đưa lên production.
- Loại bỏ comment của lập trình viên khỏi bản markup cuối cùng.
- Tránh sai sót bằng cách chỉ xóa khoảng trắng ở những chỗ thực sự an toàn.
Vì sao kích thước trang vẫn có ý nghĩa trên mạng di động
Ở Việt Nam, phần lớn lưu lượng truy cập web đến từ thiết bị di động, và điều kiện sóng cũng như gói cước dữ liệu vẫn khác biệt đáng kể giữa thành phố lớn và các vùng khác. HTML thường không phải là tài nguyên nặng nhất trên trang so với hình ảnh hay JavaScript, nhưng mỗi byte tiết kiệm được vẫn góp phần rút ngắn thời gian render đầu tiên — và với người dùng có kết nối chậm hơn hoặc gói dữ liệu giới hạn, dù nhỏ đến đâu, sự khác biệt đó vẫn cảm nhận được.