Bagaimana Anda mengoptimalkan kinerja dan Core Web Vitals di Next.js?

Question

Accepted Answer

Next.js memberi Anda banyak alat kinerja; menggunakannya dengan baik menargetkan Core Web Vitals — LCP (pemuatan), CLS (stabilitas tata letak), dan INP (interaktivitas).

Minimalkan JavaScript klien (tuas terbesar)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

Superkekuatan App Router adalah mengirimkan lebih sedikit JS. Logika berat dan pemformatan data tetap di server; hanya "pulau" yang benar-benar interaktif menjadi Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimalkan font (CLS + muat) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Pemisahan kode komponen klien berat ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Muat dengan malas komponen klien yang besar dan tidak penting (bagan, editor, modal) agar tidak menggelembungkan bundel awal. ## Alirkan konten lambat ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache secara agresif, validasi kembali dengan tepat ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Daftar periksa yang dipetakan ke metrik ```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 ``` ## Ukur, jangan menebak ```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 ``` ## Mengapa ini penting Kinerja Next.js sebagian besar tentang **mengirimkan lebih sedikit JavaScript** (Server Components, pemisahan kode) dan menggunakan pengoptimal bawaan (`next/image`, `next/font`, streaming, caching) — masing-masing memetakan langsung ke Core Web Vital. Mengetahui alat mana yang memperbaiki metrik mana (dan mengukur dengan `next build`/Lighthouse daripada menebak) adalah cara Anda secara sistematis mencapai skor LCP/CLS/INP yang baik.

Minimalkan JavaScript klien (tuas terbesar)

Optimalkan gambar LCP

Optimalkan font (CLS + muat)

Pemisahan kode komponen klien berat

Alirkan konten lambat

Cache secara agresif, validasi kembali dengan tepat

Daftar periksa yang dipetakan ke metrik

Ukur, jangan menebak

Mengapa ini penting