Xoá CSS không dùng đến

Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả các biểu định kiểu có CSS không được 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 sử dụng:

Ảnh chụp màn hình bài kiểm tra Lighthouse Xoá CSS không dùng đến

Cách CSS không dùng đến làm chậm hiệu suất

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ì tệp này được lưu trữ riêng biệt với HTML sử dụng biểu định kiểu này.

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ả biểu định kiểu bên ngoài mà trình duyệt gặp phải trước khi có thể hiển thị hoặc hiển thị bất kỳ nội dung nào trên màn hình của người dùng. Trình duyệt sẽ không hợp lý khi cố gắng hiển thị nội dung trước khi các biểu định kiểu được xử lý, vì các 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ể làm tăng đáng kể thời gian mà người dùng phải đợi trước khi xem bất kỳ nội dung nào trên màn hình.

CSS không sử dụng cũng làm chậm quá trình xây dựng cây kết xuất của trình duyệt. Cây hiển thị giống như cây DOM, ngoại trừ việc cây này 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 qua 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, trình duyệt càng có nhiều thời gian để 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ẻ Phạm vi sử dụng của Công cụ của Chrome cho nhà phát triển có thể giúp bạn khám phá các CSS quan trọng và chưa quan trọng. Hãy xem nội dung Xem CSS đã sử dụng và không sử dụng qua thẻ Phạm vi áp dụng.

Công cụ của Chrome cho nhà phát triển: thẻ Mức độ phù hợp
Công cụ của Chrome cho nhà phát triển: thẻ Mức độ phù hợp.

Cùng dòng CSS quan trọng và trì hoãn CSS không quan trọng

Tương tự như mã cùng dòng trong thẻ <script>, các kiểu quan trọng cùng dòng bắt buộc phải có cho lần hiển thị đầu tiên bên trong khối <style>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.

Hãy cân nhắc việc tự động hoá quy trình trích xuất và chèn CSS "Trong màn hình đầu tiên" bằng công cụ Quan trọng.

Tìm hiểu thêm trong bài viết Trì hoãn 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 liên quan trên trang. Hãy 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 Joomla 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ợ của WordPress tải CSS không dùng đến trong trang của bạn.

Tài nguyên