Optimizacija performansi web stranice: Potpuni checklist (Next.js + Core Web Vitals) za 2026.

# Što ovaj checklist pokriva (i zašto je važan)#

Optimizacija performansi web stranice izravno utječe na konverzije, SEO i zadržavanje korisnika. Brojna industrijska istraživanja dosljedno pokazuju da i mala ubrzanja mijenjaju poslovne metrike; primjerice, Deloitte je izvijestio da smanjenje vremena učitavanja za 0.1s može povećati stopu konverzije na retail stranicama (učinak varira ovisno o industriji i miksu uređaja).

Ovaj vodič je fokusiran na Next.js i predstavlja production checklist koji pokriva Core Web Vitals, slike, lazy loading, CDN i caching—uz konkretne prije/poslije metrike koje možete koristiti kao benchmark. Ako ste na početku s Next.js-om, krenite s Uvod u Next.js i vratite se ovdje kada aplikacija bude deployana.

# Najprije baseline: mjerite prije nego optimizirate#

Bez baselinea “optimizacija” se često pretvori u pogađanje. Trebaju vam field data (stvarni korisnici) za istinu i lab data (Lighthouse) za debugiranje.

Metrike koje stvarno znače (Core Web Vitals)#

Core Web Vitals se evaluiraju na 75. percentilu učitavanja stranice, a ne na prosjeku. To je važno jer outlieri (spori uređaji, loše mreže) utječu na korisničko iskustvo i Googleovu procjenu.

Alati: što koristiti i kada#

ℹ️ Napomena: Česta zamka je “ganjanje Lighthousea”. Možete dobiti score 100, a i dalje padati CWV u fieldu ako su vam stvarni korisnici na sporijim telefonima i mrežama. Uvijek validirajte poboljšanja s field data.

Primjer prije/poslije (realističan Next.js e-commerce PDP)#

Ovo je tipičan obrazac poboljšanja koji viđamo na product detail stranicama nakon sređivanja slika, caching-a i third-party skripti.

Koristite ovo kao sanity check: ako vam je LCP visok, a TTFB nizak, obično je problem front-end payload i slike. Ako je TTFB visok, prvo gledajte strategiju renderiranja i caching.

# Next.js strategija renderiranja: odaberite brzi put#

Next.js nudi više načina renderiranja stranica. Vaš performance profil uvelike ovisi o ovom izboru.

Brza matrica odluke (SSR vs SSG vs ISR)#

Izbjegnite nepotrebne client komponente#

U Next.js App Routeru server komponente su vaša default prednost. Svaka client komponenta povećava količinu JS-a koju šaljete u browser, što često pogoršava INP.

Checklist:

• Zadržite layout, navigaciju i renderiranje sadržaja kao server komponente.
• Client komponente koristite samo za interaktivne dijelove (filteri, košarica, kompleksne forme).
• Zamijenite “global client wrapper” pattern s granularnim client “islands”.

Ako gradite visokoperformantnu marketing stranicu ili storefront, ovo često znači više nego mikro-optimiziranje JavaScripta.

# Core Web Vitals checklist (Next.js implementacija)#

1) Poboljšajte LCP: Optimizirajte LCP element (najčešće hero sliku)#

Na mnogim Next.js stranicama LCP element je velika slika iznad pregiba. Tretirajte je kao kritični sadržaj.

Checklist:

• Koristite next/image za responsive dimenzioniranje i moderne formate.
• priority postavite samo za stvarne above-the-fold slike.
• Dodajte sizes kako bi browser preuzeo odgovarajuću varijantu.
• Provjerite da hero slika nije slučajno lazy-loadana.

// app/(marketing)/page.tsx
import Image from "next/image";
 
export default function Hero() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Product hero"
      width={1600}
      height={900}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
      style={{ width: "100%", height: "auto" }}
    />
  );
}

Zašto je ovo važno: bez ispravnog sizes, mobilni korisnici mogu preuzimati slike desktop veličine, što povećava LCP na stvarnim uređajima.

2) Poboljšajte INP: Smanjite main-thread posao i client JS#

INP se tipično pogoršava jer je browser zauzet izvršavanjem JavaScripta kada korisnik pokuša interaktirati.

Checklist:

• Izbacite teške biblioteke iz client bundlea (date libs, charting, WYSIWYG editori).
• Razdvojite interaktivne widgete i učitavajte ih samo na stranicama gdje su potrebni.
• Zamijenite skupi client-side state tamo gdje server renderiranje radi posao.

Za pronalazak velikih client bundleova koristite analyzer.

npm i -D @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
 
module.exports = withBundleAnalyzer({
  reactStrictMode: true,
});

ANALYZE=true npm run build

Primjenjivo pravilo: ako se dependency koristi na 10% stranica, nemojte ga slati 100% korisnika.

3) Poboljšajte CLS: Rezervirajte prostor za sve što se učitava kasno#

CLS problemi često dolaze od slika, fontova i umetnutog UI-a (cookie banneri, chat widgeti).

Checklist:

• Uvijek specificirajte width i height (ili aspect ratio) za slike.
• Izbjegnite umetanje bannera iznad sadržaja bez rezerviranog prostora.
• Koristite font-display: swap i konzistentne fallback fontove kako biste smanjili layout skokove.

⚠️ Upozorenje: Čest CLS “ubojica” je cookie consent traka koja se pojavi na vrhu i gurne cijelu stranicu prema dolje. Rezervirajte prostor od početka ili je renderirajte na način koji ne mijenja layout (npr. overlay).

# Optimizacija slika (najveća poluga za LCP na većini stranica)#

Slike su često većina prenesenih byteova na stranicama bogatim sadržajem. Moderni formati i ispravno dimenzioniranje smanjuju bandwidth, decode vrijeme i LCP.

Praktični checklist za slike u Next.js-u#

Remote slike: sigurno konfigurirajte domene#

Ako učitavate slike iz CMS-a ili CDN-a, whitelistajte domene.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.example-cms.com" },
      { protocol: "https", hostname: "cdn.example.com" },
    ],
  },
};

Primjer: prije/poslije na blog listingu#

Ovo poboljšanje je česta pojava kada listing stranica renderira 10–20 thumbnailova bez sizes i bez ispravnog resizanja.

# Lazy loading (ispravno, ne svuda)#

Lazy loading štedi bandwidth i smanjuje početni posao, ali zloupotreba može pogoršati LCP i uzrokovati jank.

Što lazy loadati#

Dynamic import za teške client widgete#

Držite teške komponente izvan inicijalnog bundlea.

// app/product/[slug]/page.tsx
import dynamic from "next/dynamic";
 
const Reviews = dynamic(() => import("./Reviews"), {
  ssr: false,
  loading: () => null,
});
 
export default function ProductPage() {
  return (
    <>
      {/* main content */}
      <Reviews />
    </>
  );
}

Koristite ovo za widgete koji nisu potrebni za first render (recenzije, preporuke, napredni filteri).

💡 Savjet: Ako odgađate widget koji utječe na layout, rezervirajte prostor s fiksnom visinom skeletona kako biste spriječili CLS.

# CDN: Smanjite latenciju i stabilizirajte performanse globalno#

CDN poboljšava performanse tako što cachea sadržaj bliže korisnicima i izravnava traffic spikeove. Za globalnu publiku to je jedno od poboljšanja s najvećim ROI-jem.

Što poslužiti preko CDN-a#

Ako je aplikacija na Vercelu, već imate koristi od edge cachinga za mnoge assete. Preostali posao je ispravni cache headeri i odabir ISR/SSG gdje je moguće.

CDN konfiguracijski checklist#

• Cacheajte immutable assete dugo (max-age=31536000, immutable).
• Cacheajte HTML za static i ISR stranice prema potrebama svježine.
• Zaobiđite cache za personalizirani sadržaj (cookies, auth headeri).
• Uključite Brotli kompresiju ako platforma podržava (većina podržava).

# Strategije keširanja (Next.js + HTTP): dio koji donosi novac#

Keširanje je mjesto gdje performanse postaju predvidljive. Cilj je smanjiti:

• Server compute po requestu (TTFB)
• Ponavljane DB pozive
• Varijancu tijekom traffic spikeova

Slojevi keširanja koje trebate razmotriti#

HTTP Cache-Control: preporučeni defaulti#

Ako imate API route koji vraća javni sadržaj, caching možete dodati ovako:

// app/api/products/route.ts
export async function GET() {
  const body = JSON.stringify({ items: [] });
 
  return new Response(body, {
    headers: {
      "Content-Type": "application/json",
      "Cache-Control": "public, s-maxage=60, stale-while-revalidate=300",
    },
  });
}

Ovo smanjuje ponavljane origin hitove uz prihvatljivu svježinu podataka.

ISR u praksi: visoke performanse bez straha od zastarjelog sadržaja#

Incremental Static Regeneration često je najbolji default za SEO stranice koje se povremeno mijenjaju.

Checklist:

• Koristite ISR za product, category i content stranice.
• Revalidate po vremenu radi jednostavnosti ili po tagovima kada imate CMS.
• Potvrdite da vaš CDN poštuje ISR ponašanje (Vercel poštuje; druge postavke mogu trebati tuning).

Čak i umjeren pomak sa SSR-a na ISR može spustiti TTFB s 800–1200ms na 100–250ms za globalne korisnike, posebno pod opterećenjem.

# Third-party skripte: tihi ubojica INP-a#

Analytics, A/B testing, chat widgeti i tag manageri često pogoršavaju INP zbog long taskova. Ne morate ih ukloniti—trebate kontrolirati kada se izvršavaju.

Checklist:

• Auditirajte third-party skripte i uklonite neiskorištene tagove.
• Učitavajte non-critical skripte nakon interakcije ili kada je stranica stabilna.
• Preferirajte server-side tracking gdje je izvedivo.

Praktičan pristup:

• Zadržite samo jedan analytics alat.
• Deferajte chat widget dok korisnik ne scrolla ili ne provede 10–15 sekundi na stranici.
• Izbjegnite “all pages” injekciju za skripte koje trebaju samo na checkoutu ili pricingu.

# Mreža i payload: neka prvi load bude mali#

Čak i uz savršeno keširanje, veliki JS i CSS payload šteti. Cilj nije “malo radi malog”, nego fast-to-interactive.

Checklist za payload#

# Operativni checklist: spriječite regresije performansi#

Poboljšanja performansi često nestanu nakon par sprintova. Postavite guardrailove.

Dodajte performance budžete#

Checklist:

• Postavite maksimum JS veličine po ruti (npr. 170–250KB gzipped kao početna točka).
• Pratite CWV kroz vrijeme (tjedno) i alertajte na regresije.
• Uvrstite performanse u Definition of Done za nove stranice.

Koristite synthetic monitoring za kritične putanje#

Za tokove visoke vrijednosti (homepage → PDP → checkout), synthetic provjere hvataju CDN i backend probleme prije nego što ih korisnici osjete.

Pratite:

• TTFB
• LCP
• INP proxy metrike (total blocking time u labu)
• Stope grešaka

# Potpuni checklist za optimizaciju performansi web stranice (Copy/Paste)#

Koristite ovu listu za potpuni audit.

Core Web Vitals (CWV)#

1. 1
   Identificirajte LCP element po templateu (home, listing, detail).
2. 2
   Popravite LCP s optimizacijom slika, preloadingom i smanjenim TTFB-om.
3. 3
   Smanjite INP rezanjem client JS-a, deferanjem third-party skripti i izbjegavanjem velikih client wrappera.
4. 4
   Smanjite CLS rezerviranjem prostora za slike, fontove i umetnuti UI.

Slike#

1. 1
   Koristite next/image za sve content slike.
2. 2
   Dodajte sizes za responsive ponašanje.
3. 3
   Koristite priority samo za stvarne above-the-fold slike.
4. 4
   Provedite kompresiju i razumne izvorne dimenzije.

Lazy loading#

1. 1
   Lazy loadajte below-the-fold slike i sekcije.
2. 2
   Dynamic importajte teške client widgete.
3. 3
   Rezervirajte prostor za lazy-loadani UI kako biste izbjegli CLS.

CDN#

1. 1
   Osigurajte immutable caching za fingerprinted assete.
2. 2
   Cacheajte javni HTML/API gdje je sigurno.
3. 3
   Provjerite kompresiju (Brotli) i podršku za HTTP/2/3.

Keširanje#

1. 1
   Preferirajte SSG/ISR za SEO stranice.
2. 2
   Dodajte Cache-Control headere za javne API odgovore.
3. 3
   Izbjegavajte caching personaliziranih odgovora.
4. 4
   Validirajte cache hit ratio na CDN-u i originu.

Next.js-specifično#

1. 1
   Minimizirajte client komponente; koristite server komponente po defaultu.
2. 2
   Analizirajte bundleove i uklonite teške dependencyje.
3. 3
   Držite JS po ruti malim uz code splitting.

Dokaz (metrike)#

1. 1
   Zabilježite baseline (p75 CWV + Lighthouse + bundle sizes).
2. 2
   Ponovno testirajte nakon svake promjene.
3. 3
   Rolloutajte postupno kada promjene utječu na caching ili strategiju renderiranja.

# Ključni zaključci#

• Optimizirajte ono što pokreće Core Web Vitals: LCP (hero/sadržaj), INP (JS + third parties), CLS (rezerviran prostor), koristeći field data na 75. percentilu.
• U Next.js-u se performanse često najbrže poboljšaju tako da smanjite broj client komponenti i šaljete manje JavaScripta u browser.
• Rad na slikama je obično najveća pobjeda: koristite next/image, ispravne sizes, moderne formate i izbjegavajte lazy-loading LCP slike.
• Keširanje tretirajte kao sustav: SSG/ISR + ispravan Cache-Control + CDN mogu spustiti TTFB s ~1s na ~200ms u stvarnim deployevima.
• Lazy loading koristite selektivno: deferajte sadržaj ispod pregiba i teške widgete, ali kritične above-the-fold elemente držite eager i stabilnima.
• Spriječite regresije budžetima, bundle analizom i redovitim CWV provjerama—performanse su product feature, ne jednokratni zadatak.

# Zaključak#

Optimizacija performansi web stranice najlakša je kada je tretirate kao checklist: izmjerite CWV, popravite LCP element (najčešće slike), smanjite client-side JavaScript da poboljšate INP, stabilizirajte layout za CLS te učinite caching/CDN ponašanje eksplicitnim.

Ako želite praktičan audit i prioritetni plan optimizacije za svoju Next.js aplikaciju—uz mjerljive prije/poslije KPI-jeve—Samioda može pomoći: Mobilni i web razvoj. Za timove koji tek počinju ili migriraju, krenite s Uvod u Next.js i zatim primijenite ovaj checklist na ključne templatee.