Što vam Google PageSpeed Insights govori? 📊

Što vam Google PageSpeed Insights govori? 📊

Luka Loran Kovar 9. travnja 2025.

Ako imate web stranicu, velika je vjerojatnost da ste čuli za Google PageSpeed Insights (PSI). Radi se o besplatnom Googleovu alatu koji vam “ocjenjuje” web stranicu i daje niz preporuka za poboljšanje performansi. No, među svim tim brojkama, bojama i tehničkim terminima – što je doista važno za SEO, korisničko iskustvo i uspjeh vaše stranice? Trebamo li se opterećivati postizanjem savršenih ocjena ili je fokus na nečem drugom?

U ovom opširnom blogu objasnit ćemo:

  1. Kako Google PageSpeed Insights funkcionira i što znače sve one metričke vrijednosti koje vam prikazuje.
  2. Koje preporuke (tzv. opportunities) zaista vrijedi slijediti, a koje smijete uzeti s dozom opreza.
  3. Koji konkretni koraci mogu značajno ubrzati učitavanje stranice i dovesti je do odličnog korisničkog iskustva.
  4. Koliko je važno dobiti “100/100” rezultat te gdje trebate povući crtu.

Na kraju dana, cilj nije ganjati savršenu ocjenu, nego stvoriti stranicu koja se brzo otvara, ne “trza” i omogućuje posjetitelju što ugodnije iskustvo. Krenimo redom! 🚀

1. Što je Google PageSpeed Insights? 🤔

Google PageSpeed Insights (PSI) besplatan je Googleov alat koji analizira performanse vaše web stranice i posebno se usredotočuje na brzinu učitavanja te određene UX (User Experience) faktore. Alat vrši analizu i za mobilnu i za desktop verziju stranice, a zatim generira ocjenu od 0 do 100, pri čemu veća ocjena znači bolje performanse.

Osim samog “broja”, PSI daje i detaljne preporuke za poboljšanje. Te preporuke obuhvaćaju stvari poput optimizacije slika, uklanjanja nepotrebnih skripti, prilagodbe keširanja i mnoštvo drugih tehničkih detalja. Sve to može utjecati na brzinu stranice, a time i na:

  • SEO rangiranje (Google sve više vrednuje brzinu)
  • Korisničko zadovoljstvo (nitko ne voli spore stranice)
  • Stopu konverzije (brže učitavanje = manja stopa odustajanja)

Link za testiranje:
Ako želite testirati vlastitu stranicu, možete otići na pagespeed.web.dev (službena Googleova domena za PSI). Unesite URL i pričekajte da vam alat izbaci rezultate.

2. Kako funkcionira ocjenjivanje? 🌐

Google PageSpeed Insights koristi dvije vrste podataka:

  1. Field Data (Real User Data)
    • Podaci prikupljeni od stvarnih korisnika koji posjećuju vašu stranicu (tzv. Chrome User Experience Report ili CrUX).
    • Ako vaša stranica ima dovoljno prometa, Google može dobiti “prave” metrike s terena, tj. koliko se brzo stranica učitala u prosjeku kod stvarnih posjetitelja.
  2. Lab Data (Simulacija)
    • Ako Google nema dovoljno “real user” podataka, ili ako želi pružiti dubinsku analizu, koristi tzv. Lab Data.
    • To znači da PSI “simulira” učitavanje stranice na prosječnom uređaju i mrežnoj vezi (npr. “typical mobile device” i 4G mreža).
    • Na temelju te simulacije alat zatim mjeri različite metrike brzine i daje preporuke kako ih popraviti.

U praksi, većina onoga što vidite u PSI-ju (poput brojnih “Opportunities” ili “Diagnostics”) temelji se upravo na Lab Data testiranju. Za vas je dobro pratiti i “Field Data” ako je dostupno – to su stvarni podaci s terena, a ti su za Googleov rangirajući algoritam (Core Web Vitals) najvažniji.

3. Značenje boja u PSI-ju 🎨

Kad dobijete rezultat testiranja, Google PageSpeed Insights vaš “score” prikazuje bojom:

  • 🟥 0–49 (loše)
  • 🟡 50–89 (prosječno)
  • 🟩 90–100 (odlično)

Tipično ćete primijetiti da je rezultat za mobilnu verziju obično niži nego za desktop. Zašto? Jer Google simulira slabiji mobitel i 4G vezu (ili čak 3G u nekim slučajevima), što realno odražava situaciju dijela korisnika. Ako dobijete ocjenu 65/100 za mobilnu verziju, a stranica se u stvarnom životu otvara brzo, nemojte se previše uzrujavati. Važno je da u praksi korisnici ne doživljavaju probleme.

Savjet: Umjesto da se fiksirate na boje i “broj” ocjene, više pažnje posvetite metrikama ispod te ocjene (poput LCP-a, CLS-a, TTI-a…). Upravo one otkrivaju gdje se nalaze stvarni problemi.

4. Najvažnije metrike koje PSI prikazuje 📏

Google PageSpeed Insights posebno ističe tzv. Core Web Vitals, a tu su i ostale mjerne vrijednosti koje vam mogu pomoći da shvatite brzinu stranice i kvalitetu korisničkog doživljaja. Evo kratkog pregleda:

  1. LCP (Largest Contentful Paint)
    • Mjeri koliko je vremena potrebno da se glavni vidljivi sadržaj (obično velika slika, glavni naslov i sl.) prikaže na ekranu.
    • Idealno: ispod 2.5 sekunde.
    • Ako LCP previše kasni, korisnik dugo gleda “prazninu” ili nepotpuno učitanu stranicu.
  2. FCP (First Contentful Paint)
    • Vrijeme kada se prvi element (tekst ili slika) pojavi na ekranu.
    • Idealno: ispod 1.8 sekundi.
    • Sličan LCP-u, ali fokusira se na prvi prikaz, dok se LCP bavi najvećim elementom.
  3. CLS (Cumulative Layout Shift)
    • Mjeri stabilnost layouta tijekom učitavanja – ako se elementi (poput gumbova ili slika) pomiču dok korisnik pokušava kliknuti, to stvara loše iskustvo.
    • Idealno: ispod 0.1 (što bliže nuli).
  4. TTI (Time to Interactive)
    • Vrijeme potrebno da stranica postane potpuno interaktivna. Primjerice, da gumbi reagiraju odmah nakon klika, da se može skrolati bez trzanja i sl.
    • Idealno: ispod 5 sekundi.
  5. Speed Index
    • Mjeri brzinu vizualnog prikaza sadržaja na ekranu. Što se sadržaj brže pojavi, to je Speed Index bolji.
    • Niže vrijednosti = bolje.
  6. TBT (Total Blocking Time)
    • Zbraja ukupno vrijeme (u milisekundama) tijekom kojeg je glavni “thread” preglednika zauzet i ne reagira na korisničke radnje.
    • Idealno: što je moguće manje.
    • Ako imate puno (teško) JavaScript koda, TBT može biti visok, što znači da korisnik, iako vidi stranicu, ne može odmah kliknuti ili skrolati bez trzanja.

Te metrike zajedno čine tzv. Core Web Vitals (ponajviše LCP, CLS i TBT/FID). Google je jasno istaknuo da te vrijednosti mogu utjecati na SEO rangiranje – naravno, nisu jedini faktor, ali svejedno je pametno obratiti pažnju na njih.

5. Koje “Preporuke” (Opportunities) su najčešće? 💡

Nakon što PageSpeed Insights analizira vašu stranicu, prikazuje vam listu “Opportunities” – tj. stavki koje možete poboljšati da biste ubrzali učitavanje. Najčešće susrećemo:

  1. “Eliminate render-blocking resources”
    • Znači da CSS i/ili JavaScript blokiraju učitavanje sadržaja.
    • Rješenje? Učitajte kritični CSS inline ili deferred, odgodite nepotrebne JS fajlove i slično.
  2. “Serve images in next-gen formats”
    • Predlaže da umjesto JPEG/PNG koristite formate poput WebP ili AVIF, koji su daleko manji pri istoj kvaliteti.
    • Time se smanjuje veličina datoteka i ubrzava učitavanje.
  3. “Reduce unused JavaScript”
    • Ako imate “hrpu” skripti (često dolazi uz nepotrebne pluginove), one troše vrijeme učitavanja i procesorske resurse, iako nisu nužne.
    • Rješenje? Ukloniti ili “isključiti” pluginove i skripte koje nisu od ključne važnosti.
  4. “Enable text compression”
    • Gzip ili Brotli kompresija. Ako vaš server to ne radi, stranica može biti nepotrebno “teška”.
    • Većina modernih hosting rješenja nudi kompresiju, samo ju treba uključiti.
  5. “Defer offscreen images” (lazy loading)
    • Umjesto da učitavate sve slike odjednom, učitavajte ih tek kad postanu vidljive (tj. kad ih korisnik doista treba vidjeti).
    • To značajno poboljšava vrijeme prikaza i smanjuje inicijalni payload.
  6. “Remove unused CSS”
    • Veliki CSS frameworkovi (Bootstrap, Tailwind i sl.) mogu imati hrpu klasa koje ne koristite.
    • Rješenje? Ako ste napredniji, možete generirati purged CSS fajl koji sadrži samo ono što koristite.

Važno: Neke preporuke PSI-ja mogu biti pretjerane ili nerealne za vašu konkretnu situaciju. Primjerice, ako koristite neki chat widget koji generira vanjsku skriptu, PageSpeed ga može “kritizirati”, ali vama je chat možda važan za korisničku podršku. Stoga uvijek postavite prioritete: što je ključno za vaše poslovanje, a čega se možete riješiti?

6. Kako konkretno poboljšati rezultat? 🏆

Evo praktičnih savjeta koji u pravilu najbrže popravljaju metrike:

  1. Komprimirajte slike
    • Koristite alate poput TinyPNG, ImageOptim, ili pluginove za WordPress (npr. Imagify, ShortPixel, Smush) kako biste smanjili veličinu slika.
    • Prelazak na next-gen formate (WebP, AVIF) može drastično umanjiti “težinu” slika.
  2. Lazy loading
    • Uključite lazy load za slike i iframeove (npr. YouTube video ugrađen na stranici).
    • Tako se prvo učitava samo onaj sadržaj kojeg korisnik vidi na ekranu, dok se ostatak učitava kasnije, kad dođe do njega.
  3. Keširanje (caching)
    • Ako koristite WordPress, postoje pluginovi poput WP Rocket, LiteSpeed Cache, W3 Total Cache ili WP Super Cache.
    • Cache pohranjuje statičke verzije stranica i smanjuje opterećenje servera. Korisnici tada brže dobivaju odgovor.
  4. CDN (Content Delivery Network)
    • Servisi poput Cloudflare, BunnyCDN ili KeyCDN mogu proširiti vaš sadržaj na servere diljem svijeta, pa korisnici “povlače” podatke s njima najbliže lokacije.
    • To drastično smanjuje latenciju i ubrzava isporuku statičkih datoteka.
  5. Smanjite broj vanjskih skripti
    • Ako imate hrpu widgeta (chat, analitika, fontovi, pluginovi za društvene mreže…), svaka od tih skripti može usporiti učitavanje.
    • Razmislite: Što je uistinu neophodno? Uklonite ili odgodite one koje nisu ključne za inicijalni prikaz.
  6. Ugasite nepotrebne pluginove (na CMS-ovima)
    • Svaki aktivni plugin može donositi dodatne CSS/JS datoteke i upite.
    • Ako vam plugin ne treba, uklonite ga (ili ga barem “deaktivirajte”) i provjerite je li učitavanje brže.
  7. Optimizacija koda
    • “Minify” i “combine” CSS i JS datoteke ako je moguće.
    • Uklonite suvišne komentare, razmake, duple linije koda.
    • Ipak, budite oprezni – ponekad “combine” može uzrokovati konflikt s pluginovima. Uvijek testirajte!
  8. Brži hosting
    • Ako je server spor, čak i uz super optimizacije nećete postići vrhunske rezultate.
    • Za ozbiljne projekte razmislite o kvalitetnom VPS-u ili cloud rješenju.

Primjer prakse:
Zamislite da imate WordPress stranicu koja na naslovnici prikazuje 10 velikih slika bez kompresije, učitava 5 vanjskih skripti (chat widget, dva različita analytics alata, integrirani Instagram feed…) i nudi nepotreban slideshow. U tom slučaju, samo kompresija slika, uklanjanje slideshowa i chat widgeta (ako vam nije neophodan) te aktiviranje keširanja može skočiti ocjenu s recimo 40/100 na 80+/100. Uz to, realnim korisnicima stranica će se primjetno brže otvarati.

7. Trebate li težiti “100/100” rezultatu? 🏅

Kratak odgovor: Ne, nipošto po svaku cijenu.

Iako je uvijek lijepo vidjeti “zeleno” svjetlo i visok score, ponekad pretjerano optimiziranje (npr. uklanjanje svih skripti, ograničavanje funkcionalnosti, agresivno minificiranje slika do loše kvalitete) može dovesti do:

  • Lošijeg korisničkog iskustva – jer ste uklonili neke korisne elemente ili dizajnerske značajke.
  • Estetskih problema – slike koje su previše “isprane” ili pixelizirane.
  • Neispravnog rada stranice – ako “spajate” ili “deferate” neke ključne JavaScript fajlove, može doći do bugova.

Vaš je cilj stvoriti stranicu koja se učita dovoljno brzo i radi besprijekorno za korisnika. U praksi, score iznad 80 (u žutom ili zelenom području) već pokazuje da radite dobar posao. Ako možete doći do 90+ bez žrtvovanja dizajna i ključne funkcionalnosti – super! Ali ne treba se opterećivati s “mora biti 100”.

Podsjetnik: Google čak i sam kaže da PageSpeed Insight score nije izravni SEO faktor. Ono što je važnije su Core Web Vitals i pravo korisničko iskustvo u praksi.

8. Najčešći problemi i kako ih riješiti 😅

Pogledajmo neka tipična uska grla koja PSI otkriva:

  1. Prevelike slike:
    • Ponekad ljudi učitaju ogromne slike (npr. 4000×3000 piksela) i onda ih CSS-om smanje.
    • Rješenje: kompresija + prilagodba dimenzija (npr. 1200 px širine za tipičan hero banner).
  2. Previše pluginova (WordPress, Joomla…):
    • Svaki plugin ima “trošak” u smislu CSS-a, JS-a i upita prema bazi.
    • Rješenje: inventarizirajte pluginove, obrišite one koji vam realno ne trebaju.
  3. Neiskorišteni Google Fonts:
    • Ako učitavate 5 različitih fontova, a koristite 2, to je nepotrebno.
    • Rješenje: ograničite broj stilova i težina fonta (npr. Regular, Bold).
  4. Nepostojanje keširanja:
    • Bez keširanja svaki se put svi resursi učitavaju iznova.
    • Rješenje: postavite keširanje putem .htaccessa ili pluginova.
  5. Spor hosting:
    • Ako ste na overcrowded shared hostingu, ping do servera i CPU resursi mogu biti slabi.
    • Rješenje: razmislite o nadogradnji na kvalitetniji hosting, VPS ili cloud.
  6. Nepravilno postavljanje lazy load-a:
    • Ako se slike iznad preklopa (engl. above the fold) također “lazy loadaju”, posjetitelj može vidjeti kratku “prazninu”.
    • Rješenje: isključite lazy load za one ključne elemente koji se odmah prikazuju.

Rješavanje ovih problema često dramatično poboljšava i praktičnu brzinu i ocjenu na PSI-ju.

9. Primjer iz prakse: Kako bismo riješili tipični scenarij? 🔧

Zamislimo situaciju: Imate WordPress blog s temom koja je puna značajki (slideshow, fancy gumbi, animacije), koristite 10 pluginova, a slike se učitavaju u PNG formatu. Rezultat? PSI score = 45/100 na mobilnoj verziji. Stranica se učitava skoro 5 sekundi na prosječnom mobitelu.

Koraci za poboljšanje:

  1. Instalacija cache plugina
    • Recimo, LiteSpeed Cache (ako vaš hosting podržava LiteSpeed server) ili WP Rocket.
    • Konfigurirate page cache + minifikaciju CSS/JS + lazy load za slike koje nisu u prvom ekranu.
  2. Kompresija i konverzija slika
    • Svim PNG-ovima (osim onih koji mora biti PNG, npr. logotip s transparentnom pozadinom) prelazak u JPG ili WebP.
    • To može uštedjeti i do 80% veličine.
  3. Uklanjanje nepotrebnih pluginova
    • Možda vam “WooCommerce Product Compare” plugin nije potreban ako imate samo 3 proizvoda.
    • Možda “Popular Posts” widget nije toliko kritičan – svaka manja ušteda pomaže.
  4. Premještanje chat widgeta
    • Možete ga učitavati tek nakon što se stranica učita (odgoditi ga), ili ga dodati samo na odabrane stranice.
  5. Fontovi
    • Umjesto 4 različita “weighta” (300, 400, 600, 700), zadržite dva (400, 700). To ubrzava preuzimanje fontova.

Rezultat:

  • U roku od sat-dva rada, score može skočiti na recimo 80–85/100, a realno učitavanje stranice može pasti na 2-3 sekunde na mobitelu. Takvo poboljšanje već je drastična promjena u očima posjetitelja.

10. Zaključak: PSI je koristan alat, ali ne krajnji sudac 🧠

Google PageSpeed Insights dobar je pokazatelj gdje bi se mogli nalaziti problemi s brzinom i UX-om na vašoj stranici. Ipak, treba ga gledati kao smjernicu, a ne apsolutnu presudu. Razlog? Neke preporuke mogu biti previše restriktivne ili se kose s vašim poslovnim ciljevima (npr. možda morate imati chat widget unatoč padu ocjene).

Najvažnije je zapamtiti:

  • Cilj je osigurati brzo učitavanje (idealno ispod 3 sekunde) i dobro korisničko iskustvo (bez trzanja, pomicanja elemenata i blokiranja interakcije).
  • Core Web Vitals (LCP, CLS, FID/TBT) glavni su faktori koje Google mjeri i koji mogu utjecati na vaš SEO.
  • Ocjena 100/100 nije nužna, posebno ako to znači “osakatiti” stranicu do točke gdje gubite važne funkcije ili dizajn.

Ako nakon čitanja svega gore navedenog osjećate da vam treba više pomoći, razmislite o angažiranju web developera ili SEO stručnjaka s iskustvom u optimizaciji brzine. Često se isplati uložiti u profesionalnu optimizaciju, jer se svaka dodatna sekunda sporijeg učitavanja može negativno odraziti na konverzije i rangiranje.

Kratki rezime:

  1. Testirajte stranicu na pagespeed.web.dev.
  2. Pogledajte gdje su stvarna uska grla (slike, CSS/JS, hosting…).
  3. Postavite prioritete – razlučite što je zaista ključno, a što se može žrtvovati.
  4. Provedite optimizacije korak po korak: kompresija slika, lazy load, caching, CDN, uklanjanje suvišnih skripti.
  5. Provjerite rezultate ponovno, ali i osluškujte povratne informacije korisnika.
  6. Ne jurite savršenstvo; bitno je dovoljno brzo i ugodno iskustvo, a ne apsolutni maksimum bodova.

S ovim pristupom, PageSpeed Insights postaje vaš koristan saveznik, pomažući vam da održite brzu, stabilnu i učinkovitu stranicu – što izravno vodi do boljeg SEO-a, veće posjećenosti i, na kraju, boljih poslovnih rezultata. 💼⚡

Sretno s optimizacijom – i neka vaša stranica zasja brzinom! ✨

Related Posts