Critical CSS
Phần CSS cần thiết để hiển thị nội dung phía trên cùng (above-the-fold) ngay lập tức, thường được nhúng trực tiếp vào HTML.
Critical CSS là gì?
Critical CSS là đoạn mã CSS chỉ chứa những quy tắc cần thiết để hiển thị phần nội dung người dùng nhìn thấy đầu tiên khi trang web vừa tải xong — còn gọi là vùng above-the-fold. Thay vì tải toàn bộ tệp CSS bên ngoài (có thể nặng vài trăm KB), trình duyệt chỉ cần áp dụng phần CSS này ngay lập tức, giúp nội dung phía trên cùng hiện ra nhanh hơn, không bị trắng hay nhảy layout.
Đoạn CSS này thường được nhúng trực tiếp vào thẻ <head> của HTML dưới dạng <style></style>, thay vì để ở file riêng. Mục tiêu là loại bỏ hoặc giảm thiểu yêu cầu mạng (render-blocking request) trong giai đoạn render ban đầu.
Tại sao quan trọng trong SEO?
Critical CSS ảnh hưởng trực tiếp đến các chỉ số Core Web Vitals — đặc biệt là Largest Contentful Paint (LCP) và First Contentful Paint (FCP). Google sử dụng những chỉ số này làm tín hiệu xếp hạng trong tìm kiếm di động từ năm 2021. Nếu LCP chậm hơn 2,5 giây, trang có nguy cơ bị xếp thấp hơn dù nội dung chất lượng.
Một trang có Critical CSS tối ưu thường đạt:
- FCP dưới 1,5 giây (mức đề xuất của Google),
- LCP dưới 2,5 giây,
- Không có hiện tượng FOIT (Flash of Invisible Text) hoặc FOUT (Flash of Unstyled Text) rõ rệt.
Ngược lại, thiếu Critical CSS khiến trình duyệt phải chờ tải và phân tích toàn bộ CSS trước khi vẽ bất kỳ phần nào — gây chậm hiển thị, tăng tỷ lệ thoát và làm giảm trải nghiệm người dùng — cả hai đều là yếu tố gián tiếp ảnh hưởng đến thứ hạng SEO.
Cách hoạt động
Khi trình duyệt tải một trang HTML, nó xây dựng DOM và CSSOM song song. Nếu CSS được gọi qua thẻ <link rel='stylesheet'>, trình duyệt coi đó là tài nguyên chặn hiển thị (render-blocking). Chỉ khi CSSOM hoàn tất, trình duyệt mới kết hợp DOM + CSSOM thành Render Tree và bắt đầu vẽ (paint).
Critical CSS giải quyết vấn đề này bằng cách:
- Trích xuất đúng các quy tắc CSS cần thiết cho vùng above-the-fold (tính theo kích thước viewport phổ biến, ví dụ: 360×640px hoặc 768×1024px),
- Nhúng chúng trực tiếp vào
<head>dưới dạng thẻ<style>, - Để phần còn lại của CSS tải không chặn (non-render-blocking) bằng cách dùng
rel='preload'hoặcmedia='print'rồi đổi lại sau khi tải xong.
Lưu ý: Critical CSS không thay thế toàn bộ CSS — nó chỉ là bản “tạm thời” để hiển thị nhanh phần đầu, còn CSS đầy đủ vẫn phải tải để đảm bảo giao diện toàn trang ổn định sau đó.
Hướng dẫn thực hiện
Dưới đây là quy trình chuẩn để triển khai Critical CSS trên website thực tế:
- Xác định vùng above-the-fold: Dùng công cụ như Chrome DevTools → Tab Rendering → bật Emulate CSS Media hoặc kiểm tra bằng Mobile View với kích thước phổ biến (ví dụ: iPhone SE, Galaxy S5). Ghi lại chiều cao hiển thị ban đầu.
- Trích xuất Critical CSS: Dùng công cụ tự động như:
- Sitelocity Critical Path Generator (miễn phí, phù hợp site tĩnh),
- critical (npm package) — tích hợp được với Webpack/Gulp,
- Plugin WordPress như Autoptimize hoặc WP Rocket (có tùy chọn bật Critical CSS tự động).
- Nhúng vào HTML: Dán đoạn CSS đã trích xuất vào thẻ
<head>, đặt ngay sau<title>và trước các thẻ<link>khác. - Tối ưu phần còn lại: Đặt CSS gốc vào cuối
<body>hoặc dùng kỹ thuật loadCSS để tải không chặn:<link rel='preload' href='style.css' as='style' onload='this.onload=null;this.rel="stylesheet"'> <noscript><link rel='stylesheet' href='style.css'></noscript> - Thử nghiệm và đo lường: Kiểm tra lại LCP/FCP trên PageSpeed Insights, WebPageTest hoặc Lighthouse. So sánh trước – sau khi bật Critical CSS.
Lỗi thường gặp
Dưới đây là những sai lầm phổ biến khi triển khai Critical CSS và cách khắc phục:
| Lỗi | Hệ quả | Cách khắc phục |
|---|---|---|
| Critical CSS quá lớn (>14KB) | Gây chậm tải HTML, làm tăng thời gian phân tích DOM | Giới hạn dung lượng dưới 12–14KB; loại bỏ CSS dư thừa, inline chỉ selector cần thiết cho vùng trên cùng |
| Không cập nhật khi giao diện thay đổi | Gây lỗi hiển thị (layout shift, text bị chồng, màu sai) | Tự động hóa quy trình trích xuất mỗi lần build; hoặc thiết lập cảnh báo khi CSS gốc thay đổi |
| Dùng chung Critical CSS cho mọi thiết bị | Thừa CSS trên mobile, thiếu trên desktop → hiển thị sai | Tạo riêng Critical CSS cho từng breakpoint (mobile/tablet/desktop) hoặc dùng phương pháp dựa trên viewport |
| Quên xử lý font hoặc hình ảnh trong Critical CSS | Gây FOIT/FOUT, LCP chậm do font chưa tải | Preload font quan trọng; dùng font-display: swap; đảm bảo ảnh above-the-fold có loading='eager' |
Ví dụ thực tế
Một trang tin tức có cấu trúc tiêu biểu:
- Header cố định (logo, menu),
- Bài viết nổi bật (ảnh + tiêu đề + mô tả ngắn),
- 3 bài liên quan ở dưới cùng vùng nhìn thấy.
Critical CSS cho trang này chỉ bao gồm:
- Các quy tắc cho
.header,.hero-article,.article-card:first-of-type,.article-card:nth-of-type(2),.article-card:nth-of-type(3), - Font chữ chính (với
@font-faceđã preload), - Reset nhẹ (
* { margin: 0; padding: 0 }) và base typography (font-size, line-height cho<h1>,<p>).
Toàn bộ đoạn CSS này chỉ dài 9,2KB. Sau khi triển khai, LCP giảm từ 3,8s xuống còn 1,4s trên mạng 3G mô phỏng — cải thiện đáng kể điểm PageSpeed Mobile (từ 42 lên 86).
Câu hỏi thường gặp
Critical CSS có cần tạo riêng cho từng trang?
Có. Mỗi trang có cấu trúc nội dung và vùng above-the-fold khác nhau. Trang chủ thường cần nhiều CSS hơn trang danh mục, còn trang bài viết có thể cần ít hơn. Với site nhỏ (<10 trang), có thể tạo thủ công. Với site lớn, nên dùng công cụ sinh tự động theo URL hoặc tích hợp vào hệ thống build.
Có nên dùng Critical CSS trên trang AMP?
Không cần. AMP đã áp dụng nguyên tắc tương tự từ đầu: giới hạn CSS trong 75KB, yêu cầu inline toàn bộ CSS và không cho phép import ngoài. Việc thêm Critical CSS thủ công trên AMP là thừa và có thể gây lỗi xác thực.
Critical CSS có ảnh hưởng đến SEO hình ảnh hoặc video không?
Không trực tiếp, nhưng gián tiếp rất lớn. Nếu ảnh/video nằm trong vùng above-the-fold mà không được hiển thị nhanh do thiếu Critical CSS, chúng sẽ kéo dài LCP — và LCP là yếu tố xếp hạng mạnh nhất trong nhóm Core Web Vitals. Vì vậy, đảm bảo ảnh/video quan trọng có width/height, loading='eager', và được bao phủ bởi Critical CSS là việc bắt buộc.
