Nén CSS

Thu gọn file CSS của bạn

CSS chặn quá trình hiển thị: trình duyệt chưa vẽ trang cho đến khi tải và đọc xong các stylesheet trong <head>. Vì vậy dung lượng CSS ảnh hưởng trực tiếp đến tốc độ trang hiện ra. Công cụ nén CSS xóa chú thích, khoảng trắng, xuống dòng và các ký tự mà trình duyệt không cần, đồng thời cho bạn thấy số ký tự trước và sau khi nén.

Giao diện vẫn hiển thị y hệt, chỉ có file nhỏ đi. Rất hợp với CSS tùy chỉnh trong WordPress, Shopify hay theme AltumCode, các dự án nhỏ không dùng công cụ build, và CSS quan trọng (critical CSS) chèn trực tiếp vào trang.

Giữ bản gốc dễ đọc để sửa sau này, còn bản đã nén thì đưa lên website.

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

1. Dán mã CSS của bạn.
2. Gửi để nén.
3. So sánh số ký tự trước và sau.
4. Chép CSS đã nén vào website hoặc file của bạn.

Ví dụ

Style cho nút bấm

Đầu vào:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Kết quả:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

Chú thích và khoảng trắng biến mất, #ffffff rút gọn thành #fff, 0px thành 0, giá trị margin lặp lại được gộp và 0.80 thành .8.

Ứng dụng phổ biến

• Nén CSS tùy chỉnh thêm qua phần cài đặt theme hoặc CMS.
• Thu nhỏ stylesheet cho website nhỏ và landing page.
• Chuẩn bị critical CSS chèn thẳng vào trang để hiển thị nhanh hơn.
• Nén CSS trong mẫu email HTML.
• Thu gọn stylesheet cho website không có quy trình build, như trang tĩnh nhỏ hoặc landing page.
• Chuẩn bị critical CSS để chèn vào thẻ <head> của trang.
• Giảm dung lượng CSS tùy chỉnh dán vào CMS hoặc công cụ tạo website.

Mẹo và lưu ý

• Xóa các rule không dùng trước; bỏ hẳn CSS thừa tiết kiệm nhiều hơn là nén nó.
• Giữ các chú thích cần thiết (như thông tin bản quyền) trong file gốc và kiểm tra xem chúng có còn sau khi nén không.
• Kiểm tra lại trang sau khi đưa lên, nhất là khi CSS có các hack đặc biệt.
• Nén luôn HTML và script bằng công cụ nén HTML và công cụ nén JS. Kiểm tra mã màu với công cụ chuyển đổi màu.

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

• Kết quả là một dòng rất dài nên khó tìm lỗi. Hãy giữ file gốc dễ đọc và chỉ nén một bản sao.
• Chú thích bị xóa, kể cả chú thích bản quyền. Hãy thêm lại phần ghi công mà bạn bắt buộc phải giữ.
• CSS sai cú pháp có thể bị bỏ hoặc bị thay đổi. Nếu giao diện lạ sau khi nén, hãy kiểm tra file gốc xem có thiếu dấu ngoặc nhọn hay dấu chấm phẩy không.

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

Công cụ nén CSS làm gì?

Nó xóa các ký tự không cần thiết trong CSS, như khoảng trắng và chú thích, mà không thay đổi cách style hoạt động.

CSS đã nén có giúp web nhanh hơn không?

Có. File nhỏ hơn tải và xử lý nhanh hơn, giúp trang hiển thị sớm hơn.

Có giải nén CSS được không?

Bạn có thể định dạng lại bằng công cụ làm đẹp code, nhưng chú thích đã xóa thì không lấy lại được. Hãy giữ file gốc.

Đã bật gzip hoặc Brotli thì có cần nén CSS nữa không?

Có. Nén gzip/Brotli và minify bổ trợ cho nhau để dung lượng truyền tải nhỏ nhất.

Nén CSS có làm thay đổi giao diện website không?

Không nên có. Chỉ những ký tự trình duyệt bỏ qua bị xóa, và các giá trị được rút gọn thành dạng tương đương như #fff.

Công cụ liên quan

• Nén HTML: Nén HTML 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.
• Chuyển đổi mã màu: Chuyển màu của bạn sang nhiều định dạng khác.
• 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).
• Kiểm tra HTTP/2: Kiểm tra website có đang dùng giao thức HTTP/2 mới hay không.