Critical CSS Là Gì? Cách Nhúng CSS Của Màn Hình Đầu

Critical CSS là gì và giải quyết vấn đề nào?

Critical CSS là kỹ thuật tách phần CSS của nội dung ở màn hình đầu để hiện nội dung cho người dùng nhanh nhất có thể, theo web.dev của Google. Nó giải quyết việc CSS chặn hiển thị: trình duyệt phải tải và đọc xong tệp CSS rồi mới vẽ được trang, nên tệp CSS lớn làm trang hiện chậm.

Ba khái niệm cần nắm

• Tài nguyên chặn hiển thị: tệp CSS và script mà trình duyệt phải xử lý xong mới vẽ được điểm ảnh đầu tiên.
• Màn hình đầu: phần nội dung người xem thấy lúc trang vừa mở, trước khi cuộn. Không có chiều cao chung cho mọi thiết bị.
• Nhúng thẳng: đặt CSS trong khối style ở thẻ head, trình duyệt khỏi gửi thêm một yêu cầu để lấy phần CSS đó.

Định nghĩa và hình so sánh nằm ở bài Extract critical CSS của web.dev.

Critical CSS đưa đúng phần CSS của màn hình đầu lên trước, phần còn lại tải sau.

Lighthouse coi tài nguyên nào là chặn hiển thị?

Lighthouse coi hai loại tài nguyên là chặn hiển thị: script và stylesheet. Một thẻ script bị gắn cờ khi nằm trong thẻ head mà không có thuộc tính defer hoặc async. Một thẻ link stylesheet bị gắn cờ khi không có thuộc tính disabled và không có thuộc tính media khớp riêng với thiết bị.

Danh sách điều kiện lấy từ tài liệu Lighthouse về tài nguyên chặn hiển thị.

Báo cáo nêu URL nào chặn hiển thị thì URL đó là chỗ bắt đầu.

Tìm phần CSS quan trọng của một trang bằng cách nào?

Tìm phần CSS quan trọng bằng tab Coverage trong Chrome DevTools. Khi tải trang, tab này cho biết bao nhiêu mã được dùng so với bao nhiêu mã đã tải. Dòng màu xanh là CSS cần cho lần vẽ đầu tiên, dòng màu đỏ là CSS của nội dung chưa hiện ngay.

Ba bước mở tab Coverage

1. Mở Command Menu: trong Chrome DevTools, bấm Control+Shift+P, hoặc Command+Shift+P trên Mac.
2. Gõ Coverage: chọn Show Coverage.
3. Bấm Reload: trang tải lại và bảng hiện tỷ lệ mã đã dùng của từng tệp. Bấm đúp vào một tệp để xem từng dòng.

Làm tay việc này rất tốn công, vì phải xét mọi phần tử trong khung nhìn. web.dev nêu ba công cụ tự tách: Critical, criticalCSS và Penthouse. Critical tách, minify và nhúng luôn phần CSS của màn hình đầu.

Tab Coverage để hiểu trang, công cụ tự tách để làm cho mọi trang.

Nhúng Critical CSS và hoãn phần CSS còn lại ra sao?

Nhúng Critical CSS là đặt phần CSS quan trọng vào một khối style trong thẻ head, rồi tải phần CSS còn lại bất đồng bộ. web.dev hướng dẫn tải phần còn lại bằng thẻ link rel="preload" as="style" kèm sự kiện onload, và một thẻ noscript dự phòng cho trình duyệt không chạy JavaScript.

Mẫu đầy đủ ở bài Defer non-critical CSS. Với WordPress, tài liệu Lighthouse ghi có các plugin nhúng tài nguyên quan trọng hoặc hoãn tài nguyên ít quan trọng, xem thêm bài SEO WordPress #15: hình ảnh và code.

Sau khi tách, kiểm lại trang ở cả máy tính lẫn điện thoại, vì hai màn hình đầu khác nhau.

Critical CSS có giới hạn và rủi ro nào cần biết?

Critical CSS có giới hạn về dung lượng và có rủi ro gây lỗi hiển thị. web.dev khuyên giữ nội dung của màn hình đầu dưới 14 KB sau khi nén. Nhúng nhiều CSS làm chậm phần HTML còn lại, và trình duyệt không cache được phần CSS đã nhúng để dùng lại ở trang sau.

Ba điều web.dev lưu ý

• Dùng dè dặt: nhúng càng nhiều thì phần HTML phía sau càng tới chậm.
• Mất cache: CSS nhúng trong trang không được trình duyệt lưu lại cho lần tải sau.
• Kỹ thuật nâng cao: làm sai dễ sinh lỗi, và phần lớn website đạt được mục tiêu hiệu suất mà không cần kỹ thuật này.

Vì vậy nên làm các việc nhẹ hơn trước: minify code và gỡ CSS, JavaScript không dùng. Còn mục chặn hiển thị trong báo cáo thì mới tính tới Critical CSS.

Critical CSS là bước sau cùng của nhóm tối ưu CSS.

Critical CSS nằm ở đâu trong bảng chuẩn SQA-200?

Critical CSS là mục P1.08 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt của mục này: nhúng thẳng CSS của màn hình đầu vào trang để không chặn hiển thị. Mục này đứng giữa nhóm mục về ảnh và nhóm mục về mã thừa.

Các mục đứng cạnh P1.08 trong trụ cột I

• P1.06 WebP / AVIF Images: chuyển ảnh raster sang định dạng WebP hoặc AVIF với mức nén phù hợp.
• P1.07 Native Lazy Loading: đặt loading="lazy" cho mọi ảnh và iframe nằm ngoài màn hình đầu.
• P1.09 Unused JS/CSS Elimination: gỡ hoặc hoãn tải CSS, JavaScript không dùng bằng code splitting và tree shaking.
• P1.10 Minify HTML/CSS/JS: rút gọn mọi tệp mã ở bản chạy thật: bỏ khoảng trắng, chú thích và định dạng thừa.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.08 Critical CSS Inline.

P1.08 đạt khi CSS của màn hình đầu được nhúng thẳng và báo cáo không còn nêu stylesheet chặn hiển thị.

Người làm website hay hỏi gì về Critical CSS?

Người làm website hay hỏi ba câu về Critical CSS: website nào nên làm, nhúng bao nhiêu là vừa, và Critical CSS có liên quan gì tới LCP. Ba câu trả lời dưới đây lấy từ tài liệu web.dev và Lighthouse của Google.

Website nào nên làm Critical CSS?

web.dev gợi ý thử Critical CSS khi chỉ số First Contentful Paint kém và báo cáo Lighthouse có mục Eliminate render-blocking resources. Website càng nhiều CSS thì tác dụng càng rõ. Google cũng ghi phần lớn website đạt được các mục tiêu hiệu suất mà không cần kỹ thuật này, nên không bắt buộc với mọi trang.

Nhúng bao nhiêu CSS vào trang là vừa?

web.dev khuyên giữ nội dung của màn hình đầu dưới 14 KB sau khi nén, để trình duyệt nhận đủ trong lượt truyền đầu tiên. Với phần lớn máy chủ, lượt đầu chỉ chuyển được khoảng 10 gói, tương đương 14 KB. Nhúng quá mức đó thì phần HTML còn lại tới chậm hơn, lợi ích giảm đi.

Critical CSS có giúp LCP không?

Critical CSS trước hết giúp First Contentful Paint, vì trình duyệt vẽ được nội dung mà không chờ tệp CSS ngoài. Phần tử LCP nằm ở màn hình đầu nên cũng hưởng lợi khi CSS của nó có sẵn trong trang. Các việc riêng cho LCP, như ảnh và phản hồi máy chủ, nằm ở bài tối ưu LCP.

Critical CSS đáng làm khi báo cáo còn nêu stylesheet chặn hiển thị, sau khi các việc nhẹ hơn đã xong.