Quyết định xem critical CSS có phải vấn đề cần giải quyết
Bắt đầu bằng bằng chứng, không phải nhãn audit. Ghi lại một lần tải cold-cache cho một trang ưu tiên trên các cấu hình mobile và desktop đại diện. Kiểm tra waterfall và trace: liệu một stylesheet có đang trì hoãn nội dung đầu tiên, và nó có đủ lớn để đáng kể không? DevTools Coverage hiển thị CSS được dùng trong một phiên, không phải mọi route hay trạng thái.
Thử các công việc bảo trì ít tốn kém trước: loại bỏ quy tắc không dùng, minify và nén đầu ra, chỉ tải CSS theo route khi cần, và tránh chuỗi @import CSS thuần. web.dev gọi việc trích xuất và trì hoãn là các kỹ thuật nâng cao.
Một độ trễ first-render được đo gắn với CSS, lượt truy cập lạnh có ý nghĩa, và bố cục ban đầu có thể được duy trì.
Nếu độ trễ đến từ server, hình ảnh, font, JavaScript, hoặc stylesheet đã nhỏ sẵn, việc nhúng CSS không có khả năng giúp.
Định nghĩa viewport ban đầu như ma trận kiểm thử
Viewport ban đầu, đôi khi gọi là above the fold, là những gì người truy cập thấy trước khi cuộn. Nó không có chiều cao chuẩn: thiết bị, zoom, ngôn ngữ, cookie và biến thể nội dung làm thay đổi. Một ảnh chụp màn hình desktop có thể bỏ sót điện thoại hoặc tiêu đề đã được dịch.
Sử dụng các hồ sơ được đặt tên. Bao gồm bố cục hẹp và rộng, các breakpoint chính, cấu trúc đăng nhập khác nhau, và bất kỳ banner đồng ý, khuyến mãi, thông báo bảo trì hoặc lỗi xác thực nào xuất hiện ở đầu trang.
Ghi lại template, viewport, locale, xác thực, consent và các biến thể xuất hiện ở đầu trang để tạo và kiểm thử tập.
Kiểm thử cuộn nhanh, menu và focus form; một quy tắc bị trì hoãn là không an toàn nếu điều khiển của nó có thể xuất hiện trước khi toàn bộ CSS áp dụng.
Trích xuất một tập nhỏ từ một nguồn sự thật duy nhất
Sinh critical CSS từ bản build production. Việc trích xuất có thể xác định quy tắc dùng trong một viewport, nhưng hãy rà soát các quy tắc điều kiện, động và transition. Không sao chép thủ công một hệ thống thiết kế thứ hai vào template; nó sẽ bị lệch khi component và markup thay đổi.
Giữ đầu ra được sinh và phiên bản hóa cùng với phát hành, trong khi CSS nguồn vẫn là nguồn sự thật. Chỉ nhúng các quy tắc cần cho trạng thái có thể dùng ban đầu. Khối nhúng lớn làm chậm HTML và không thể tái sử dụng từ cache stylesheet ngoài trên các trang sau. So sánh điều hướng cold và warm trước khi gọi thay đổi là cải tiến.
Theo dõi số byte nhúng đã nén, số byte stylesheet còn lại, và các quy tắc bị trùng. Việc giảm một request chặn không nhất thiết là lợi ích ròng.
Đánh dấu build khi kết quả trích xuất rỗng, vượt ngưỡng kích thước nhúng, hoặc thay đổi bất ngờ so với baseline đã được xem xét.
Tải phần CSS còn lại an toàn và tôn trọng ràng buộc chính sách
Stylesheet phần còn lại phải đến trước khi nội dung thấp hơn và các trạng thái sau trông hoàn chỉnh. Một pattern được tài liệu tải trước (preload) CSS như style rồi chuyển thành stylesheet sau khi nó tải xong, kèm fallback không cần JavaScript. Preload yêu cầu tài nguyên sớm; nó không áp dụng CSS. Một tập không hoàn chỉnh có thể làm restyle nhìn thấy.
Kiểm tra Content Security Policy trước khi dùng trình xử lý load inline. web.dev lưu ý rằng chính sách có thể cấm inline onload JavaScript, vì vậy hãy dùng loader tương thích hoặc thiết kế khác. Thử với JavaScript bị tắt. Các file phân loại media hữu ích cho kiểu điều kiện thực sự như in; một truy vấn không khớp thì không chặn render, mặc dù nó vẫn có thể tải xuống.
Xác minh khách không có JavaScript nhận đủ CSS và có thể hoàn tất luồng ưu tiên.
Điều tra font hoặc hình ảnh xuất hiện đầu trang tải chậm riêng; critical CSS không sửa hành vi fetch của chúng.
Kiểm thử hồi quy về mặt hình ảnh, chức năng và cache
Dùng so sánh hình ảnh trên mỗi viewport được đặt tên và trạng thái đầu trang. Kiểm tra văn bản không có style, chồng lấn, navigation bị ẩn, mất chỉ báo focus, layout shift, và nhảy khi CSS trì hoãn áp dụng. Thực hiện điều hướng bằng bàn phím, đường đi chạm, lỗi và cuộn nhanh. Nếu một quy tắc trì hoãn khiến một điều khiển không dùng được, nó nên ở đường dẫn critical hoặc thiết kế phải thay đổi.
Kiểm thử lượt cold và warm. Kiểm thử cold cho thấy liệu loại bỏ chờ CSS có cải thiện rendering; kiểm thử warm cho thấy chi phí byte nhúng lặp lại. Thử HTML được cache trước và quay lại sau khi triển khai. Giữ nguyên tài sản tương thích trong khi HTML đã cache có thể yêu cầu chúng, và không ghi đè URL stylesheet có fingerprint.
So sánh first content và main visible content, sau đó dùng trace để giải thích lợi ích hay hồi quy.
Bao gồm focus, tương phản, tuỳ chọn chuyển động, zoom và thứ tự dễ đọc. Render nhanh hơn không phải là đạt nếu giao diện không truy cập được.
Vận hành như một tính năng phân phối có thể đảo ngược
Giao cho pipeline một chủ sở hữu và tài liệu hóa đầu vào, artifact, template, hồ sơ test và giới hạn kích thước nhúng. Chạy kiểm thử bất cứ khi nào CSS, markup, thư viện component, feature flag, hoặc bên thứ ba xuất hiện above-the-fold thay đổi. Coverage hướng dẫn rà soát, nhưng một bản ghi không thể chứng minh một quy tắc an toàn để loại bỏ ở mọi nơi.
Phát hành sau một cấu hình có thể đảo ngược nếu khả thi. Ghi lại đường dẫn stylesheet biết là tốt, phiên bản artifact, identifier build và phương pháp phục hồi. Nếu xuất hiện hồi quy, phục hồi phân phối tương thích trước, rồi chẩn đoán trạng thái bị bỏ sót. SIU dùng workflow này để ổn định các đường dẫn quan trọng trước khi ảnh hưởng tới khách hàng lan rộng.
Một banner mới, luồng consent, locale, breakpoint, hoặc bố cục tài khoản yêu cầu tái sinh và kiểm thử.
Hoàn tác template và cấu hình phân phối về generation tương thích; không chỉnh URL tài sản không đổi mà các tài liệu cũ có thể tham chiếu.