Kỹ thuật Critical CSS Inlining & Unused CSS Purging cho TailwindCSS / Ant Design: Tối ưu LCP < 1.2s trên mạng 3G

Trong quy trình nạp trang của trình duyệt, các tệp mã CSS ngoại vi (External CSS files dạng <link rel="stylesheet" href="styles.css">) được gọi là Tài nguyên Chặn hiển thị (Render-blocking Resources). Trình duyệt bắt buộc phải tải xong 100% tệp CSS và dựng xong cây CSSOM (CSS Object Model) rồi mới cho phép vẽ bất kỳ khung hình nào lên màn hình.

Nếu tệp CSS của bạn bị phình to lên tới vài trăm Kilobyte (do chứa hàng ngàn class CSS chưa dùng đến từ các thư viện như TailwindCSS hay Ant Design), khách hàng dùng mạng di động 3G chập chờn sẽ phải nhìn màn hình trắng xóa trong suốt 3 đến 5 giây. Bài viết này sẽ hướng dẫn bạn kỹ thuật Critical CSS Inlining & Unused CSS Purging trong Next.js giúp hạ thời gian LCP xuống dưới 1,2s.

1. Khái niệm Critical CSS và Unused CSS Purging là gì?

• Critical CSS (CSS Bắt buộc): Là tập hợp đoạn mã CSS nhỏ nhất (thường dưới 10 KB) vừa đủ để định dạng trang trí cho khối giao diện nằm trong vùng nhìn thấy đầu tiên của màn hình (Above-the-fold Area - bao gồm Header, Banner chính và Tiêu đề H1).
• Unused CSS Purging (Tẩy rửa CSS rác): Là quá trình tự động phân tích mã HTML/JSX để lọc bỏ 100% các class CSS không được sử dụng ra khỏi tệp CSS cuối cùng trước khi đóng gói sản phẩm.

2. So sánh Trải nghiệm Tải trang: CSS Truyền thống vs Critical CSS Inlining

Tiêu chí đánh giá	Cấu hình CSS Ngoại vi Truyền thống	Kỹ thuật Critical CSS Inlining
Cơ chế Nạp trang	Trình duyệt dừng vẽ UI, gửi yêu cầu HTTP tải file app.css (250KB) ➔ Đợi tải xong ➔ Vẽ UI.	Trình duyệt đọc đoạn Critical CSS nhúng sẵn trong HTML ➔ Vẽ ngay UI Above-the-fold trong 0.4s! ➔ Tải lùi file CSS phụ ngầm.
Thời gian FCP (First Contentful Paint)	Chậm (1.8s - 3.2s trên kết nối 3G).	Siêu tốc (< 0.6s). Đạt điểm xanh tuyệt đối trên Google PageSpeed. Read Tối ưu điểm Core Web Vitals.
Tác động LCP (Largest Contentful Paint)	Khối ảnh hoặc chữ H1 phải chờ CSS nạp xong mới xuất hiện.	Khối ảnh LCP được định hình kích thước ngay lập tức. View Cách tối ưu khối ảnh LCP PageSpeed.

3. Kỹ thuật Purging CSS Rác cho TailwindCSS v3/v4 và Ant Design V5

1. Tối ưu Purge CSS trong tailwind.config.js

Đảm bảo khai báo chính xác tất cả các đường dẫn chứa file JSX/TSX để TailwindCSS quét và loại bỏ các class dư thừa khi Build Production:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. Tối ưu hóa CSS-in-JS của Ant Design V5 với StyleProvider

Ant Design V5 sử dụng công nghệ CSS-in-JS tĩnh. Để tránh việc nhúng lại các style Antd trùng lặp làm phình to HTML Payload, hãy bọc ứng dụng trong StyleProvider với thuộc tính hashPriority="high":

import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import Document, { Head, Html, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const cache = createCache();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => (
          
            
          
        ),
      });

    const initialProps = await Document.getInitialProps(ctx);
    // Trích xuất đoạn Critical CSS của Ant Design để nhúng thẳng vào thẻ head
    const style = extractStyle(cache, true);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}