Chuyển đến nội dung
🛠️
Whiz Tools

Công Cụ Nén CSS Miễn Phí: Nén & Tối Ưu Mã CSS Trực Tuyến

Nén mã CSS ngay lập tức và giảm kích thước tệp lên đến 40%. Công cụ nén CSS trực tuyến miễn phí loại bỏ khoảng trắng, ghi chú và tối ưu hóa cú pháp để tăng tốc độ tải trang web.

Trình Nén CSS

Nén mã CSS ngay lập tức để giảm kích thước tệp lên đến 40% và cải thiện tốc độ tải trang web.

0 ký tự
0 ký tự

Về Việc Nén CSS

Việc nén CSS loại bỏ các ký tự không cần thiết khỏi các tệp CSS mà không thay đổi chức năng, giảm kích thước tệp và cải thiện hiệu suất trang web.

  • Loại bỏ nhận xét, khoảng trắng và ngắt dòng
  • Loại bỏ dấu chấm phẩy và đơn vị không cần thiết
  • Tối ưu hóa giá trị màu sắc và khai báo
  • Cải thiện tốc độ tải trang và xếp hạng SEO
Máy tính tải...
📚

Tài liệu hướng dẫn

Công cụ thu gọn CSS là gì?

Trình thu nhỏ CSS là công cụ thu nhỏ tệp CSS (Cascading Style Sheets) bằng cách loại bỏ các ký tự mà trình duyệt không cần. Công cụ xóa chú thích, khoảng trắng thừa và ngắt dòng, đồng thời rút gọn một số mẫu phổ biến mà không thay đổi cách hiển thị của trang. Kết quả là một tệp nhỏ hơn, giúp trình duyệt tải xuống và phân tích cú pháp nhanh hơn.

CSS được thu nhỏ hoạt động như thế nào

Nhà phát triển web viết CSS kèm chú thích, thụt lề và các dòng trống vì những yếu tố đó giúp mã dễ đọc và chỉnh sửa hơn. Trình duyệt bỏ qua toàn bộ định dạng này. Trình thu nhỏ xóa chúng cùng với một số byte khác không có tác dụng trực quan, để lại một tệp gọn phục vụ triển khai thay vì chỉnh sửa.

Công cụ này thực hiện các thay đổi sau:

  • Xóa chú thích. Mọi khối /* ... */ đều bị xóa.
  • Gộp khoảng trắng. Các chuỗi khoảng trắng, tab và ngắt dòng giữa các quy tắc được giảm về không ký tự, hoặc còn một khoảng trắng duy nhất khi khoảng trắng có ý nghĩa (chẳng hạn giữa .parent và .child trong bộ chọn hậu duệ).
  • Xóa khoảng trắng quanh dấu câu. Các khoảng trắng cạnh {, }, :, ; và , đều bị xóa.
  • Xóa dấu chấm phẩy thừa. Các dấu chấm phẩy lặp lại được gộp thành một, còn dấu chấm phẩy cuối cùng trước } đóng bị xóa.
  • Thu gọn màu hex. Màu sáu chữ số như #ffffff được chuyển thành #fff khi từng cặp chữ số trùng nhau (đỏ, xanh lá và xanh dương). Màu tám chữ số có alpha, chẳng hạn #ffaa00cc, cũng được thu gọn tương tự khi cả bốn cặp đều trùng nhau.
  • Bỏ đơn vị khỏi các giá trị có độ dài bằng không. 0px, 0em và 0rem trở thành 0. Các giá trị phần trăm được giữ nguyên, vì 0% không phải lúc nào cũng có thể thay thế bằng 0 thông thường (chẳng hạn trong bước flex-basis hoặc @keyframes).
  • Bỏ số 0 đứng đầu số thập phân. 0.5 trở thành .5.

Để tránh làm hỏng tệp, công cụ giữ nguyên ba loại nội dung: văn bản bên trong dấu ngoặc kép, giá trị bên trong url() không có dấu ngoặc kép và nội dung của các hàm toán học như calc(), clamp(), min() và max(). Khoảng cách bên trong calc(100% - 20px) có ý nghĩa với trình duyệt, nên công cụ bảo toàn chính xác khoảng cách đó.

Công cụ không gộp các bộ chọn trùng lặp, xóa các khối quy tắc rỗng hoặc chuyển màu rgb() sang hex. Đây là những tối ưu hóa hợp lệ mà các công cụ khác có thể thực hiện, nhưng trình thu nhỏ này tập trung vào các thay đổi được liệt kê ở trên.

Công thức tính phần trăm giảm

Công cụ báo cáo tệp đã nhỏ đi bao nhiêu phần trăm:

1reduction % = ((original length − minified length) / original length) × 100
2

Cả hai độ dài đều được tính bằng số ký tự. Kết quả được làm tròn đến hai chữ số thập phân.

Ví dụ minh họa

CSS ban đầu (193 ký tự):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Kết quả CSS đã thu nhỏ (129 ký tự):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Áp dụng công thức: (193 − 129) / 193 × 100 = 33,16%. Chú thích đã biến mất, phần thụt lề và ngắt dòng cũng vậy, 0px trở thành 0, còn #ffffff/#000000 trở thành #fff/#000.

Phần trăm chính xác phụ thuộc vào đầu vào. CSS được viết gọn với ít chú thích sẽ giảm ít hơn. CSS có nhiều chú thích và thụt lề sâu có thể giảm nhiều hơn. Các biểu định kiểu thông thường được thu nhỏ bằng công cụ này giảm khoảng từ 20% đến 40%.

Cách sử dụng công cụ này

  1. Dán mã CSS vào ô nhập liệu ở bên trái.
  2. Phiên bản CSS đã thu nhỏ tự động xuất hiện ở bên phải, không cần nhấn nút.
  3. Kiểm tra phần trăm giảm hiển thị phía trên kết quả.
  4. Chọn "Copy to Clipboard" để sao chép CSS đã thu nhỏ, rồi dán vào tệp dự án.
  5. Chọn "Clear" để xóa cả hai ô và bắt đầu lại.

Không có nội dung nào được nhập vào công cụ bị gửi đến máy chủ; quá trình thu nhỏ diễn ra trong trình duyệt.

Khi nào nên thu nhỏ CSS

Các nhóm phát triển thường thu nhỏ CSS như một bước trong quy trình build, sử dụng các công cụ như Webpack hoặc các tập lệnh npm, để thay đổi này tự động diễn ra trước mỗi lần triển khai. Tệp nguồn dễ đọc, có chú thích vẫn được lưu trong hệ thống quản lý phiên bản; chỉ bản build production được thu nhỏ. Những nơi thường sử dụng CSS đã thu nhỏ gồm:

  • Các trang web lớn, chẳng hạn cửa hàng trực tuyến, nơi biểu định kiểu nhỏ hơn giúp trang tải nhanh hơn.
  • Các ứng dụng một trang được xây dựng bằng những framework như React hoặc Vue, trong đó CSS được đóng gói cùng JavaScript.
  • Các trang web dành cho thiết bị di động, nơi người dùng có khả năng đang sử dụng kết nối chậm hơn.
  • Email HTML, vốn thường có giới hạn kích thước nghiêm ngặt.

Thu nhỏ CSS và tốc độ trang

Tệp CSS nhỏ hơn được tải xuống và phân tích cú pháp nhanh hơn, nhờ đó có thể rút ngắn thời gian trước khi trang hiển thị. Google đã cho biết tốc độ trang là một trong các tín hiệu được dùng để xếp hạng tìm kiếm, vì vậy trang nhanh hơn có thể là một yếu tố nhỏ trong nhiều yếu tố ảnh hưởng đến hiệu suất của trang web trên kết quả tìm kiếm. Chỉ thu nhỏ CSS không đảm bảo thứ hạng sẽ thay đổi; đây là một trong nhiều tối ưu hóa, cùng với nén hình ảnh và thời gian phản hồi của máy chủ.

Trình thu nhỏ CSS so với trình định dạng CSS

Trình thu nhỏ nén mã để sử dụng trong môi trường production. Trình định dạng làm ngược lại: lấy CSS đã nén rồi định dạng lại bằng thụt lề và ngắt dòng để con người có thể đọc lại. Trình định dạng không thể khôi phục chú thích hoặc tên biến ban đầu đã bị xóa trong quá trình thu nhỏ, vì thông tin đó không còn sau khi bị xóa.

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

CSS nhỏ đi bao nhiêu sau khi thu nhỏ? Với công cụ này, thông thường giảm từ 20% đến 40%, tùy thuộc vào số lượng chú thích, dòng trống và mức độ thụt lề của tệp ban đầu. Tệp vốn có ít định dạng sẽ giảm ít hơn.

Thu nhỏ CSS có thay đổi cách hiển thị của trang không? Không. Việc thu nhỏ chỉ xóa các ký tự mà trình duyệt bỏ qua, chẳng hạn chú thích và khoảng trắng thừa, đồng thời viết lại một số giá trị tương đương (như #ffffff thành #fff). Trang được hiển thị vẫn giữ nguyên.

Có nên thu nhỏ CSS trong quá trình phát triển không? Không. Hãy giữ phiên bản dễ đọc, có chú thích khi viết và gỡ lỗi mã. Chỉ thu nhỏ bản sao được đưa lên máy chủ production, thường là một bước tự động trong quy trình build.

CSS đã thu nhỏ có thể được chuyển lại thành tệp ban đầu không? Trình định dạng có thể định dạng lại CSS đã thu nhỏ bằng thụt lề, nhưng không thể khôi phục các chú thích đã xóa hoặc phục hồi những tên mô tả vốn không có trong phiên bản đã thu nhỏ. Hãy giữ tệp nguồn ban đầu.

Công cụ này có chuyển màu rgb() sang hex hoặc gộp các bộ chọn trùng lặp không? Không. Công cụ rút gọn màu hex và xóa các ký tự không cần thiết, nhưng không viết lại các giá trị rgb()/hsl() hoặc gộp các bộ chọn lặp lại. Một số trình thu nhỏ khác thực hiện thêm những bước đó.

Thu nhỏ có giống nén gzip không? Không. Thu nhỏ xóa các ký tự không cần thiết khỏi chính mã nguồn. Nén gzip (hoặc Brotli) được máy chủ web áp dụng khi gửi tệp, bằng một thuật toán riêng. Sử dụng cả hai cùng nhau tạo ra tệp nhỏ nhất khi truyền qua mạng.