Tối ưu hóa Core Web Vitals & Hiệu năng với Next.js App Router
Phân tích chuyên sâu các kỹ thuật tối ưu hóa LCP, CLS và INP trong Next.js App Router: Dynamic Imports, font sub-setting, streaming SSR và chiến lược caching hiệu quả.
Trong phát triển web hiện đại, hiệu năng không chỉ là trải nghiệm người dùng (UX) mà còn là yếu tố xếp hạng SEO cốt lõi của Google qua bộ chỉ số Core Web Vitals (LCP, CLS, INP). Khi nâng cấp lên Next.js App Router, nhiều lập trình viên đối mặt với việc cấu trúc bundle bị phình to nếu không nắm rõ cơ chế React Server Components (RSC).
1. Giảm thiểu LCP (Largest Contentful Paint) với Server Components
React Server Components chạy hoàn toàn trên server, loại bỏ toàn bộ JavaScript của các component tĩnh khỏi client bundle. Điều này giúp trình duyệt phân tích cú pháp (parse/compile JS) nhanh hơn đáng kể. Đối với hình ảnh chủ đạo (Hero image), hãy luôn sử dụng component next/image kèm thuộc tính priority để kích hoạt tải trước:
Quy tắc vàng: Chỉ đánh dấu 'use client' ở những component thực sự cần tương tác (state, effects, event listeners). Đẩy các logic tính toán nặng hoặc fetch dữ liệu lên Server Component.
2. Triệt tiêu CLS (Cumulative Layout Shift) với Next/Font & Static Dimensions
CLS thường xảy ra khi font chữ từ bên ngoài (Google Fonts) được nạp trễ và thay thế font fallback của hệ thống, gây giật giao diện (FOUT - Flash of Unstyled Text). Với module next/font/google, font chữ được tải xuống tại thời điểm build và nhúng trực tiếp vào CSS bundle, loại bỏ 100% hiện tượng nhảy layout.
3. Tối ưu tương tác INP (Interaction to Next Paint) với React 19 Transitions
Chỉ số INP đo lường độ trễ từ lúc người dùng thao tác (click, gõ phím) đến khi giao diện phản hồi trực quan. Sử dụng useTransition hoặc startTransition để phân tách các tác vụ ưu tiên cao (gõ phím vào input) khỏi tác vụ tính toán nặng (lọc danh sách 10.000 items), giữ cho Main Thread luôn mượt mà.
'A fast website is not an accident — it is an architectural decision made at every layer of your application.'