Tất cả bài viết

Rút gọn CSS: điều gì thực sự bị loại bỏ khỏi tệp và vì sao

Nén CSS làm giảm kích thước tệp mà không thay đổi cách trình duyệt diễn giải nó — các style áp dụng ra vẫn hoàn toàn giống nhau, chỉ phần chỉ tồn tại để con người đọc code mới biến mất.

Những gì thực sự bị loại bỏ

Công cụ nén loại bỏ khoảng trắng và xuống dòng giữa các rule, comment dạng /* ... */, dấu chấm phẩy cuối cùng trước dấu ngoặc đóng của một khối, và rút gọn các số 0 thừa trong giá trị như 0.5em.5em. Không bước nào trong số này chạm vào nội dung ký tự thực sự — chỉ là khoảng trắng và dấu câu xung quanh nó.

Tiếng Việt có dấu trong CSS và khai báo @charset

Một giá trị như content: "→" hay một comment tiếng Việt có dấu đi qua quá trình nén mà không hề bị thay đổi ký tự nào — công cụ nén chỉ thao tác trên khoảng trắng, comment và cú pháp, chứ không đụng đến mã hóa byte của văn bản. Điều đáng lưu ý là các công cụ cũ hoặc pipeline build ghép nhiều tệp CSS lại mà ngầm giả định sai bảng mã có thể làm hỏng dấu tiếng Việt. Với tệp CSS chứa ký tự có dấu, an toàn nhất là lưu ở UTF-8 và khai báo rõ @charset "UTF-8"; ở dòng đầu tiên, trước cả comment.

Vì sao tệp đã nén vẫn hoạt động y hệt

Trình phân tích CSS của trình duyệt hoàn toàn bỏ qua khoảng trắng và xuống dòng giữa các token — chúng chỉ tồn tại để con người dễ đọc hơn. Vì vậy việc xóa các ký tự này không hề làm thay đổi style được tính toán ra, chỉ khiến tệp gọn hơn.

Vì sao cần dùng công cụ này

  • Giảm kích thước tệp CSS trước khi đưa website lên production.
  • Tăng tốc độ tải trang nhờ lượng dữ liệu truyền đi ít hơn.
  • Khiến cấu trúc style khó nhìn ra hơn khi xem qua source code.

Ý nghĩa thực tế với người dùng di động ở Việt Nam

Phần lớn người dùng internet ở Việt Nam truy cập web qua mạng di động, và dù 4G đã phủ khá rộng, chất lượng sóng cũng như gói cước dữ liệu vẫn là yếu tố thực tế ở nhiều khu vực ngoài các thành phố lớn. Với nhóm người dùng này, vài kilobyte tiết kiệm được từ tệp CSS không chỉ là con số trên báo cáo hiệu năng — nó có nghĩa là trang tải nhanh hơn và tốn ít dữ liệu hơn. Nén CSS là một thao tác rẻ để thực hiện, nên không có lý do gì để bỏ qua với những site có lượng người dùng di động lớn như vậy.

Dùng thử công cụ