Kako optimizirate delovanje in Core Web Vitals v Next.js?

Question

Accepted Answer

Next.js vam daje številna orodja za delovanje; če jih uporabljate dobro, naslavljate Core Web Vitals — LCP (nalaganje), CLS (stabilnost postavitve) in INP (interaktivnost).

Minimiziramo odjemalčevic JavaScript (največja vzvod)

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 ima moč pošiljanja manjšega količka JS. Težka logika in oblikovanje podatkov ostanejo na strežniku; samo resnično interaktivne "otoke" postanejo Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimiziramo pisave (CLS + nalaganje) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Delimo kodo težkih odjemalčevih komponent ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lenarno nalagamo velike, nekritične odjemalčeve komponente (grafikone, urejevalnike, modalne pogovore), da ne napihajo začetnega paketa. ## Pretakamo počasno vsebino ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Agresivno shranjujemo, natančno ponovno ovrednotimo ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Kontrolni seznam preslikan 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 ``` ## Merimo, ne ugibamo ```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 ``` ## Zakaj je to pomembno Delovanje Next.js je večinoma o **pošiljanju manjšega koda JavaScript** (Server Components, delitev kode) in uporabi vgrajenih optimizatorjev (`next/image`, `next/font`, pretakanje, shranjevanje) — vsak se preslika direktno na Core Web Vital. Znanje, kateri instrument reši katero metriko (in merjenje z `next build`/Lighthouse namesto ugibanja) je način, kako sistematično dosežete dobre ocene LCP/CLS/INP.

Minimiziramo odjemalčevic JavaScript (največja vzvod)

Optimiziramo LCP sliko

Optimiziramo pisave (CLS + nalaganje)

Delimo kodo težkih odjemalčevih komponent

Pretakamo počasno vsebino

Agresivno shranjujemo, natančno ponovno ovrednotimo

Kontrolni seznam preslikan na metrike

Merimo, ne ugibamo

Zakaj je to pomembno