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:
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ể.