Kepiye cara ngoptimalake performa lan Core Web Vitals ing Next.js?

Question

Accepted Answer

Next.js menehi sampeyan akeh alat performa; nggunakake dhukung fokus ing Core Web Vitals — LCP (loading), CLS (stabilitas layout), lan INP (interaktivitas).

Minimalisir JavaScript client (palapa paling agung)

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

App Router kekuwatane yaiku ngirim JS luwih sithik. Logika abot lan format data tetep ing server; mung "island" interaktif asli dadi Client Components.

Optimalake gambar LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimalake font (CLS + load) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split komponen client abot ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Slow-load komponen client gedhe, non-critical (chart, editor, modal) supaya ora merasakke bundle awal. ## Stream konten abot ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache kanthi agresif, revalidasi kanthi akurat ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Dhaptar cocok mapake 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, aja nggolek teka ```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 ``` ## Dene iku wigati Performa Next.js sabene bab **ngirim JavaScript luwih sithik** (Server Components, code-splitting) lan nggunakake optimizer built-in (`next/image`, `next/font`, streaming, caching) — saben mapake langsung ing Core Web Vital. Ngerti alat endi nanggulangi metrik mana (lan ngukur nganggo `next build`/Lighthouse tinimbang nggolek teka) yaiku carane sistematis tekan skor LCP/CLS/INP apik.