- Critical CSS là gì?
- Tại sao Critical CSS giúp cải thiện LCP/CLS?
- Cách tích hợp Critical CSS trong WordPress
- Inline Critical CSS trong <head>
- Generate Critical CSS tự động
- Dùng plugin hỗ trợ
- Best practice khi triển khai Critical CSS
- Tối ưu phạm vi
- Chia theo template
- Kết hợp preload font
- Fallback khi lỗi
- Ví dụ workflow tự động với Gulp
- Khi nào không nên dùng Critical CSS?
- Kết luận
Critical CSS là gì?
Critical CSS là tập hợp CSS tối thiểu cần để render phần nội dung đầu tiên người dùng thấy (thường là hero, header, menu, intro section). Thay vì chờ tải toàn bộ file CSS (có thể nặng vài trăm KB), trình duyệt chỉ cần Critical CSS để vẽ nhanh phần trên cùng màn hình.
Tại sao Critical CSS giúp cải thiện LCP/CLS?
- LCP (Largest Contentful Paint): Nếu hero image hoặc headline cần CSS mới hiển thị đúng, Critical CSS đảm bảo chúng render ngay, không chậm vì file CSS ngoài.
- CLS (Cumulative Layout Shift): Khi CSS chính tải muộn, layout có thể nhảy. Critical CSS giảm hiện tượng này bằng cách cố định khung sườn từ đầu.
- FID/INP: Dù không tác động trực tiếp, render sớm giúp trang “cảm giác” phản hồi nhanh hơn.
Cách tích hợp Critical CSS trong WordPress
Inline Critical CSS trong <head>
Bước cơ bản: đưa CSS tối thiểu vào thẳng <head>, còn file chính load async hoặc preload. Ví dụ:
function mytheme_critical_css() {
if ( is_front_page() ) {
echo '<style>' . file_get_contents( get_stylesheet_directory() . '/critical/home.css' ) . '</style>';
}
}
add_action('wp_head', 'mytheme_critical_css', 1);
function mytheme_defer_main_css($html, $handle) {
if ($handle === 'theme-style') {
$html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", $html);
}
return $html;
}
add_filter('style_loader_tag', 'mytheme_defer_main_css', 10, 2);
Generate Critical CSS tự động
Có thể dùng tool như Penthouse (Node.js) hoặc Critical để generate CSS cần cho từng URL.
npx critical https://example.com \
--css style.css \
--width 1920 --height 1080 \
--output critical/home.css
Sau đó, tích hợp vào build pipeline (Gulp/Vite/Webpack). Khi deploy, Critical CSS được update tự động.
Dùng plugin hỗ trợ
- Autoptimize + Critical CSS service: generate qua API.
- WP Rocket: tích hợp tính năng Critical Path CSS sẵn.
- Perfmatters: cho phép gắn Critical CSS thủ công hoặc kết nối service.
Best practice khi triển khai Critical CSS
Tối ưu phạm vi
Không cần inline toàn bộ CSS “above the fold” phức tạp; chỉ cần khung cơ bản (font, grid, màu nền, hero section). Inline quá nhiều sẽ làm tăng HTML size.
Chia theo template
Trang chủ, single post, archive có layout khác nhau → nên có critical CSS riêng cho từng loại template.
Kết hợp preload font
Dùng <link rel="preload" as="font"> cho font chính để giảm LCP. Critical CSS nên gọi đúng font-family đã preload.
Fallback khi lỗi
Nếu file critical không load, vẫn cần main CSS. Đừng phụ thuộc 100% vào inline CSS.
Ví dụ workflow tự động với Gulp
const critical = require('critical').generate;
critical({
base: 'dist/',
src: 'index.html',
css: ['dist/css/style.css'],
dimensions: [
{ width: 375, height: 667 },
{ width: 1920, height: 1080 }
],
target: {
css: 'dist/css/critical.css'
},
extract: false,
inline: false
});
Kết quả critical.css được deploy vào theme, rồi chèn vào <head> bằng hook wp_head.
Khi nào không nên dùng Critical CSS?
- Trang quá đơn giản (blog cá nhân nhẹ, không nhiều CSS) – tối ưu không đáng kể.
- Site thay đổi layout liên tục, khó generate critical CSS ổn định.
- Khi chưa có build pipeline, việc maintain critical CSS thủ công có thể rắc rối hơn lợi ích.
Kết luận
Critical CSS là một trong những kỹ thuật mạnh mẽ để cải thiện LCP và CLS cho theme WordPress. Triển khai đúng cách (tự động generate, inline hợp lý, defer main CSS) sẽ giúp trang hiển thị nhanh, ổn định, và đạt điểm Core Web Vitals cao hơn. Trong năm 2025, với chuẩn SEO ngày càng nghiêm ngặt, Critical CSS không chỉ là “kỹ thuật cho dev geek” nữa mà là lợi thế cạnh tranh thực sự.
Bình luận