Kako optimizirate performanse i Core Web Vitals u Next.js?

Question

Accepted Answer

Next.js vam daje mnogo alata za performanse; njihova pravilna upotreba ciljava Core Web Vitals — LCP (učitavanje), CLS (stabilnost raspored) i INP (interaktivnost).

Minimalizujte JavaScript klijenta (najveća poluga)

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

Supermoć App Routera je dostavljanje manje JS-a. Teška logika i formatiranje podataka ostaju na serveru; samo doista interaktivni "otoci" postaju Client Components.

Optimizirajte LCP sliku

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimizirajte fontove (CLS + učitavanje) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Kod-podjela teških client komponenti ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Odložite učitavanje velikih, nekritičnih client komponenti (grafikoni, uređivači, modalni prozori) kako ne bi naduvali početni bundle. ## Prosljeđujte spor sadržaj ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Agresivno cacheirajte, precizno revalidirajte ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Checklist mapiran na metrike ```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 ``` ## Mjerite, ne pogađajte ```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 ``` ## Zašto je to važno Performanse Next.js-a uglavnom se svode na **dostavljanje manje JavaScripta** (Server Components, code-splitting) i korištenje ugrađenih optimizatora (`next/image`, `next/font`, streaming, caching) — svaki se direktno mapira na Core Web Vital. Znati koji alat popravljanja koju metriku (i mjeriti sa `next build`/Lighthouse umjesto da pogađate) je kako sistematski postižete dobre LCP/CLS/INP rezultate.