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)
Comments are closed.