Trì hoãn CSS không quan trọng

Demián Renzulli

Tệp CSS là tài nguyên chặn hiển thị: những tệp này phải được tải và xử lý trước khi trình duyệt hiển thị trang. Các trang web chứa biểu định kiểu lớn một cách không cần thiết sẽ mất nhiều thời gian hiển thị hơn.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách trì hoãn CSS không quan trọng để tối ưu hoá Đường dẫn hiển thị quan trọng và cải thiện Thời gian hiển thị nội dung đầu tiên (FCP).

Ví dụ: tải CSS dưới mức tối ưu

Ví dụ sau đây chứa một đàn phong cầm có 3 đoạn văn bản ẩn, mỗi đoạn được tạo kiểu bằng một lớp riêng:

Trang này yêu cầu một tệp CSS có 8 lớp, nhưng không phải lớp nào cũng cần để hiển thị nội dung "hiển thị".

Mục tiêu của hướng dẫn này là tối ưu hoá trang này để chỉ các kiểu quan trọng được tải đồng bộ, trong khi các kiểu còn lại (bao gồm cả các kiểu đoạn), được tải theo cách không chặn.

Đo

Chạy Lighthouse trên trang và chuyển đến phần Hiệu suất.

Báo cáo này cho thấy chỉ số First Contentful Paint (Hiển thị nội dung đầu tiên) với giá trị "1s" và cơ hội Loại bỏ tài nguyên chặn hiển thị, trỏ đến tệp style.css:

Báo cáo Lighthouse cho thấy bạn nên đơn giản hoá biểu định kiểu để trang của bạn tải nhanh hơn.

Lưu ý: Trang web minh hoạ này sử dụng biểu định kiểu rất nhỏ. Trong các tình huống phát hành chính thức, bạn thường cần các tệp CSS lớn hơn nhiều. Nếu Lighthouse phát hiện thấy một trang có ít nhất 2048 byte quy tắc CSS không được dùng trong khi hiển thị nội dung trong màn hình đầu tiên, thì Lighthouse cũng sẽ hiển thị đề xuất Xoá CSS không dùng đến.

Để trực quan hoá cách CSS này chặn hiển thị:

1. Mở trang đó trong Chrome.
2. Nhấn Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở Công cụ cho nhà phát triển.
3. Nhấp vào thẻ Hiệu suất.
4. Trong bảng điều khiển Hiệu suất, hãy nhấp vào Tải lại.

Trong dấu vết thu được, bạn sẽ thấy điểm đánh dấu FCP được đặt ngay sau khi CSS tải xong:

Trên trang minh hoạ chưa được tối ưu hoá, FCP không thể xảy ra cho đến khi CSS tải xong.

Điều này có nghĩa là trình duyệt cần phải đợi tất cả CSS tải và được xử lý trước khi vẽ một pixel duy nhất trên màn hình.

Tối ưu hoá

Để tối ưu hoá trang này, bạn cần biết lớp nào được coi là quan trọng. Để xác định điều này, hãy sử dụng Công cụ phạm vi bao phủ:

1. Trong Công cụ cho nhà phát triển, hãy mở Trình đơn lệnh bằng cách nhấn Control+Shift+P hoặc Command+Shift+P (máy Mac).
2. Nhập "Phạm vi bao phủ" rồi chọn Hiện phạm vi bao phủ.
3. Nhấp vào Tải lại để tải lại trang và bắt đầu thu thập mức độ phù hợp.

Báo cáo mức độ phù hợp cho biết lượng CSS của bạn trên thực tế được sử dụng trong lượt tải trang ban đầu.

Nhấp đúp vào báo cáo để xem chi tiết:

• Các lớp được đánh dấu bằng màu xanh lục là rất quan trọng. Trình duyệt cần các nút này hiển thị nội dung hiển thị, bao gồm cả tiêu đề, phụ đề và các nút điều chỉnh.
• Các lớp được đánh dấu màu đỏ là các lớp không quan trọng, chỉ ảnh hưởng đến nội dung không hiển thị ngay, chẳng hạn như các đoạn bị ẩn.

Với thông tin này, hãy tối ưu hoá CSS của bạn để trình duyệt có thể bắt đầu xử lý các kiểu quan trọng ngay sau khi trang tải và trì hoãn CSS không quan trọng cho sau này:

1. Trích xuất các định nghĩa lớp được đánh dấu bằng màu xanh lục trong báo cáo mức độ phù hợp và đặt các lớp đó trong một khối <style> ở đầu trang:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. Tải không đồng bộ các lớp còn lại bằng cách áp dụng mẫu sau:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

Đây không phải là cách tải CSS tiêu chuẩn. Cách hoạt động như sau:

• link rel="preload" as="style" yêu cầu biểu định kiểu một cách không đồng bộ. Bạn có thể tìm hiểu thêm về preload trong bài viết Hướng dẫn tải trước các thành phần quan trọng.
• Thuộc tính onload trong link cho phép trình duyệt xử lý CSS khi biểu định kiểu tải xong.
• "huỷ" trình xử lý onload sau khi sử dụng sẽ giúp một số trình duyệt tránh gọi lại trình xử lý khi chuyển đổi thuộc tính rel.
• Việc tham chiếu đến biểu định kiểu bên trong phần tử noscript cung cấp tính năng dự phòng cho các trình duyệt không thực thi JavaScript.

Lưu ý:

Trong tình huống sản xuất thực tế, bạn nên sử dụng các hàm trì hoãn CSS như loadCSS có thể đóng gói hành vi này và hoạt động tốt trên các trình duyệt, đồng thời hỗ trợ Chính sách bảo mật nội dung có thể không cho phép JavaScript onload cùng dòng.

Bạn cũng có thể đặt đường liên kết CSS ở cuối trang để cho phép nội dung hiển thị trước khi hiển thị mà không cần đợi biểu định kiểu trong Firefox và Chrome. Tuy nhiên, trình duyệt vẫn ưu tiên biểu định kiểu trong trường hợp này, nên trình duyệt vẫn có thể chặn nội dung quan trọng trong mọi trình duyệt.

Trang kết quả trông giống hệt phiên bản trước, ngay cả khi hầu hết các kiểu tải không đồng bộ. Dưới đây là giao diện của yêu cầu không đồng bộ và kiểu cùng dòng đối với tệp CSS trong tệp HTML:

Theo dõi

Sử dụng Công cụ cho nhà phát triển để chạy một dấu vết Hiệu suất khác trên trang được tối ưu hoá.

Điểm đánh dấu FCP xuất hiện trước khi trang yêu cầu CSS, nghĩa là trình duyệt không cần phải đợi CSS tải trước khi hiển thị trang:

Trên trang được tối ưu hoá, FCP có thể bắt đầu trước khi tải biểu định kiểu.

Trong bước cuối cùng, hãy chạy Lighthouse trên trang đã được tối ưu hóa.

Trong báo cáo, bạn sẽ thấy trang FCP đã giảm 0,2 giây (cải thiện 20%!):

FCP mới, đã giảm.

Đề xuất Loại bỏ tài nguyên chặn hiển thị không còn xuất hiện trong phần Cơ hội nữa, mà thay vào đó nằm trong phần Các lần kiểm tra đã vượt qua:

Trang hiện đã vượt qua quy trình kiểm tra tài nguyên chặn.

Các bước tiếp theo và tài liệu tham khảo

Trong hướng dẫn này, bạn đã tìm hiểu cách trì hoãn CSS không quan trọng bằng cách trích xuất thủ công đoạn mã không dùng đến trên trang. Đối với các môi trường sản xuất phức tạp hơn, hướng dẫn trích xuất CSS quan trọng sẽ trình bày một số công cụ phổ biến nhất để trích xuất CSS quan trọng, đồng thời cung cấp một lớp học lập trình để xem cách hoạt động của các CSS này trong thực tế