Kako proći Core Web Vitals sa Next.js (2026)

Manje od polovine mobilnog veba prolazi Guglovu granicu performansi. U 2025. godini, samo 48% mobilnih izvora ispunilo je sva tri Core Web Vitals, što je porast sa 36% dve godine ranije (HTTP Archive Web Almanac, 2025). Taj jaz je prilika. Ako su vaši konkurenti spori, brzi Next.js sajt dobija i rangiranje i konverziju. Okvir vam pruža većinu alata, ali podrazumevana verzija i dalje pada na mnogim revizijama. Ovaj vodič pokazuje kako tačno zatvaramo taj jaz.

Ključni zaključci

• Stranica prolazi kada je LCP 2.5s ili manje, INP 200ms ili manje, i CLS 0.1 ili manje, mereno na 75. percentilu stvarnih korisnika (web.dev, 2025).
• Samo 48% mobilnih izvora prošlo je sva tri vitalna pokazatelja u 2025. godini, a LCP je najslabija karika sa 62% (Web Almanac, 2025).
• Brzina je novac: sajt za e-trgovinu koji se učita za 1 sekundu konvertuje oko 2.5 puta bolje od onog koji se učita za 4 sekunde (Portent, 2022).
• Next.js pobeđuje sa popravkama koje su najvažnije: Image i Font komponente, Server komponente i dynamic() lenjo učitavanje.

Šta su Core Web Vitals u 2026. godini?

Core Web Vitals su tri metrike koje Google koristi za ocenjivanje stvarnog iskustva stranice: učitavanje, interaktivnost i vizuelna stabilnost. URL prolazi samo kada su sve tri u "dobroj" kategoriji na 75. percentilu pregleda stranica (web.dev, 2025). Jedna spora metrika obara celu stranicu, tako da ne možete zameniti odličan rezultat rasporeda za sporo učitavanje.

Najveća promena je interaktivnost. Interaction to Next Paint (INP) je zamenio First Input Delay 12. marta 2024. godine (web.dev, 2024). FID je merio samo kašnjenje pre nego što se vaš prvi dodir registrovao. INP meri punu latenciju svake interakcije tokom posete, a zatim prijavljuje najgoru. To je mnogo teži test, a težak JavaScript na strani klijenta je ono što ga obično kvari.

Evo ciljeva kojima težite. Sve u srednjem opsegu je upozorenje, a loš opseg je neuspeh.

Pragovi za 2026. godinu

• LCP (učitavanje): dobro je 2.5s ili manje, potrebno je raditi je 2.5 do 4.0s, loše je preko 4.0s.
• INP (interaktivnost): dobro je 200ms ili manje, potrebno je raditi je 200 do 500ms, loše je preko 500ms.
• CLS (vizuelna stabilnost): dobro je 0.1 ili manje, potrebno je raditi je 0.1 do 0.25, loše je preko 0.25.

Zašto su Core Web Vitals važni za SEO i prihode?

Važni su jer spore stranice istovremeno gube novac i rangiranje. Portent je izmerio 5.6 miliona sesija i otkrio da B2C konverzija pada sa 3.05% pri učitavanju od 1 sekunde na 0.67% pri 4 sekunde, što je pad od otprilike 0.3 poena po dodatoj sekundi (Portent, 2022). Sa SEO strane, Google potvrđuje da dobri Core Web Vitals "usklađuju se sa onim što naši osnovni sistemi rangiranja nastoje da nagrade" (Google Search Central, 2025).

Efekat na prihode se kumulira. U studiji Google-a i Deloitte-a, koja je obuhvatila 37 brendova i 30 miliona sesija, jedno poboljšanje brzine mobilnog uređaja od 0.1 sekunde povećalo je maloprodajne konverzije za 8.4% i prosečnu vrednost porudžbine za 9.2% (web.dev, 2020). Desetinka sekunde zvuči trivijalno dok je ne pomnožite sa četvrtinom saobraćaja.

Za dublji uvid u to kako se ovo povezuje sa pretragom, naš vodič za tehnički SEO za programere pokriva stranu indeksiranja i renderovanja. Brzina je jedan stub većeg sistema.

Koliko sajtova zapravo prolazi Core Web Vitals?

Većina ne, a mobilni uređaji su tamo gde se muče. Web Almanac za 2025. godinu je postavio ukupnu stopu prolaznosti na 48% na mobilnim uređajima i 56% na desktopu, pri čemu je LCP najteža metrika sa 62% dobrih rezultata na mobilnim uređajima u poređenju sa 77% za INP i 81% za CLS (Web Almanac, 2025). Desktop INP je skoro rešen sa 97%, ali telefoni sa sporim procesorima i nestabilnim mrežama pričaju drugačiju priču.

Zaključak je strateški. Ako LCP najčešće pada, vaš prvi sat optimizacije treba da ide na hero sliku i fontove, a ne na mikro-podešavanje rukovaoca dugmeta. Prvo rešite očigledan problem.

Kako popravljamo LCP u Next.js-u?

LCP pada kada najvećem elementu, obično hero slici ili naslovu, treba predugo da se renderuje. Pošto ga samo 62% mobilnih sajtova prolazi, ovde se nalaze najveće pobede (Web Almanac, 2025). Next.js Image komponenta je najvažnija popravka: služi moderne formate, generiše responsivne veličine i omogućava vam da označite hero sliku tako da se prva učita.

Postavite priority na jednoj slici iznad prevoja. To govori Next.js-u da je pred-učitava umesto lenjog učitavanja, što je kod hero slike razlika između prolaska i pada.

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Product dashboard"
      width={1200}
      height={630}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

Fontovi su druga LCP zamka. Web font koji se kasno učitava blokira iscrtavanje teksta i može pomeriti naslov. next/font samostalno hostuje datoteku u vreme izgradnje, uklanja mrežni zahtev ka Google-u i primenjuje font-display: swap za vas.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return <html className={inter.className}><body>{children}</body></html>;
}

Konačno, renderujte sadržaj iznad prevoja na serveru. Server komponente isporučuju HTML koji pretraživač može odmah da iscrta, bez čekanja na hidrataciju. Držite hero sliku, naslov i primarni tekst kao izlaz renderovan na serveru, i gurnite interaktivnost na ivice. U našim verzijama, premeštanje hero slike iz klijentske komponente i dodavanje priority rutinski spušta mobilni LCP ispod 2.5s samostalno.

Kako popravljamo INP u Next.js-u?

INP pada kada JavaScript blokira glavnu nit dok korisnik pokušava da interaguje. Rešenje je jednostavno reći, a teže uraditi: isporučite manje JavaScripta. Svaka komponenta koju držite na serveru je kod koji pretraživač nikada ne mora da parsira, i to direktno poboljšava latenciju interakcije (web.dev, 2024).

Lenjo učitajte sve teško što nije potrebno za prvo iscrtavanje. Vidžet za ćaskanje, karusel, mapa ili bogati editor treba da se učitaju na zahtev sa dynamic(), a ne u početnom paketu.

import dynamic from 'next/dynamic';

const CommentEditor = dynamic(() => import('./CommentEditor'), {
  ssr: false,
  loading: () => <div className="editor-skeleton" />,
});

Za skupa ažuriranja stanja, recite React-u da nisu hitna. Umotavanje ažuriranja filtera ili pretrage u useTransition održava ulaz responsivnim dok se lista ponovo renderuje u pozadini, što je upravo ono što INP nagrađuje.

'use client';
import { useState, useTransition } from 'react';

export function Filter({ items }) {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  return (
    <input
      onChange={(e) => {
        const value = e.target.value;
        startTransition(() => setQuery(value));
      }}
    />
  );
}

Da li svaka interaktivna funkcija mora biti u paketu pri učitavanju? Skoro nikada. Pregledajte svoje klijentske komponente i obično ćete otkriti da se trećina njih može premestiti na server. Za potpunu arhitektonsku reviziju, naša usluga razvoja Next.js-a postoji upravo za ovakvu vrstu refaktorisanja.

Kako popravljamo CLS u Next.js-u?

CLS pada kada se elementi pomere nakon što su iscrtani, a uobičajeni krivci su slike bez dimenzija, kasni fontovi i ubrizgani baneri. Pravilo je da se rezerviše prostor za sve pre nego što stigne. Kada prosledite width i height Next.js Image komponenti, ona generiše CSS kutiju sa odnosom širine i visine koja drži raspored stabilnim pre nego što se datoteka učita.

Ista logika se primenjuje na ugrađene sadržaje i oglase. Umotajte bilo koji iframe treće strane u kontejner sa fiksnom min-height tako da se sadržaj ispod ne pomera kada se ugrađeni sadržaj hidrira.

<div style={{ minHeight: 400, position: 'relative' }}>
  <Image src="/chart.webp" alt="Quarterly results" fill sizes="100vw" />
</div>

Fontovi uzrokuju suptilne promene. next/font ovo smanjuje podudaranjem rezervne metrike sa vašim veb fontom, tako da se prelazak sa sistemskog teksta na učitani font jedva pomera. U kombinaciji sa slikama određenih dimenzija, ovo je ono što drži CLS udobno ispod cilja od 0.1. CLS je najlakši vitalni pokazatelj za prolazak kada "rezervisanje prostora" postane navika.

Kako merimo i pratimo rezultate?

Laboratorijski alati malo lažu, pa merite stvarne korisnike. Lighthouse i PageSpeed Insights vam daju brzo očitavanje u kontrolisanom okruženju, ali Google rangira na osnovu terenskih podataka iz Chrome User Experience Report-a, prikupljenih od stvarnih Chrome posetilaca tokom 28 dana. Stopa prolaznosti na mobilnim uređajima raste svake godine, sa 36% u 2023. na 48% u 2025. godini, a lestvica se stalno podiže (Web Almanac, 2025).

Da biste prikupili sopstvene terenske podatke, useReportWebVitals hook strimuje svaku metriku iz stvarnih sesija na vašu analitičku krajnju tačku. Vercel Speed Insights to obuhvata za vas, ali sirovi hook radi bilo gde.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

Naše otkriće: laboratorijski i terenski rezultati se najviše razlikuju kod INP-a, jer Lighthouse radi na brzoj mašini bez stvarnih dodira. Verujte CrUX broju za INP i tretirajte Lighthouse rezultat samo kao brzi test.

Spremni da prođete svoju reviziju?

Core Web Vitals nagrađuju sajtove koji poštuju vreme korisnika, a Next.js je izgrađen za to. Ako se vaša trenutna tehnološka platforma bori protiv vas, ili želite verziju koja se brzo isporučuje po podrazumevanoj vrednosti, mi planiramo, gradimo i podešavamo Next.js sajtove od početka do kraja. Pogledajte naše cene ili kontaktirajte nas da razgovaramo o vašim brojevima.

Često postavljana pitanja

Koji su pragovi Core Web Vitals u 2026. godini?

Stranica prolazi kada je LCP 2.5 sekundi ili manje, INP 200 milisekundi ili manje, i CLS 0.1 ili manje. Google meri svaku metriku na 75. percentilu pregleda stranica stvarnih korisnika (web.dev, 2025), tako da nekoliko brzih učitavanja neće spasiti spori kraj.

Da li Next.js automatski prolazi Core Web Vitals?

Ne. Next.js vam daje Image i Font komponente, Server komponente i striming, ali podrazumevana verzija i dalje može pasti. Morate postaviti priority za sliku, rezervisati prostor za raspored i smanjiti klijentski JavaScript. Okvir uklanja teške delove, ali ne uklanja posao.

Šta je zamenilo First Input Delay?

Interaction to Next Paint je zamenio First Input Delay 12. marta 2024. godine (web.dev, 2024). INP meri latenciju svake interakcije tokom posete, a ne samo prve, što čini težak JavaScript mnogo vidljivijim u rezultatu.

Da li Core Web Vitals utiču na Google rangiranje?

Da, kao deo signala iskustva stranice. Google navodi da se dobri vitalni pokazatelji usklađuju sa onim što njegovi osnovni sistemi rangiranja nagrađuju (Google Search Central, 2025). Efekat je najjači kod konkurentnih mobilnih upita gde su mnogi rezultati inače slični.

Koji je Core Web Vital najteže proći na mobilnom uređaju?

Largest Contentful Paint. Samo 62% mobilnih izvora dostiglo je dobar LCP u 2025. godini, u poređenju sa 77% za INP i 81% za CLS (Web Almanac, 2025). Spore hero slike i fontovi koji blokiraju renderovanje su uobičajeni uzrok, zbog čega je Image komponenta prva popravka.

Zaključak

Prolazak Core Web Vitals nije sreća, to je kontrolna lista. Popravite LCP pomoću Image komponente, priority i next/font. Popravite INP isporučivanjem manje JavaScripta putem Server komponenti i dynamic(). Popravite CLS rezervisanjem prostora za svaku sliku i ugrađeni sadržaj. Zatim merite stvarne korisnike pomoću CrUX-a i useReportWebVitals hook-a, jer Google zapravo ocenjuje terenske podatke. Polovina mobilnog veba i dalje ne prolazi ovu granicu. Čista Next.js verzija je način na koji ćete se naći u bržoj polovini. Kada ste spremni za isporuku, naši najnoviji vodiči i naš tim su tu da pomognu.