Si e optimizoni performancën dhe Core Web Vitals në Next.js?

Question

Accepted Answer

Next.js ju jep shumë mjete performancë; duke i përdorur mirë, ju adresoni Core Web Vitals — LCP (ngarkesa), CLS (stabilitetit i paraqitjes) dhe INP (ndërveprueshmëria).

Minimizoni JavaScript-in i klientit (levën më të madhe)

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

Mosia e App Router është të dërgoni më pak JS. Logjika e rëndë dhe formatimi i të dhënave qëndrojnë në server; vetëm "ishujt" vërtet interaktivë bëhen Client Components.

Optimizoni imazhin LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimizoni fontet (CLS + ngarkesa) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Ndajeni kodën e komponentëve klientësh të rëndë ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Ngarkoni me vonesë komponentët e mëdha, jo-kritike të klientit (grafikët, redaktorët, modalet) në mënyrë që ato të mos fryrë paketën fillestare. ## Rrjedhni përmbajtje të ngadaltë ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Memorizohen agresivisht, ri-validohen me saktësi ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Lista e kontrollimit e hartuar në metrika ```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 ``` ## Matni, mos hamenduani ```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 ``` ## Pse është e rëndësishme Performanca e Next.js është kryesisht rreth **dërgimit të më pak JavaScript** (Server Components, ndarjen e kodës) dhe përdorimit të optimizatorëve të integruar (`next/image`, `next/font`, rrjedhje, memorizim) — secila hartë drejtpërdrejt në një Core Web Vital. Dija se cili mjet rregullon cila metrikë (dhe matja me `next build`/Lighthouse në vend të hamendesës) është mënyra se si arritni sistematikisht rezultate të mira në LCP/CLS/INP.