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 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 để một trang web hiển thị.
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 phải thực hiện yêu cầu bổ sung để tìm nạp các kiểu này. Có thể tải không đồng bộ phần còn lại của CSS.
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 mạng di động, độ trễ cao là vấn đề bất kể băng thông là bao nhiêu.
Nếu bạn có Thời gian hiển thị nội dung đầu tiên (FCP) kém và thấy cơ hội "Loại bỏ tài nguyên chặn hiển thị" trong Lighthouse kiểm tra, bạn nên dùng thử CSS quan trọng.
Để giảm thiểu số lượt trả về đến lần hiển thị đầu tiên, hãy cố gắng giữ nội dung trong màn hình đầu tiên dưới 14 KB (nén).
Tác động đến hiệu suất 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ì tác động có thể có của CSS cùng dòng càng lớn.
Tổng quan về các công cụ
Có một số công cụ hữu ích có thể tự động xác định CSS quan trọng của một trang. Đây là tin tốt vì thực hiện việc này theo cách thủ công sẽ là một quá trình tẻ nhạt. Chế độ 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 kích thước và chèn 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 công cụ này với Gulp (trực tiếp) hoặc với Grunt (dưới dạng plugin) và bạn cũng có thể dùng trình bổ trợ webpack.
Đây là một công cụ đơn giản, giúp người dùng phải suy nghĩ rất nhiều về quy trình thực hiện. Bạn thậm chí không phải chỉ định biểu định kiểu, Critical sẽ tự động phát hiện chúng. Công cụ này cũng hỗ trợ trích xuất các 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 có chức năng trích xuất CSS trong màn hình đầu tiên. Bản xem trước này cũng được cung cấp dưới dạng CLI.
Trình bổ trợ này không có lựa chọn cùng dòng và rút gọn CSS quan trọng, nhưng cho phép bạn buộc đưa vào các quy tắc không thực sự thuộc về CSS quan trọng, đồng thời giúp bạn có quyền kiểm soát chi tiết hơn đối với việc đưa nội dung khai báo @font-face vào.
Phòng Penthouse
Penthouse là 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). Tính năng này sử dụng Puppeteer nâng cao và thậm chí cũng 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. Vì vậy, bạn phải chỉ định các tệp HTML và CSS mà bạn muốn tạo CSS quan trọng. Ưu điểm của phương pháp này là chạy song song nhiều công việc.