Trích xuất CSS quan trọng (critical CSS)

Tóm tắt: học cách cải thiện thời gian hiển thị website nhanh hơn với các kỹ thuật critical CSS.

Trình duyệt phải tải và phân tích cú pháp (parse) các file CSS trước khi nó có thể hiển thị trang, điều này làm cho CSS là nguồn chặn hiển thị (render-blocking). Nếu các file CSS có kích thước lớn, hoặc điều kiện mạng chậm chạp (đứt cáp, kết nối trên di động yếu & không ổn định), các yêu cầu cho file CSS có thể làm gia tăng thời gian đáng kể việc hiển thị web.

A. Thuật ngữ chính

Critical CSS hay CSS quan trọng là kỹ thuật trích xuất CSS cho nội dung thuộc màn hình đầu tiên (above the fold) để việc hiển thị nội dung cho người dùng là nhanh nhất có thể.

above the fold
  • Above the fold là tất cả nội dung mà người dùng nhìn thấy khi trang tải, trước khi có bất kỳ hành vi cuộn chuột nào. Không có chiều cao xác định chung cho nội dung được xem là thuộc màn hình đầu tiên, vì có vô số thiết bị với các kích cỡ màn hình khác nhau (điện thoại, laptop, máy bàn, máy tính bảng).

Nội tuyến style (inline CSS) vừa trích xuất vào trong thẻ <head> của tài liệu HTML loại bỏ nhu cầu tạo thêm yêu cầu bổ sung để lấy các style này. CSS còn lại có thể được tải không đồng bộ (asynchronously).

nội tuyến critical CSS
Nội tuyến critical CSS

Cải thiện thời gian hiển thị (render) có thể tạo ra sự khác biệt lớn trong hiệu suất/tốc độ nhận thức (perceived performance), đặc biệt dưới điều kiện đường truyền internet chất lượng thấp. Trên kết nối di động có độ trễ cao (high latency) đây là vấn đề cản trở lớn bất kể băng thông là bao nhiêu đi nữa.

So sánh việc nội tuyến critical CSS và có CSS chặn hiển thị
So sánh việc tải trang, với việc có CSS chặn hiển thị lớn (phía trên) và cùng trang đó với critical CSS được nội tuyến (phía dưới) trên mạng kết nối 3G

Nếu bạn có kết quả FCP (First Contentful Paint / Thời gian để người dùng thấy nội dung đầu tiên trên trang) tệ và thấy thông báo “Loại bỏ các tài nguyên chặn hiển thị / Eliminate render-blocking resources” trong Lighthouse thì đây sẽ là cơ hội tốt để bạn triển khai critical CSS.

loại bỏ nội dung chặn hiển thị

Lưu ý: Cần nhớ là nếu bạn nội tuyến một lượng lớn CSS, nó sẽ trì hoãn việc truyền tải (transmission) phần còn lại của tài liệu HTML. Nếu mọi thứ đều được ưu tiên thì sẽ không có gì được ưu tiên cả! Nội tuyến cũng có điểm yếu là nó ngăn trình duyệt cache CSS để sử dụng lại cho những lần tải trang tiếp theo (reuse on subsequent page loads), vì thế tốt nhất là bạn hãy sử dụng nó một cách cẩn thận.

Để tối thiểu hóa số lượng roundtrip cho lần render đầu tiên, bạn cần hướng đến việc giữ nội dung thuộc màn hình đầu tiên có kích cỡ dưới 14 KB (đã nén, ví dụ thông qua gzip).

Các kết nối TCP mới không thể ngay lập tức sử dụng toàn bộ băng thông khả dụng giữa máy khách và máy chủ, tất cả đều trải qua quá trình khởi động chậm để tránh quá tải kết nối- tức là tránh việc có nhiều dữ liệu hơn so với khối lượng nó có thể mang. Trong quá trình này, máy chủ bắt đầu chuyển một lượng nhỏ dữ liệu và nếu nó đến được máy khách trong điều kiện hoàn hảo, nó nhân đôi số lượng trong roundtrip kế tiếp. Với hầu hết máy chủ, 10 packets (gói) hoặc xấp xỉ 14 KB là giá trị lớn nhất có thể được truyền trong roundtrip đầu tiên.

Tác động hiệu suất mà bạn có thể đạt được với kỹ thuật này phụ thuộc vào kiểu website của bạn. Nói chung, website càng có nhiều CSS, thì việc nội tuyến CSS càng có khả năng tác động tích cực nhiều hơn.

Tổng quan về các công cụ

Có một số công cụ tuyệt vời có thể tự động xác định critical CSS cho trang. Đây là tin tốt bởi vì làm điều này theo cách thủ công là quá trình tẻ nhạt, nhàm chán (và dễ có sai sót). Nó yêu cầu phân tích toàn bộ DOM để xác định style được áp dụng cho mỗi thành phần trong viewpot (khung nhìn trình duyệt).

Critical

Công cụ Critical trích xuất, tối thiểu hóa (minifies) và nội tuyến CSS thuộc màn hình đầu tiên, nó có sẵn dưới dạng module npm. Nó có thể sử dụng với Gulp (trực tiếp) hoặc với Grunt (như một plugin) và cũng có một plugin webpack.

Đây là một công cụ đơn giản có nhiều đầu tư vào quy trình. Bạn thậm chí không cần chỉ định stylesheets, công cụ Critical tự động xác định chúng. Nó cũng hỗ trợ trích xuất critical CSS cho nhiều màn hình có độ phân giải khác nhau.

criticalCSS

CriticalCSS là một module npm khác trích xuất CSS trong màn hình đầu tiên. Nó cũng có thể được cung cấp dưới dạng CLI.

Nó không có lựa chọn nội tuyến và minify critical CSS, nhưng nó cho phép bạn có các quy tắc bắt buộc không thực sự thuộc về citical CSS và cho phép bạn quyền kiểm soát chi tiết hơn bao gồm cả các khai báo @font-face.

Penthouse

Penhouse là lựa chọn tốt nếu website hoặc ứng dụng của bạn có số lượng lớn style hoặc style là dạng động được inject (bơm vào) DOM (phổ biến trong các ứng dụng Angular). Nó sử dụng Puppeteer…và thậm chí có cả phiên bản lưu trữ trực tuyến.

Penthouse không xác định stylesheets một cách tự động, bạn phải có file CSS và HTML cụ thể mà bạn muốn nó trích xuất critical CSS. Ngược lại, nó rất tốt trong việc chạy nhiều công việc song song.

Với những ai dùng WordPress

Các plugin cache chất lượng cao như LiteSpeed cache, Swift Performance, WP-Rocket, hay FlyingPress đều có tính năng trích xuất critical CSS. Tốc độ trích xuất và chất lượng critical CSS của chúng khác nhau nhưng nhìn chung là tốt, dù trên một số website phức tạp có thể gây lỗi. Bạn cần kiểm tra kỹ lại giao diện website khi triển khai critical CSS.

(Dịch từ bài viết Extract critical CSS, tác giả: Milica Mihajlija, website: web[.]dev / phần nói về WordPress là bổ sung thêm)

Viết một bình luận