Bạn tối ưu hiệu năng và Core Web Vitals trong Next.js như thế nào?

Question

Accepted Answer

Next.js cho bạn nhiều công cụ hiệu năng; dùng chúng tốt nhắm vào Core Web Vitals — LCP (tải), CLS (ổn định layout), và INP (tương tác).

Giảm thiểu JavaScript phía client (đòn bẩy lớn nhất)

tsx

// ✅ Giữ các component là Server Components; chỉ gửi "use client" ở các lá tương tác
// Một Server Component gửi ZERO JS cho chính nó → bundle nhỏ hơn → INP/tải tốt hơn

Siêu năng lực của App Router là gửi ít JS hơn. Logic nặng và định dạng dữ liệu ở lại trên server; chỉ các "island" thực sự tương tác mới trở thành Client Components.

Tối ưu ảnh LCP

// priority = tải sớm (đừng lazy-load ảnh LCP); width/height ngăn CLS ``` ## Tối ưu font (CLS + tải) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // tự host, không layout shift ``` ## Code-split các client component nặng ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // chỉ tải khi cần ``` Lazy-load các client component lớn, không quan trọng (chart, editor, modal) để chúng không làm phình bundle ban đầu. ## Stream nội dung chậm ```tsx }> // gửi khung ngay lập tức, stream dữ liệu chậm → TTFB/FCP tốt hơn ``` ## Cache quyết liệt, revalidate chính xác ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // tốc độ tĩnh + độ tươi có kiểm soát ``` ## Checklist ánh xạ tới các chỉ số ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## Đo lường, đừng đoán ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## Tại sao điều này quan trọng Hiệu năng Next.js chủ yếu là về **gửi ít JavaScript hơn** (Server Components, code-splitting) và dùng các trình tối ưu sẵn có (`next/image`, `next/font`, streaming, caching) — mỗi cái ánh xạ trực tiếp tới một Core Web Vital. Biết công cụ nào sửa chỉ số nào (và đo bằng `next build`/Lighthouse thay vì đoán) là cách bạn đạt điểm LCP/CLS/INP tốt một cách hệ thống.