Phần Cơ hội của báo cáo Lighthouse liệt kê tất cả các tệp CSS chưa được ưu tiên, cùng với các khoản tiết kiệm có thể tính bằng kibibyte (KiB) khi các tệp này được giảm thiểu:
Việc rút gọn tệp CSS có thể cải thiện hiệu suất như thế nào
Việc giảm thiểu 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 kích thướ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:
h1,
h2 {
background-color: #000000;
}
Từ góc độ của trình duyệt, 2 mã mẫu này có chức năng tương đương nhau, nhưng ví dụ thứ hai sử dụng ít byte hơn. Bộ thu nhỏ có thể cải thiện hiệu quả byte hơn nữa bằng cách xoá khoảng trắng:
h1,
h2 {
background-color: #000000;
}
Một số trình thu nhỏ sử dụng các thủ thuật thông minh để giảm thiểu byte.
Ví dụ: giá trị màu #000000 có thể được giảm thêm thành #000, đây là giá trị viết tắt tương đương.
Lighthouse cung cấp số liệu ước tính về số tiền có thể tiết kiệm được dựa trên nhận xét và ký tự khoảng trắng mà công cụ này tìm thấy trong CSS của bạn.
Đây là ước tính thận trọng.
Như đã đề cập trước đó, trình thu nhỏ 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 nhiều 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 nhiều hơn so với những gì Lighthouse báo cáo.
Sử dụng trình rút gọn CSS để giảm kích thước mã CSS
Đối với các trang web nhỏ mà bạn không cập nhật thường xuyên, bạn có thể sử dụng một dịch vụ trực tuyến để giảm kích thước 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à hệ thống sẽ trả về phiên bản mã rút gọn.
Đố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 giúp tự động giảm kích thước CSS trước khi triển khai mã cập nhật. Điều 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 giảm kích thước mã CSS trong bài viết Rút gọn CSS.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Bật Aggregate CSS files (Tổng hợp các tệp CSS) trong phần Quản trị > Configuration > Development (Quản trị viên > Cấu hình). Bạn cũng có thể định cấu hình các tuỳ chọn tổng hợp nâng cao hơn thông qua các mô-đun bổ sung để tăng tốc độ của trang web bằng cách nối, giảm kích thước và nén các kiểu CSS.
Joomla
Một số tiện ích Joomla có thể làm tăng tốc độ của trang web bằng cách nối, giảm kích thước và nén 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.
Thể hiện cảm xúc
Nếu hệ thống xây dựng của bạn tự động giảm thiểu các tệp CSS, hãy đảm bảo rằng bạn đang triển khai bản dựng 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ể tăng tốc trang web của bạn bằng cách ghép, giảm kích thước và nén các kiểu. Bạn cũng nên sử dụng quy trình tạo bản dựng để tiến hành rút gọn trước nếu có thể.