Mục Cơ hội trong danh sách báo cáo Lighthouse tất cả các biểu định kiểu có CSS không sử dụng có thể tiết kiệm được từ 2 KiB trở lên. Xoá CSS không dùng đến để giảm số byte không cần thiết mà hoạt động mạng tiêu thụ:
Cách CSS không được sử dụng làm chậm hiệu suất
Sử dụng thẻ <link> là một cách phổ biến để thêm kiểu vào trang:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Tệp main.css mà trình duyệt tải xuống được gọi là biểu định kiểu bên ngoài,
vì mã này được lưu trữ riêng biệt với HTML sử dụng mã.
Theo mặc định, trình duyệt phải tải xuống, phân tích cú pháp và xử lý tất cả các biểu định kiểu bên ngoài mà ứng dụng gặp phải trước khi có thể hiển thị hoặc kết xuất bất kỳ nội dung nào lên màn hình của người dùng. Việc trình duyệt cố gắng hiển thị nội dung sẽ không hợp lý trước khi biểu định kiểu được xử lý, vì biểu định kiểu có thể chứa các quy tắc ảnh hưởng đến kiểu của trang.
Mỗi biểu định kiểu bên ngoài phải được tải xuống từ mạng. Những chuyến đi mạng bổ sung này có thể giúp tăng đáng kể thời gian mà người dùng phải đợi trước khi họ nhìn thấy bất kỳ nội dung nào trên màn hình của mình.
CSS không được sử dụng cũng làm chậm quá trình xây dựng trình duyệt cây kết xuất. Cây kết xuất giống như cây DOM, ngoại trừ việc nó cũng bao gồm các kiểu cho mỗi nút. Để xây dựng cây hiển thị, trình duyệt phải điều hướng toàn bộ cây DOM và kiểm tra xem quy tắc CSS nào áp dụng cho từng nút. Càng có nhiều CSS không được sử dụng, thì trình duyệt càng có thể cần dành nhiều thời gian hơn để tính toán kiểu cho mỗi nút.
Cách phát hiện CSS không được sử dụng
Thẻ Mức độ sử dụng của Công cụ của Chrome cho nhà phát triển có thể giúp bạn tìm hiểu CSS quan trọng và không quan trọng. Xem phần Xem CSS đã sử dụng và không sử dụng qua thẻ Phạm vi sử dụng.
Đặt CSS quan trọng vào cùng dòng và trì hoãn CSS không quan trọng
Tương tự như mã cùng dòng trong thẻ <script>,
kiểu quan trọng cùng dòng bắt buộc cho lần hiển thị đầu tiên
bên trong khối <style> tại head của trang HTML.
Sau đó, tải không đồng bộ các kiểu còn lại bằng đường liên kết preload.
Xem xét tự động hoá quy trình trích xuất và nội dòng "Trong màn hình đầu tiên" Dịch vụ so sánh giá (CSS) bằng Công cụ quan trọng.
Tìm hiểu thêm trong bài viết Hoãn phát CSS không quan trọng.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Hãy cân nhắc việc xoá các quy tắc CSS không dùng đến. Chỉ đính kèm các thư viện Drupal cần thiết vào trang hoặc thành phần có liên quan trên một trang. Xem phần Xác định thư viện để biết thông tin chi tiết.
Joomla
Hãy cân nhắc giảm hoặc chuyển đổi số lượng tiện ích cục bộ tải CSS không dùng đến trên trang của bạn.
WordPress
Hãy cân nhắc giảm hoặc chuyển đổi số lượng trình bổ trợ WordPress tải CSS không dùng đến trong trang của bạn.