Mục Cơ hội trong danh sách báo cáo Lighthouse tất cả các tệp CSS không được rút gọn, cùng với mức tiết kiệm có thể tính bằng kibibyte (KiB) khi các tệp này được rút gọn:
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. Các 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 còn:
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, nhưng ví dụ thứ hai sử dụng ít byte hơn. Trình 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 số byte.
Ví dụ: bạn có thể giảm giá trị màu #000000 xuống còn #000,
chính là 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
trên các 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à số liệu ước tính thận trọng.
Như đã đề cập trước đó,
trình thu nhỏ có thể thực hiện các bước tối ưu hoá thông minh (chẳng hạn như giảm #000000 xuống #000)
để giảm thêm kích thước tệp.
Vì vậy, nếu sử dụng trình rút gọn,
bạn có thể thấy nhiều thông tin hơn so với số liệu mà Lighthouse báo cáo.
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 cập nhật thường xuyên, bạn có thể sử dụng một dịch vụ trực tuyến để rút gọn tệp theo cách thủ công. Bạn dán CSS của mình vào giao diện người dùng của dịch vụ và nó 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 có thể muốn thiết lập một quy trình làm việc tự động để tự động giảm thiểu CSS của bạn 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 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ệp CSS tổng hợp) trong phần Quản trị > Cấu hình > Phát triển. 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 độ trang web của bạn bằng cách liên kết, giảm kích thước và nén CSS kiểu.
Joomla
Một số tiện ích cục bộ có thể tăng tốc độ trang web của bạn bằng cách nối, giảm kích thước và nén css kiểu. 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 xây 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 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 React Developer Tools tiện ích.
WordPress
Một số trình bổ trợ WordPress có thể giúp bạn tăng tốc độ trang web trang web bằng cách nối, giảm kích thước và nén kiểu. Có thể bạn cũng muốn để sử dụng quy trình tạo nhằm thực hiện trước việc giảm kích thước này, nếu có thể.