Tìm hiểu cách cải thiện thời gian hiển thị bằng kỹ thuật CSS quan trọng.
Trình duyệt phải tải xuống và phân tích cú pháp các tệp CSS trước khi có thể hiển thị trang. Điều này khiến CSS trở thành tài nguyên chặn hiển thị. Nếu tệp CSS có kích thước lớn hoặc điều kiện mạng kém, thì các yêu cầu đối với tệp CSS có thể làm tăng đáng kể thời gian cần thiết để trang web hiển thị.
Việc chèn cùng dòng các kiểu được trích xuất trong <head> của tài liệu HTML giúp bạn không cần thực hiện yêu cầu bổ sung để tìm nạp các kiểu này. Phần còn lại của CSS có thể được tải không đồng bộ.
Việc cải thiện thời gian hiển thị có thể tạo ra sự khác biệt lớn về hiệu suất cảm nhận, đặc biệt là trong điều kiện mạng kém. Trên các mạng di động, độ trễ cao là một vấn đề bất kể băng thông là bao nhiêu.
Nếu bạn có Nội dung đầu tiên (FCP) kém và thấy phần "Loại bỏ tài nguyên chặn hiển thị" cơ hội trong kiểm tra Lighthouse, bạn nên thử CSS quan trọng.
Để giảm thiểu số lượt khứ hồi để kết xuất lần đầu, hãy cố gắng giữ cho nội dung trong màn hình đầu tiên có kích thước dưới 14 KB (nén).
Hiệu suất mà bạn có thể đạt được bằng kỹ thuật này phụ thuộc vào loại trang web của bạn. Nói chung, trang web càng có nhiều CSS thì mức độ ảnh hưởng của CSS cùng dòng càng lớn.
Tổng quan về công cụ
Có một số công cụ hữu ích có thể tự động xác định CSS quan trọng cho một trang. Đây là tin tốt vì nếu thực hiện việc này theo cách thủ công sẽ là một quá trình tẻ nhạt. Tính năng này yêu cầu phân tích toàn bộ DOM để xác định kiểu được áp dụng cho từng phần tử trong khung nhìn.
Nghiêm trọng
Trích xuất quan trọng, giảm thiểu và cùng dòng CSS trong màn hình đầu tiên và có sẵn dưới dạng mô-đun npm. Bạn có thể dùng API này với Gulp (trực tiếp) hoặc với Grunt (ở dạng trình bổ trợ) và cũng có trình bổ trợ gói web.
Đó là một công cụ đơn giản giúp bạn mất nhiều công sức để thực hiện quy trình. Bạn thậm chí không cần phải chỉ định biểu định kiểu, tính năng Quan trọng sẽ tự động phát hiện chúng. Công cụ này cũng hỗ trợ trích xuất CSS quan trọng cho nhiều độ phân giải màn hình.
criticalCSS
CriticalCSS là một mô-đun npm khác trích xuất CSS trong màn hình đầu tiên. Dữ liệu này cũng được cung cấp dưới dạng CLI.
Công cụ này không có các tuỳ chọn để nội tuyến và giảm thiểu CSS quan trọng, nhưng cho phép bạn buộc bao gồm các quy tắc không thực sự thuộc về CSS quan trọng và giúp bạn có quyền kiểm soát chi tiết hơn đối với việc bao gồm các nội dung khai báo @font-face.
Phòng Penthouse
Penthouse là một lựa chọn phù hợp nếu trang web hoặc ứng dụng của bạn có nhiều kiểu hoặc kiểu được chèn động vào DOM (phổ biến trong các ứng dụng Angular). Phiên bản này sử dụng nâng cao Puppeteer và thậm chí còn có cả phiên bản được lưu trữ trực tuyến.
Penthouse không tự động phát hiện biểu định kiểu, bạn phải chỉ định tệp HTML và CSS mà bạn muốn tạo CSS quan trọng. Ưu điểm là có thể chạy nhiều công việc song song.