Vài lời của người dịch: nếu bạn đã sử dụng các theme được viết tốt thì minify CSS đã được giải quyết ngay từ bước đầu. Ngoài ra các plugin cache cũng hỗ trợ tốt việc này. Thêm vào đó nữa các giải pháp nén mặc định (có ở hầu hết các hosting) cũng làm vấn đề này chẳng có gì nghiêm trọng. Nên bài viết này sẽ cho bạn cái nhìn lý thuyết nhiều hơn, còn thực tế trong hầu hết các trường hợp, bạn không cần phải làm gì đâu. Cứ để yên cho các công cụ thực hiện nhiệm vụ của nó!
#1. Minify CSS là gì?
Minify CSS đúng như tên của nó ngụ ý, nó làm cho các đoạn mã chỉ dẫn CSS nhỏ gọn hơn.
Khi lần đầu tiên tôi viết bài này cách đây vài năm, tôi chủ yếu nghĩ về cách làm thế nào để các file CSS hiện có của bạn nhỏ hơn thông qua công cụ trực tuyến, nhưng thời gian đã làm tôi thay đổi ý nghĩ đấy.
Giờ thì tôi đã biết giảm thiểu CSS thực sự có nghĩa là bạn cần biết rõ tất cả các file CSS bạn sử dụng, nếu bạn không nắm rõ thì sẽ mệt đấy!
Vì tất cả các file CSS về bản chất đều chặn hiển thị cho nên điều quan trọng là phải thu nhỏ và làm gọn nhẹ CSS nhiều nhất có thể, nhờ thế mà website của bạn tải nhanh hơn.
Hãy kiểm tra cách sử dụng CSS trên trang của bạn qua công cụ phân tích phổ biến như PageSpeed Insights.
#2. Giao diện WordPress và CSS
Nguyên nhân hàng đầu khiến cho CSS trở nên quá nhiều là khi bạn mua một giao diện WordPress đẹp của một thương hiệu mới. Nó bóng bẩy và đáng yêu. Nhưng nhiều vấn đề có thể nằm bên dưới…
Nhiều giao diện WordPress có cả phần nổi và chìm. Trong kịch bản này bạn chọn được phần nổi sáng sủa, và mọi thứ trông có vẻ tuyệt vời.
Nhưng đợi đã…Bạn có biết rằng ngay cả khi bạn đã chọn được phần nổi (bề ngoài) lung linh thì các đoạn mã CSS cho phần chìm có thể vẫn được tải về? Điều đó có khả năng là vài trăm dòng mã.
Chẹp chẹp. Giờ hãy nghĩ về điều này…Nếu giao diện của bạn cung cấp cả tá màu sắc, bạn có cần tải CSS cho tất cả tá màu sắc đó không? Hiện tại chúng ta có thể có hàng ngàn các chỉ dẫn CSS không hữu dụng. Chẹp một lần nữa.
Điều phổ biến là các giao diện WordPress tải hàng ngàn chỉ dẫn CSS mà chúng không được sử dụng. Bạn có thể chỉ đang chọn lựa màu “hồng” cho trang nhưng chỉ dẫn CSS cho màu xanh, đỏ, trắng, đen, tím, vân vân vẫn tồn tại ở đó mà chẳng dùng vào việc gì!
Lời khuyên để chọn được theme WordPress tốt là:
- Chọn từ nhà cung cấp uy tín;
- Có nhiều người sử dụng;
- Được review tốt;
- Chọn giao diện chuyên cho tốc độ nếu bạn muốn (ví dụ theme GeneratePress).
#3. Minify có nghĩa là làm cho nó nhỏ hơn
Nếu giao diện của bạn tải tất cả CSS đó nhưng bạn không sử dụng đến nó, điều đó có nghĩa là nhiều đoạn mã trong số đó có thể xóa đi. Hy vọng của tôi là các tác giả viết theme WordPress sẽ hiểu rõ điều này.
Nhưng nếu bạn đã mua một giao diện từ đâu đó hoặc ai đó trên mạng, hãy đảm bảo rằng cần phải loại bỏ các CSS mà bạn không sử dụng đến.
#4. Nó không chỉ là WordPress mà thôi
Bước chính xác đầu tiên để giảm thiểu CSS là cần đảm bảo rằng bạn không tải CSS mà bạn không sử dụng. Thông tin này sẽ thường chỉ có được từ chính người viết giao diện.
#5. Làm thế nào để giảm thiểu các mã CSS đã tồn tại
Ngay cả khi bạn không thể tìm ra tất cả các chỉ dẫn CSS không hữu dụng trong đoạn mã của mình, bạn vẫn cần sử dụng công cụ giảm thiểu CSS để ít nhất loại bỏ phần nào đó những phần dư thừa không cần thiết. Dưới đây là hai công cụ tôi từng sử dụng:
#6. Ví dụ về giảm thiểu CSS
Bên dưới là một số chỉ dẫn CSS được định dạng với rất nhiều khoảng trống (dù điều này tốt cho việc viết mã, đọc mã, nhưng nó không tối ưu về dung lượng file)…
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}Bạn có thể copy đoạn mã trên và paste nó vào một công cụ trực tuyến và sẽ thấy mã kết quả trông giống như thế này:
body {background-color:#d0e4fe;}
h1 {color:orange;text-align:center;}Giảm thiểu CSS là làm nhỏ kích cỡ file, và cũng có thể có các cải tiến khác được thêm vào, đặc biệt là khi sử dụng các file CSS dung lượng lớn. Do CSS của bạn có kích cỡ nhỏ hơn và tối ưu tốt hơn, trang của bạn sẽ được tải nhanh hơn.
Không thành vấn đề là bạn sử dụng CSS như thế nào (dù là inline/nội tuyến, file ngoài, hay kết hợp các file ngoài), kích cỡ CSS nhỏ hơn luôn tốt hơn và sẽ giúp trang web của bạn tải nhanh hơn.
PS: tính năng giảm thiểu CSS có mặt ở tất cả các plugin cache thương mại (ví dụ LiteSpeed cache, WP-Rocket, Swift Performance). Việc sử dụng tính năng này không phải lúc nào cũng có ích, đặc biệt là trên các giao diện, plugin đã được viết mã tốt- vì lúc này các tối ưu thêm sẽ hầu như không có ích gì nhưng lại làm tăng thời gian xử lý để có thể tạo ra cache & preload cache (tạo trước cache). Xem thêm: bạn có thể bỏ gộp, minify CSS nếu muốn.
(Dịch từ bài viết Minify CSS – Tác giả: Patrick Sexton)