Giảm dung lượng CSS
Mỗi byte CSS đều phải được tải xuống và phân tích cú pháp trước khi trang có thể hiển thị, vì vậy stylesheet càng nhỏ thì tốc độ hiển thị trang (first paint) càng nhanh, điểm Core Web Vitals tốt hơn và tiết kiệm dữ liệu di động hơn. Công cụ nén CSS này loại bỏ khoảng trắng, chú thích và áp dụng các tối ưu hóa cấu trúc — gộp các quy tắc trùng lặp, rút gọn mã màu, xóa các giá trị thừa — giúp stylesheet của bạn nhỏ nhất có thể mà không làm thay đổi giao diện trang.
Tính năng
- Xóa khoảng trắng và chú thích.
- Rút gọn giá trị: màu sắc, số 0, đơn vị và độ đậm font chữ.
- Tối ưu hóa cấu trúc: gộp các selector trùng lặp và xóa các khai báo bị ghi đè.
- Chú thích bản quyền (
/*! … */) được giữ lại theo yêu cầu. - So sánh dung lượng theo byte và phần trăm.
- Riêng tư: hoạt động hoàn toàn trên trình duyệt của bạn.
Trước và sau
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
trở thành
.card .title{font-weight:700;color:#333;font-size:1.25em}
Khi nào cần nén CSS
Hãy nén CSS trong quá trình build cho production, và giữ lại mã nguồn dễ đọc trong hệ thống quản lý phiên bản. Hầu hết các framework và bundler đều tự động làm việc này; công cụ này rất tiện lợi để sửa lỗi nhanh, làm theme CMS, mẫu email, widget nhúng và các dự án không có bước build.
Các công cụ liên quan
Nén script với Công cụ nén JavaScript, tạo style trực quan với Trình tạo Box Shadow và Trình tạo CSS Gradient, hoặc làm đẹp JSON với Công cụ định dạng JSON.