Critical CSS là gì?

Critical CSS là phần CSS tối thiểu để vẽ được nội dung ngay trên màn hình đầu tiên, nhúng thẳng vào <head> để không phải chờ tải file CSS ngoài.

Vấn đề nó giải: <link rel="stylesheet"> là render-blocking — browser không vẽ gì cho tới khi file CSS về. Trên mạng chậm, đó là một khoảng trắng dài trước khi thấy nội dung.

<head>
  <style>/* ~10-15KB critical CSS nhúng thẳng */</style>

  <!-- phần còn lại tải không chặn render -->
  <link rel="preload" href="/main.css" as="style"
        onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/main.css"></noscript>
</head>

Công cụ sinh tự động: critical, critters (Webpack/Next), beasties.

Cải thiện trực tiếp FCP và LCP — rõ nhất trên điện thoại và mạng chậm.

Lưu ý 1: critical CSS quá lớn thì phản tác dụng — HTML phình ra và không cache được giữa các trang. Giữ dưới ~14KB (khoảng một cửa sổ TCP đầu).

Lưu ý 2: CSS nhúng inline không được cache, nên mỗi lần tải trang đều gửi lại. Đây là lý do kỹ thuật này hợp với landing page hơn là app có nhiều lượt điều hướng.

Ghi chú: với Next.js App Router, phần lớn việc này đã được framework xử lý — chỉ cần can thiệp khi Lighthouse thật sự báo CSS chặn render.