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

Demián Renzulli
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 các kiểu lớn 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 với mục tiêu 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).

Tải CSS theo cách chưa tối ưu

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

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, vì vậy, chỉ các kiểu quan trọng được tải đồng bộ, trong khi các kiểu còn lại (như các kiểu được áp dụng cho đoạn văn bản) đượ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 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 trang chưa được tối ưu hoá, hiển thị FCP là "1 giây" và "Loại bỏ tài nguyên chặn" trong "Cơ hội"

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

  1. Mở trang đó trong Chrome.
  2. Nhấn tổ hợp phím "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:

Theo dõi hiệu suất của Công cụ cho nhà phát triển cho trang chưa được tối ưu hoá, cho thấy FCP bắt đầu sau khi tải CSS.

Đ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 lớp nào được coi là "quan trọng". Bạn sẽ sử dụng Công cụ phạm vi lập chỉ mục để làm những việc đó:

  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 nút Reload (Tải lại) để tải lại trang và bắt đầu thu thập thông tin về mức độ sử dụng.
Mức độ phù hợp của tệp CSS, đang hiển thị 55,9% số byte không sử dụng.

Hãy nhấp đúp vào báo cáo để xem các lớp được đánh dấu bằng 2 màu:

  • Xanh lục (quan trọng): Đây là các lớp mà trình duyệt cần để hiển thị nội dung hiển thị (như tiêu đề, phụ đề và các nút đàn phong cầm).
  • Đỏ (không quan trọng): Các kiểu này áp dụng cho nội dung không hiển thị ngay (như các đoạn văn bên trong phong cách).

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

  • 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 thu được từ công cụ mức độ sử dụng và đặt các lớp đó bên 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>
  • Sau đó, 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 nội dung quan trọng.
  • Thuộc tính onload trong link cho phép xử lý CSS sau khi tải xong.
  • "vô hiệu" 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 hoạt động dưới dạng phương án dự phòng cho các trình duyệt không thực thi JavaScript.

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à giao diện của yêu cầu kiểu cùng dòng và không đồng bộ đố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:

Theo dõi hiệu suất của Công cụ cho nhà phát triển cho trang chưa được tối ưu hoá, cho thấy FCP bắt đầu trước khi CSS tải.

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%!):

Báo cáo Lighthouse, hiển thị giá trị FCP là &quot;0,8 giây&quot;.

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

Báo cáo Lighthouse, hiển thị &quot;Loại bỏ các tài nguyên chặn&quot; trong mục &quot;Các lần kiểm tra đã vượt qua&quot;.

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 mã không dùng đến trên trang theo cách thủ công. Để bổ sung cho tài liệu này, 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 thức hoạt động của những CSS này trong thực tế.