Arhitektura za vrhunske Core Web Vitals rezultate

Korištenje WordPressa kao Headless CMS-a u kombinaciji s Next.js (App Router) frontendom drastično mijenja način na koji se web stranica isporučuje korisniku. Umjesto da WordPress generira HTML pri svakom posjetu, on služi isključivo kao baza podataka kojoj Next.js pristupa putem API-ja.

Što se točno događa u pozadini?

U tradicionalnom WordPressu, kada korisnik zatraži stranicu, server mora izvršiti PHP kod, upit u bazu podataka, učitati temu i sve dodatke (plugine) kako bi sastavio HTML. To troši vrijeme i resurse (visok TTFB).

U Headless/Next.js arhitekturi proces je drugačiji:

Build Time: Next.js tijekom “build” procesa povlači sav sadržaj iz WordPressa preko WPGraphQL ili REST API-ja i unaprijed generira statičke HTML stranice.
Data Fetching: Podaci se prenose kao lagani JSON, a ne kao teški HTML blokovi.
Edge Distribution: Te statičke stranice postavljaju se na CDN (poput Vercela), što znači da korisnik dobiva sadržaj sa servera koji mu je fizički najbliži.

Utjecaj na Core Web Vitals (LCP, CLS, INP)

1. LCP (Largest Contentful Paint) – Brzina učitavanja

Budući da Next.js koristi Static Site Generation (SSG), server šalje već gotov HTML. Nema čekanja na PHP procese. Next/Image komponenta automatski optimizira slike (WebP format, responzivne veličine), što je ključno za LCP jer su slike najčešće glavni “krivac” za sporost.

2. CLS (Cumulative Layout Shift) – Stabilnost

Next.js vas prisiljava na dobre prakse. Prilikom korištenja slika, Next.js zahtijeva definirane dimenzije ili koristi blur-up tehniku, što sprječava pomicanje sadržaja. Također, budući da se CSS učitava odmah uz HTML (obično putem Tailwind CSS-a ili CSS modula), nema naknadnog stiliziranja koje uzrokuje “skakanje” elemenata.

3. INP (Interaction to Next Paint) – Interaktivnost

INP zamjenjuje stari FID i mjeri koliko brzo stranica reagira na klik. Next.js koristi Code Splitting – učitava se samo onaj JavaScript koji je potreban za tu specifičnu stranicu. Budući da je glavni thread rasterećen od nepotrebnih WordPress skripti, stranica postaje trenutačno responzivna na korisničke akcije.

Praktična primjena na WordPressu

Backend: WordPress kao izvor podataka

Da bi WordPress postao učinkovit Headless CMS, potrebno je poduzeti sljedeće korake:

WPGraphQL: Instalirajte ovaj dodatak umjesto korištenja standardnog REST API-ja. GraphQL omogućuje da povučete točno one podatke koji vam trebaju (npr. samo naslov i sliku, bez 50 drugih polja), što ubrzava odziv.
Advanced Custom Fields (ACF): Koristite ACF za strukturiranje podataka koje ćete slati na frontend.
Webhooks: Podesite web-kuke tako da Next.js automatski pokrene novi “build” ili ISR (Incremental Static Regeneration) čim objavite novi članak u WordPressu.

Frontend: Next.js App Router optimizacija

U App Routeru koristite prednosti Server Components:

Server-Side Fetching: Dohvaćajte podatke izravno u komponenti. To smanjuje količinu JavaScripta koji se šalje klijentu.
Caching i ISR: Koristite fetch('url', { next: { revalidate: 3600 } }). Ovo omogućuje da stranica bude statična, ali da se automatski osvježi svakih sat vremena bez potrebe za ručnim buildom.
Streaming: Koristite loading.js datoteke kako biste korisniku odmah prikazali kostur stranice (Skeleton UI) dok se teži podaci učitavaju u pozadini.

Zašto ovo drastično popravlja Google PageSpeed rezultat?

Google PageSpeed Insights (Lighthouse) “obožava” ovu tehnologiju iz tri razloga:

Minimalni JavaScript: Next.js šalje samo ono nužno, dok standardni WordPress često učitava desetke skripti iz raznih pluginova koje na toj stranici uopće ne trebaju.
Savršen HTML: Next.js generira čisti, semantički HTML bez “div soup” koda koji često proizvode vizualni builderi (Elementor, Divi).
Moderni protokoli: Next.js automatski koristi HTTP/2+, modernu kompresiju i optimizaciju fontova.

Zaključak: Prelaskom na Headless WordPress i Next.js, vi ste efektivno pretvorili tešku CMS platformu u laganu, statičku aplikaciju visokih performansi. WordPress ostaje poznato sučelje za unos sadržaja, dok Next.js osigurava da taj sadržaj dođe do korisnika u milisekundama, što rezultira gotovo savršenim ocjenama na Google PageSpeed testu.