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

Demián Renzulli

Lưu ý quan trọng: Hướng dẫn này mô tả một kỹ thuật hiệu suất nâng cao có thể cải thiện hiệu suất, nhưng cũng có thể dẫn đến lỗi nếu không được triển khai đúng cách. Hầu hết các trang web đều có thể đạt được tất cả các mục tiêu hiệu suất mà chúng tôi đề xuất mà không cần triển khai kỹ thuật này.

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 trang kiểu lớn không cần thiết sẽ mất nhiều thời gian hơn để hiển thị.

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 kết xuất quan trọng và cải thiện Lần vẽ nội dung đầu tiên (FCP).

Ví dụ: Tải CSS không 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ỉ tải đồng bộ các kiểu quan trọng, còn các kiểu còn lại (bao gồm cả kiểu đoạn văn) sẽ được tải theo cách không chặn.

Đo

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

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

Báo cáo Lighthouse đề xuất đơn giản hoá trang tính kiểu để trang tải nhanh hơn.

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

Để hình dung cách CSS này chặn quá trình kết xuất:

1. Mở trang trong Chrome.
2. Nhấn Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở DevTools.
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 đợ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 coi 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 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 độ sử dụng cho biết lượng CSS thực sự được sử dụng trong lần tải trang đầu tiên.

Nhấp đúp vào báo cáo để xem thông tin 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 tệp này để hiển thị nội dung hiển thị, bao gồm cả tiêu đề, phụ đề và nút 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 lớp được đánh dấu bằng màu xanh lục trong báo cáo mức độ sử dụng và đặt các lớp đó vào 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 các lớp còn lại theo cách không đồng bộ 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 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 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 tệp biểu định kiểu tải xong.
• Việc "đặt giá trị rỗng" cho trình xử lý onload sau khi sử dụng 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.
• 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.

Lưu ý:

Trong trường hợp thực tế, bạn nên sử dụng các hàm trì hoãn CSS như loadCSS. Các hàm này 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 xuất hiện 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 trang kiểu trong trường hợp này, vì vậy, trình duyệt vẫn có thể chặn nội dung quan trọng trong tất cả trình duyệt.

Trang kết quả trông 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à nội dung của các kiểu cùng dòng và yêu cầu không đồng bộ đến 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 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 trang kiểu.

Bước cuối cùng, hãy 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%!):

FCP mới, giảm.

Đề 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:

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 mã không dùng đến trong trang. Đối với các môi trường phát hành 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 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ế