CSS3: Trì hoãn phần CSS không quan trọng

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. 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 hơn để hiển thị.

Trong bài viết này bạn sẽ học cách trì hoãn những phần CSS không quan trọng với mục tiêu tối ưu hóa đường dẫn hiển thị quan trọng và cải thiện First Contentful Paint (FCP).

Tải CSS theo cách không tối ưu

Bạn cần biết những lớp nào được coi là "quan trọng" bằng cách sử dụng Coverage Tool như sau:

1. Trong DevTools, mở Command Menu bằng cách nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (máy Mac).
2. Nhập "Coverage" và chọn Show Coverage.
3. Nhấp vào nút Reload để tải lại trang và bạn sẽ thấy các coverage như hình dưới đây.

Bấm đúp vào một trong các link để xem các bộ chọn được đánh dấu bằng hai màu:

• Màu xanh lá cây (quan trọng): Đây là các bộ chọn mà trình duyệt cần để hiển thị nội dung hiển thị.
• Màu đỏ (không quan trọng): Những kiểu này áp dụng cho nội dung không hiển thị ngay lập tức.

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

• Trích xuất các bộ chọn được đánh dấu bằng màu xanh lá cây trong báo cáo thu được và đặt vào bên trong một thẻ <style> ở đầu trang như sau:

<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 các bộ chọn còn lại một 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>

Giải thích:

• link rel="preload" as="style" yêu cầu biểu định kiểu một cách không đồng bộ.
• onload trong thẻ link dùng để trì hoãn CSS, tức là nó sẽ được xử lý sau khi nội dung được tải xong.
• "nulling" 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.
• Phần tử noscript như một dự phòng cho các trình duyệt không thực thi JavaScript.

Bước cuối cùng, hãy chạy Lighthouse trên trang được tối ưu hóa để xem kết quả xem First Contentful Paint có giảm không.

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

Hãy xem chi tiết hướng dẫn theo link sau: https://web.dev/codelab-extract-and-inline-critical-css/