Công cụ nén CSS

Nén CSS (CSS minification) là gì?

Nén CSS là việc loại bỏ mọi byte mà trình duyệt không cần — comment, thụt lề, ngắt dòng, dấu chấm phẩy cuối cùng trong mỗi rule — và viết lại một số giá trị thành dạng ngắn hơn nhưng tương đương. Stylesheet thu được hoạt động y hệt nhưng nhỏ hơn, nên tải và phân tích nhanh hơn. Vì CSS là render-blocking, một stylesheet nhỏ hơn có thể cải thiện trực tiếp First Contentful Paint và Largest Contentful Paint.

Công cụ nén này thay đổi những gì

Vì sao an toàn

Các công cụ nén quá mạnh đôi khi làm hỏng stylesheet. Công cụ này chỉ áp dụng những biến đổi không thể thay đổi hành vi:

• Chuỗi, giá trị url() và ký tự escape được bảo vệ và không bao giờ bị sửa.
• Đơn vị chỉ bị bỏ với độ dài — 0s, 0deg và 0% giữ nguyên (transition: 0s và selector keyframe cần chúng), còn mọi thứ bên trong calc(), min() hay clamp() đều không bị động vào vì calc(0 + 10px) là không hợp lệ.
• Shorthand flex được bỏ qua (flex: 1 1 0px và flex: 1 1 0 không phải lúc nào cũng giống nhau trên các engine cũ), còn giá trị custom property chỉ bị bỏ khoảng trắng thừa.
• Khoảng trắng trong selector được giữ lại ở chỗ nó có ý nghĩa: a :hover (bất kỳ phần tử con nào đang được hover) khác với a:hover.
• @layer name {} được giữ lại ngay cả khi rỗng, vì nó khai báo thứ tự layer. Comment license bắt đầu bằng /*! được giữ lại theo mặc định.

Nén CSS so với nén dữ liệu

Minify và nén gzip/Brotli có thể kết hợp với nhau. Nén dữ liệu loại bỏ sự lặp lại; minify loại bỏ những byte mà nén không xử lý được, chẳng hạn comment. Con số Gzipped output cho biết gần đúng lượng dữ liệu truyền qua mạng nếu máy chủ của bạn nén phản hồi (hầu hết đều làm vậy). Để hiệu quả nhất, hãy xóa các rule không dùng bằng công cụ như PurgeCSS, và chỉ inline phần CSS quan trọng cho nội dung hiển thị ngay trên màn hình đầu tiên.

Muốn kiểm tra một tệp đã nén? Dùng chế độ Beautify ở đây hoặc CSS Formatter. Muốn kiểm tra hiệu năng cả trang? Chạy page speed test.

Cũng được tìm dưới tên: minify css, công cụ nén css, rút gọn css, css compressor, giảm dung lượng css, nén css online, tối ưu css.

Các công cụ dùng kèm tốt với Nén CSS

• Định dạng HTML — Dán mã HTML đã nén hoặc lộn xộn và nhận lại HTML được thụt lề rõ ràng, nhất quán — bao gồm cả các khối <style> và <script> nhúng bên trong.
• Định dạng JavaScript — Giải nén và định dạng lại JavaScript, JSON hoặc JSX với kiểu thụt lề và dấu ngoặc bạn chọn, hoặc loại bỏ khoảng trắng và chú thích bằng bộ thu gọn đã được kiểm chứng.
• Nén ảnh — Giảm dung lượng ảnh và đồ họa đến 90% mà gần như không thấy mất chất lượng, tùy thuộc vào ảnh và cài đặt.
• Định dạng SQL — Dán một truy vấn hoặc cả một file migration để nhận SQL dễ đọc: mỗi mệnh đề một dòng, các join được căn thẳng hàng và kiểu chữ từ khóa nhất quán, theo đúng cú pháp của cơ sở dữ liệu bạn dùng.