Nén CSS và định dạng lại mã CSS: bỏ được gì, giữ lại gì
Công cụ có hai chiều xử lý cho mã CSS bạn dán vào: nén lại bằng cách gỡ chú thích và mọi khoảng trắng không cần thiết, hoặc trải ra thành dạng thụt đầu dòng dễ đọc. Sau khi nén, công cụ hiển thị số ký tự trước và sau cùng tỷ lệ phần trăm đã giảm để bạn biết mức tiết kiệm.
Tính năng nổi bật
- Nén mã CSS bằng cách gỡ toàn bộ khối chú thích và gộp khoảng trắng thừa
- Bỏ khoảng trắng quanh dấu ngoặc nhọn, dấu chấm phẩy, dấu hai chấm và dấu phẩy
- Bỏ dấu chấm phẩy thừa đứng ngay trước dấu ngoặc nhọn đóng
- Chiều ngược lại: trải mã nén thành dạng nhiều dòng có thụt đầu dòng
- Đếm số ký tự trước và sau khi xử lý, kèm tỷ lệ phần trăm đã giảm
- Ô nhập và ô kết quả đặt cạnh nhau để đối chiếu trực tiếp
- Nút sao chép kết quả chỉ bằng một cú bấm
- Xử lý ngay trên trình duyệt, mã CSS của bạn không gửi lên máy chủ nào
Khi nào cần nén CSS bằng tay
Trong một dự án có công cụ dựng bản phát hành, việc nén CSS đã nằm sẵn trong quy trình và bạn không cần công cụ online nào. Nhưng vẫn còn khá nhiều tình huống không có quy trình đó. Trường hợp phổ biến nhất là chèn mã CSS thẳng vào phần đầu tài liệu của một trang trên hệ quản trị nội dung, nơi bạn dán mã vào một ô cấu hình chứ không có tệp để công cụ dựng xử lý. Trường hợp thứ hai là các đoạn CSS đặt trong thư điện tử dạng HTML hoặc trong tệp mẫu của công cụ gửi thư, nơi mọi ký tự đều tính vào dung lượng thư. Trường hợp thứ ba là khi bạn nhận một tệp CSS đã nén từ bên khác và cần đọc hiểu để sửa — lúc đó chiều ngược lại của công cụ mới là thứ bạn cần. Trường hợp thứ tư đơn giản là kiểm tra nhanh xem một tệp CSS thực sự nặng vì nội dung hay chỉ vì trình bày, con số phần trăm giảm sẽ trả lời ngay.
Lợi ích khi sử dụng
- Giảm số ký tự cho các đoạn CSS chèn thẳng vào trang mà không qua công cụ dựng
- Đọc được mã CSS đã nén nhận từ bên khác nhờ chiều trải ngược lại
- Biết ngay tỷ lệ phần trăm tiết kiệm để đánh giá có đáng nén hay không
- Không phải cài thêm gì trên máy chỉ để xử lý một đoạn mã
- Mã nguồn không rời khỏi trình duyệt nên dùng được với dự án nội bộ
Cách nén hoặc trải lại mã CSS
- 1Dán toàn bộ mã CSS vào ô bên trái, có thể dán cả tệp chứ không cần cắt nhỏ.
- 2Bấm Minify CSS để nén, hoặc bấm Beautify CSS nếu bạn đang cần trải mã nén ra cho dễ đọc.
- 3Đọc khối thống kê bên dưới để biết số ký tự trước sau và tỷ lệ đã giảm.
- 4Đối chiếu nhanh phần đầu và phần cuối kết quả để chắc chắn không có dấu ngoặc nào bị mất.
- 5Bấm sao chép rồi dán vào nơi cần, và luôn giữ lại bản gốc chưa nén ở một chỗ khác.
Công cụ gỡ chính xác những gì
Bước đầu tiên là xóa mọi khối chú thích nằm giữa cặp dấu mở và đóng chú thích của CSS, kể cả chú thích nhiều dòng. Bước hai gộp mọi chuỗi khoảng trắng liên tiếp, gồm cả dấu xuống dòng và dấu tab, thành một dấu cách duy nhất. Bước ba xóa khoảng trắng nằm ngay trước và sau bốn ký tự cấu trúc là dấu ngoặc nhọn mở, dấu ngoặc nhọn đóng, dấu chấm phẩy và dấu hai chấm. Bước bốn làm tương tự với dấu phẩy, thứ xuất hiện nhiều trong danh sách bộ chọn và trong danh sách phông chữ. Bước cuối xóa dấu chấm phẩy đứng ngay trước dấu ngoặc nhọn đóng, vì khai báo cuối cùng trong một khối không bắt buộc phải có dấu chấm phẩy. Đó là toàn bộ những gì công cụ làm. Kết quả là một chuỗi dài không xuống dòng, hoàn toàn hợp lệ với trình duyệt vì CSS không quan tâm tới định dạng trình bày. Chiều ngược lại thì làm điều đối lập: chèn dấu xuống dòng sau mỗi dấu chấm phẩy và mỗi dấu ngoặc nhọn, thêm hai dấu cách thụt đầu dòng cho các khai báo bên trong khối.
Nén xong rồi gzip nữa thì tiết kiệm được bao nhiêu
Đây là chỗ hay bị hiểu sai nhất về việc nén mã. Máy chủ web ngày nay gần như luôn bật nén ở tầng truyền tải bằng gzip hoặc brotli, và cơ chế của hai thuật toán này là thay thế các chuỗi lặp lại bằng tham chiếu ngắn. Khoảng trắng, dấu xuống dòng và các chuỗi thụt đầu dòng lặp đi lặp lại chính là loại dữ liệu mà chúng nén hiệu quả nhất. Nghĩa là phần lớn khoản tiết kiệm mà bạn thấy trong con số phần trăm ở đây đã được tầng truyền tải thu về rồi, và khoản tiết kiệm tăng thêm nhờ nén mã trước thường nhỏ hơn nhiều so với con số hiển thị. Kết luận thực dụng: nếu máy chủ của bạn đã bật nén truyền tải, việc nén CSS bằng tay không phải là thứ đáng ưu tiên. Điều đáng ưu tiên hơn nhiều là giảm lượng CSS thật sự được tải: gỡ các quy tắc không dùng tới, tách phần CSS cần thiết cho khung nhìn đầu tiên ra để chèn thẳng vào trang, và tải phần còn lại sau. Trước khi tối ưu, hãy kiểm tra máy chủ đã bật nén truyền tải chưa, đó mới là việc cho kết quả lớn nhất với công sức nhỏ nhất.
Bốn tình huống công cụ có thể làm hỏng CSS của bạn
Vì đây là bộ xử lý dựa trên tìm và thay chuỗi chứ không phải bộ phân tích cú pháp CSS thực thụ, nó không phân biệt được đâu là cấu trúc mã và đâu là nội dung văn bản. Thứ nhất là chuỗi trong thuộc tính content: một khai báo có nội dung gồm dấu phẩy và khoảng trắng sẽ bị gộp lại, làm đổi đúng chữ hiển thị trên trang. Thứ hai là địa chỉ dữ liệu nhúng trong hàm url, đặc biệt là ảnh SVG viết dạng văn bản thuần chưa mã hóa; chuỗi đó chứa đầy khoảng trắng, dấu hai chấm và dấu phẩy có ý nghĩa, và sau khi nén thì ảnh không hiện nữa. Thứ ba là chú thích nằm bên trong một chuỗi văn bản, sẽ bị hiểu nhầm là chú thích thật và bị cắt mất. Thứ tư, cũng đáng chú ý nhất về mặt pháp lý: nhiều thư viện CSS của bên thứ ba đặt thông tin giấy phép và bản quyền trong một khối chú thích ở đầu tệp, và giấy phép thường yêu cầu giữ lại thông báo đó khi phân phối lại. Công cụ này xóa mọi chú thích không chừa cái nào, nên với mã của bên thứ ba, hãy chép lại khối chú thích giấy phép và dán trở lại lên đầu kết quả.
Những tối ưu mà công cụ này không làm
Các bộ nén CSS chuyên dụng làm nhiều hơn việc bỏ khoảng trắng, và biết chúng làm gì giúp bạn ước lượng đúng khoảng cách. Chúng rút gọn mã màu, đưa dạng sáu ký tự về dạng ba ký tự khi có thể và đổi tên màu dài thành mã ngắn hơn. Chúng bỏ đơn vị sau số không, vì không pixel và không đều là không. Chúng rút gọn các giá trị viết tắt, chẳng hạn bốn giá trị lề giống nhau gộp về một. Chúng gộp các quy tắc trùng bộ chọn và loại bỏ khai báo bị ghi đè ngay sau đó trong cùng khối. Chúng sắp xếp lại thứ tự khai báo trong mỗi khối theo một quy ước cố định, việc này không giảm dung lượng gốc nhưng làm mã nén tốt hơn ở tầng truyền tải vì tạo ra nhiều chuỗi lặp hơn. Ngoài ra chúng còn tự thêm hoặc gỡ tiền tố nhà cung cấp theo danh sách trình duyệt mục tiêu bạn khai báo. Công cụ này không làm bất kỳ điều nào trong số đó, nên với dự án thật, một công cụ nén chuyên dụng chạy trong quy trình dựng vẫn cho kết quả tốt hơn đáng kể.
Quy trình đúng khi dự án đã đủ lớn
Nguyên tắc quan trọng nhất là không bao giờ sửa trực tiếp trên bản đã nén. Bản nén là sản phẩm đầu ra, phải sinh lại được từ bản gốc bất cứ lúc nào; nếu bạn sửa trên bản nén thì lần dựng sau sẽ ghi đè mất, còn nếu không có bản gốc thì bạn mất khả năng bảo trì. Trong dự án thật, hãy để công cụ dựng tự nén và tự sinh tệp bản đồ nguồn, thứ cho phép công cụ dành cho nhà phát triển của trình duyệt chỉ ra dòng nào trong tệp gốc ứng với đoạn mã đang chạy — thiếu nó thì gỡ lỗi trên bản nén gần như bất khả thi. Nếu bạn buộc phải dùng công cụ online, hãy giữ bản gốc trong hệ quản lý phiên bản và coi bản nén như tệp sinh ra, đừng đưa vào kho mã. Cuối cùng, sau mỗi lần nén thủ công phải kiểm tra lại giao diện thật trên trình duyệt, tối thiểu là các trang có dùng thuộc tính content, có ảnh nhúng dạng địa chỉ dữ liệu và có hoạt ảnh, vì đó là ba chỗ dễ hỏng nhất mà mắt không phát hiện qua việc đọc mã.
Câu hỏi thường gặp (FAQ)
Nén CSS có làm thay đổi cách hiển thị không?
Về nguyên tắc là không, vì CSS bỏ qua khoảng trắng giữa các thành phần cú pháp và chú thích không có tác dụng gì khi chạy. Ngoại lệ là khi khoảng trắng nằm bên trong một chuỗi văn bản hoặc bên trong địa chỉ dữ liệu nhúng, những chỗ đó khoảng trắng có ý nghĩa và việc nén sẽ làm sai.
Vì sao ảnh SVG nhúng của tôi biến mất sau khi nén?
Vì ảnh SVG viết dạng văn bản thuần trong hàm url chứa nhiều khoảng trắng, dấu hai chấm và dấu phẩy mang ý nghĩa, và công cụ gộp chúng lại như với mã thường. Cách xử lý là mã hóa chuỗi SVG theo quy tắc địa chỉ web trước, hoặc chuyển sang dạng base64, rồi mới nén.
Chú thích giấy phép ở đầu tệp có bị xóa không?
Có, công cụ xóa mọi khối chú thích không chừa cái nào. Với thư viện CSS của bên thứ ba, giấy phép thường yêu cầu giữ lại thông báo bản quyền khi phân phối lại. Hãy chép khối chú thích đó ra trước khi nén rồi dán trở lại lên đầu kết quả.
Nén CSS giúp trang nhanh hơn bao nhiêu?
Ít hơn bạn tưởng nếu máy chủ đã bật nén truyền tải bằng gzip hoặc brotli, vì hai thuật toán đó vốn nén rất hiệu quả các chuỗi khoảng trắng lặp lại. Việc đáng làm hơn là giảm lượng CSS thật sự tải về, tức gỡ các quy tắc không dùng và tách phần cần thiết cho khung nhìn đầu tiên.
Nút Beautify có trải lại mã đã nén ở ô kết quả không?
Không. Cả hai nút đều đọc nội dung ở ô nhập bên trái chứ không xử lý tiếp lên ô kết quả. Muốn trải một đoạn mã đã nén, hãy dán chính đoạn đó vào ô bên trái rồi bấm Beautify, đừng bấm nối tiếp sau khi vừa nén.
Công cụ có rút gọn mã màu và bỏ đơn vị sau số không?
Không. Nó chỉ gỡ chú thích và khoảng trắng thừa. Các bộ nén chuyên dụng còn rút mã màu sáu ký tự về ba ký tự khi được, bỏ đơn vị sau số không, gộp giá trị viết tắt và loại bỏ khai báo bị ghi đè. Đó là lý do kết quả của chúng nhỏ hơn kết quả ở đây.
Có nén được tệp CSS rất lớn không?
Được về mặt kỹ thuật, nhưng vì mọi thứ chạy trong bộ nhớ trang nên tệp cỡ vài trăm nghìn ký tự sẽ khiến trình duyệt khựng vài giây. Với tệp lớn, cách hợp lý hơn là dùng một công cụ nén chạy trong quy trình dựng của dự án thay vì xử lý thủ công qua trình duyệt.
Nên lưu bản nén hay bản gốc vào kho mã?
Luôn lưu bản gốc và coi bản nén là tệp sinh ra. Sửa trực tiếp trên bản nén là sai lầm tốn kém: lần dựng sau sẽ ghi đè mất công sức, và nếu bản gốc thất lạc thì bạn mất luôn khả năng bảo trì đoạn mã đó về sau.
Tệp bản đồ nguồn là gì và có cần không?
Đó là tệp ánh xạ từng vị trí trong mã đã nén về đúng dòng trong tệp gốc, giúp công cụ dành cho nhà phát triển của trình duyệt chỉ ra chỗ cần sửa. Rất cần khi bạn phải gỡ lỗi giao diện trên bản phát hành. Công cụ online không tạo được tệp này, chỉ công cụ dựng mới làm được.
Sau khi nén nên kiểm tra những gì?
Ba chỗ dễ hỏng nhất là các quy tắc dùng thuộc tính content vì chuỗi văn bản có thể bị đổi, các ảnh nhúng dạng địa chỉ dữ liệu, và các hoạt ảnh có khai báo khung hình. Hãy mở trang thật trên trình duyệt xem lại, đừng chỉ đọc mã vì lỗi loại này không nhìn ra bằng mắt.
Nén CSS có ảnh hưởng tới thứ hạng tìm kiếm không?
Chỉ gián tiếp qua tốc độ tải trang, mà tốc độ là một yếu tố trong nhóm chỉ số trải nghiệm trang. Tuy nhiên phần khoảng trắng chiếm tỷ trọng nhỏ trong thời gian tải; ảnh chưa tối ưu, mã JavaScript nặng và thời gian phản hồi của máy chủ mới là những thứ ảnh hưởng rõ rệt hơn nhiều.
Mã CSS tôi dán vào có được gửi đi đâu không?
Không. Cả hai chiều xử lý đều chạy bằng JavaScript ngay trên trình duyệt của bạn, không có bước gọi máy chủ và không có gì được lưu lại sau khi bạn đóng tab. Vì vậy dùng được với mã nguồn của dự án nội bộ chưa công bố.
Từ khóa liên quan
- nén css online
- css minifier online
- minify css
- định dạng lại css
- beautify css online
- giảm dung lượng file css
- tối ưu tốc độ tải trang
- gzip và brotli
- nén truyền tải trên máy chủ
- loại bỏ css không dùng
- critical css là gì
- cssnano postcss
- source map là gì
- rút gọn mã màu css
- css trong email html
- chèn css vào wordpress
- core web vitals tốc độ
- công cụ tối ưu frontend
- đọc file css đã nén
- công cụ developer online miễn phí
