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ị: chúng phải được tải và xử lý trước khi trình duyệt hiển thị trang. Trang web chứa các biểu định 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 hiển thị quan trọng và cải thiện Nội dung đầu tiên hiển thị (FCP).

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

Ví dụ sau chứa một bản đàn phong cầm với ba đoạn ẩn văn bản, mỗi 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 này đều cần thiết để hiển thị đường liên kết "có thể nhìn thấy" nội dung.

Mục tiêu của hướng dẫn này là tối ưu hoá trang này để chỉ những kiểu quan trọng được tải đồng bộ, trong khi các phần 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.

Đo

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

Báo cáo này cho biết chỉ số Nội dung đầu tiên hiển thị 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 đề xuất việc đơn giản hoá biểu định kiểu để giúp trang của bạn tải nhanh hơn.

Lưu ý: Trang web minh hoạ này sử dụng một biểu định kiểu rất nhỏ. Trong các tình huống sản xuất, thông thường bạn cần 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 sử dụng trong khi hiển thị nội dung trong màn hình đầu tiên, nó cũng 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 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 lập tức 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 điểm ảnh 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 vấn đề 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 (Mac).
2. Nhập "Phạm vi bao phủ" và 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.

Báo cáo mức độ phù hợp cho biết mức độ hài lòng của CSS thực sự được 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 màu xanh lục là lớp quan trọng. Trình duyệt cần các mã này để hiển thị nội dung hiển thị, bao gồm tiêu đề, phụ đề và nút phong cầm.
• Những lớp được đánh dấu màu đỏ là những lớp không quan trọng, ả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.

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 tải trang và trì hoãn CSS không quan trọng để xem sau:

1. Trích xuất những đị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, và đặt các lớp đó vào 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 các lệnh sau mẫu:

   <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 biểu đị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 hoàn tất quá trình tải biểu định kiểu.
• "đang huỷ bỏ" trình xử lý onload sau khi sử dụng sẽ giúp một số trình duyệt tránh được gọi lại trình xử lý khi họ 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 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 cản trở 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, và 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 để nội dung trước khi hiển thị mà không cần chờ biểu định kiểu trong Firefox và Chrome. Tuy nhiên, trong trường hợp này, trình duyệt vẫn ưu tiên biểu định kiểu, do đó vẫn có thể chặn nội dung quan trọng trong mọi trình duyệt.

Trang kết quả sẽ có giao diện chính xác 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 kiểu cùng dòng và yêu cầu không đồng bộ đối với tệp CSS trông giống như trong HTML tệp:

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 trang yêu cầu CSS, tức 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 biểu định kiểu.

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 trang FCP đã giảm 0,2 giây (20% cải tiến!):

FCP mới, giảm bớt.

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

Trang hiện đã chuyển các tài nguyên chặn kiểm tra.

Các bước tiếp theo và 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 theo cách thủ công đoạn mã không sử dụng 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 bao gồm một số các 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 chúng thực hành