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ị: các 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 các 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 Nội dung hiển thị đầu tiên (FCP).

Ví dụ: quá trình tải CSS dưới mức tối ưu

Ví dụ sau đây chứa một ngăn xếp có ba đoạn văn bản ẩn, mỗi đoạn văn bản được tạo kiểu bằng một lớp khác nhau:

Trang này yêu cầu một tệp CSS có 8 lớp, nhưng không phải tất cả các lớp đó đều cần thiết để 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 văn) được tải theo cách không chặn luồng thực thi.

Đo

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

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

Cách 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 kết quả, bạn sẽ thấy điểm đánh dấu FCP được đặt ngay sau khi CSS tải xong:

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

Tối ưu hoá

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

1. Trong DevTools, hãy mở Command Menu (Trình đơn lệnh) bằng cách nhấn phím Control+Shift+P hoặc Command+Shift+P (Mac).
2. Nhập "Phạm vi bao phủ" rồi chọn Hiển thị mức độ phù hợp.
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.

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à quan trọng. Trình duyệt cần các thành phần này để hiển thị nội dung hiển thị, bao gồm cả tiêu đề, phụ đề và các nút của ngăn xếp.
• Các lớp được đánh dấu bằng màu đỏ là không quan trọng, chỉ ảnh hưởng đến nội dung không hiển thị ngay lập tức, chẳng hạn như các đoạn văn bản bị ẩn.

Với thông tin này, hãy tối ưu hoá CSS để 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 về lớp được đánh dấu bằng màu xanh lục trong báo cáo về mức độ phù hợp, rồi đặt các lớp đó trong 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 chuẩn để tải CSS. Cách hoạt động như sau:

• link rel="preload" as="style" yêu cầu trang tính kiểu theo cách không đồng bộ. Bạn có thể tìm hiểu thêm về preload trong Hướng dẫn tải trướ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.
• "null" trình xử lý onload sau khi được 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 thuộc tính rel.
• Tham chiếu đến trang kiểu bên trong phần tử noscript cung cấp một phương án dự phòng cho các trình duyệt không thực thi JavaScript.

Trang thu được có giao diện giống hệt như 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à cách các kiểu cùng dòng và yêu cầu không đồng bộ đối với tệp CSS trong tệp HTML:

Giám Sát

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 đợi CSS tải trước khi hiển thị trang:

Bước cuối cùng là chạy Lighthouse trên trang được tối ưu hoá.

Trong báo cáo, bạn sẽ thấy rằng FCP của trang đã giảm 0,2 giây (tức là cải thiện 20%!):

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

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 đoạn mã không sử dụng trên trang theo cách thủ công. Đối với những 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 đề cập đến một số công cụ phổ biến nhất để trích xuất CSS quan trọng và bao gồm một lớp học lập trình để xem cách các công cụ này hoạt động trong thực tế