Khu vực Opportunities (cơ hội) của báo cáo Lighthouse sẽ liệt kê tất cả các stylesheets gồm CSS không sử dụng- với tiềm năng tiết kiệm được từ 2 KB trở lên. Loại bỏ CSS không sử dụng giúp giảm lượng bytes (dữ liệu) không cần thiết tiêu thụ bởi hoạt động mạng:
#1. CSS không sử dụng làm chậm website như thế nào?
Sử dụng thẻ link là cách thức phổ biến để thêm style vào trang web:
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet">
...file main.css mà trình duyệt tải xuống còn được biết đến với tên gọi stylesheet ngoài (external), bởi vì nó được lưu trữ tách biệt với tài liệu HTML sử dụng nó.
Theo mặc định, trình duyệt phải tải, phân tích cú pháp (parse), và xử lý tất cả các stylesheets ngoài mà trình duyệt gặp trước khi nó có thể hiển thị (hay còn gọi là render / kết xuất) bất cứ nội dung nào trên mình hình người dùng. Sẽ không có ý nghĩa khi trình duyệt cố gắng hiển thị nội dung trước khi stylesheets được xử lý, bởi vì stylesheets có thể bao gồm các quy tắc ảnh hưởng đến style của trang.
Từng stylesheet bên ngoài phải được tải xuống từ internet. Những vòng lặp mạng bổ sung này có thể làm gia tăng đáng kể thời gian mà người dùng phải đợi trước khi thấy bất kỳ nội dung nào trên màn hình của họ.
CSS không sử dụng cũng làm chậm quá trình xây dựng cây render của trình duyệt. Cây render giống như cây DOM, ngoại trừ việc nó còn bao gồm cả style cho mỗi nút (node). Để xây dựng cây render, trình duyệt phải đi qua toàn bộ cây DOM, và kiểm tra CSS nào được áp dụng cho mỗi nút. Có càng nhiều CSS không sử dụng, thì trình duyệt càng mất nhiều thời gian (vô ích) dùng để tính toán style cho mỗi nút.
#2. Làm thế nào xác định được CSS không sử dụng
Tab coverage của Chrome DevTools (công cụ cho nhà phát triển, được tích hợp sẵn trên trình duyệt Chrome) có thể giúp bạn phát hiện ra được CSS quan trọng và CSS không quan trọng.
Bạn cũng có thể trích xuất thông tin này từ Puppeteer. Xem thêm page.coverage
#3. Nội tuyến CSS quan trọng và trì hoãn CSS không quan trọng
Tương tự việc bạn nội tuyến (inline) mã JS vào trong thẻ <script>, nội tuyến CSS quan trọng (critical CSS) là yêu cầu cần thiết cho mục tiêu giảm thiểu thời gian có được nội dung thuộc màn hình đầu tiên. Bạn làm điều này bằng cách đưa CSS vào trong khối <style> thuộc phần head của trang HTML. Sau đó bạn tải style còn lại theo cách không đồng bộ, sử dụng link preload.
Xem xét việc sử dụng biện pháp tự động để xử lý việc trích xuất và nội tuyến CSS “trong màn hình đầu tiên” bằng công cụ như Critical tool.
Tìm hiểu thêm bài viết: trì hoãn tải CSS không quan trọng (non-critical CSS).
(Dịch từ bài viết: Remove unused CSS, trên trang web[.]dev)
anh ơi cho e hỏi, website của em bị google speed insight báo “Xóa biểu định kiểu xếp chồng (CSS) không dùng”, em sử dụng nội tuyến CSS quan trọng kết hợp với <link rel="preload" rồi nhưng vẫn không khắc phục được lỗi này, anh có bài viết nào hướng dẫn khắc phục lỗi này không ạ? Em cảm ơn ạ.
Lỗi CSS không sử dụng rất khó khắc phục trong WordPress bạn à (bạn có thể tham khảo bài viết sau: https://kiencang.net/css-khong-su-dung-wordpress/). Nói chung giao diện càng phức tạp, dùng nhiều plugin thì các CSS chồng chéo nhau càng dễ xảy ra và khó cho chúng ta biết trang đang dùng CSS nào, dư thừa CSS nào để mà loại bỏ. Tuy nhiên vẫn có tia hy vọng ở chỗ là về tổng thể thì các trang WordPress chỉ sử dụng một vài kiểu trang, và chúng thường có CSS chung. Giải pháp mà tôi nghĩ đến đó là trước hết không gom gộp CSS vội (thí dụ tạm thời không dùng plugin kiểu Autoptimize), sau đó dùng công cụ để kiểm tra một kiểu trang nào đó có CSS nào đang dư và tiếp đến dùng plugin Perfmatters để vô hiệu hóa CSS trên kiểu trang tương ứng. Lý thuyết có vẻ khá đơn giản vậy, nhưng về mặt thực hành tôi cần thử và tìm hiểu kỹ mới có thể nói sâu hơn được. Hy vọng sớm viết được bài hướng dẫn.