Giảm thiểu CSS

Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả các tệp CSS chưa được rút gọn, cùng với lượng dữ liệu có thể tiết kiệm được tính bằng kibibyte (KiB) khi các tệp này được rút gọn:

Ảnh chụp màn hình bài kiểm tra CSS Giảm thiểu bằng Lighthouse

Cách giảm thiểu kích thước tệp CSS có thể cải thiện hiệu suất

Việc rút gọn tệp CSS có thể cải thiện hiệu suất tải trang. Tệp CSS thường lớn hơn mức cần thiết. Ví dụ:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Có thể giảm xuống còn:

h1,
h2 {
  background-color: #000000;
}

Từ quan điểm của trình duyệt, 2 mẫu mã này có chức năng tương đương, nhưng ví dụ thứ hai sử dụng ít byte hơn. Trình rút gọn có thể cải thiện hiệu quả về byte bằng cách xoá khoảng trắng:

h1,
h2 {
  background-color: #000000;
}

Một số trình rút gọn sử dụng các thủ thuật thông minh để giảm thiểu số byte. Ví dụ: bạn có thể giảm giá trị màu #000000 xuống còn #000, tương đương với cách viết tắt của nó.

Lighthouse cung cấp số liệu ước tính về các khoản tiền có thể tiết kiệm được dựa trên các nhận xét và ký tự khoảng trắng tìm thấy trong CSS của bạn. Đây là số liệu ước tính thận trọng. Như đã đề cập trước đó, trình rút gọn có thể thực hiện các hoạt động tối ưu hoá thông minh (chẳng hạn như giảm #000000 xuống #000) để giảm kích thước tệp hơn nữa. Vì vậy, nếu sử dụng trình rút gọn, bạn có thể thấy mức tiết kiệm lớn hơn so với báo cáo của Lighthouse.

Sử dụng trình rút gọn CSS để giảm kích thước mã CSS của bạn

Đối với các trang web nhỏ mà bạn không thường xuyên cập nhật, bạn có thể sử dụng dịch vụ trực tuyến để rút gọn tệp theo cách thủ công. Bạn dán CSS vào giao diện người dùng của dịch vụ và dịch vụ này sẽ trả về một phiên bản rút gọn của mã.

Đối với các nhà phát triển chuyên nghiệp, bạn nên thiết lập quy trình làm việc tự động để tự động rút gọn CSS trước khi triển khai mã đã cập nhật. Việc này thường được thực hiện bằng một công cụ xây dựng như Gulp hoặc Webpack.

Tìm hiểu cách rút gọn mã CSS trong phần Rút gọn CSS.

Hướng dẫn dành riêng cho ngăn xếp

Drupal

Đảm bảo bạn đã bật tuỳ chọn "Aggregate CSS files" (Tổng hợp các tệp CSS) trên trang "Administration » Configuration » Development" (Quản trị » Cấu hình » Phát triển).

Joomla

Một số tiện ích Joomla có thể làm tăng tốc độ của trang web bằng cách ghép nối, giảm kích thước và nén các kiểu CSS. Ngoài ra, còn có các mẫu cung cấp chức năng này.

Magento

Bật tuỳ chọn Rút gọn tệp CSS trong phần cài đặt dành cho Nhà phát triển của cửa hàng.

Phản ứng

Nếu hệ thống bản dựng của bạn tự động giảm kích thước tệp CSS, hãy đảm bảo rằng bạn đang triển khai bản phát hành chính thức của ứng dụng. Bạn có thể kiểm tra điều này bằng tiện ích React Developer Tools.

WordPress

Một số trình bổ trợ của WordPress có thể làm tăng tốc độ của trang web bằng cách ghép, giảm kích thước và nén kiểu. Bạn cũng nên sử dụng quy trình xây dựng để tiến hành thu nhỏ trước nếu có thể.

Tài nguyên