Giảm thiểu, thu nhỏ kích cỡ file CSS (Minify CSS)

giảm thiểu CSS

Giảm thiểu CSS là gì?

Giảm thiểu CSS đúng như tên của nó ngụ ý…nó làm cho các chỉ dẫn CSS nhỏ hơn. Khi lần đầu tiên tôi viết bài này cách đây nhiều 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 đã 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ì một số thứ cần phải thay đổi.

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 lẹ CSS nhiều nhất có thể, vì thế mà website của bạn tải được nhanh hơn.

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ân phối CSS: https://varvy.com/tools/css-delivery/

Giao diện WordPress và CSS

Nguyên nhân phổ biến nhất 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 cấ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, 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 sáng sủa thì các đoạn mã CSS cho phần chìm có thể vẫn được tải? Điều đó có khả năng là vài trăm dòng mã.

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ọn lựa màu “hồng” 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 ở đó.

Giảm thiểu 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 đó. 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.

Nó không chỉ là WordPress mà thôi

Bước đầu tiên chính xác để 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.

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 dư thừa không cần thiết. Dưới đây là hai công cụ tôi từng sử dụng:

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ã, 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 (inline, 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.

(Dịch từ bài viết Minify CSS – Tác giả: Patrick Sexton)

Leave a Comment

Your email address will not be published. Required fields are marked *