Otvorite svoju stranicu na mobitelu. Ne u uredu na WiFiju, nego vani, preko mobilnih podataka, ondje gdje je vaši gosti stvarno otvaraju. Brojite naglas. Jedan, dva, tri. Ako još gledate u bijeli ekran, upravo ste osjetili ono što vaš posjetitelj osjeća svaki dan, s jednom razlikom: vi ćete pričekati, on neće. Zato ste ovdje. Želite znati kako ubrzati web stranicu, konkretno, korak po korak i bez izmotavanja.
Ovo je praktičan servisni priručnik, a ne još jedan tekst o tome zašto je brzina važna. Teoriju, Googleove metrike i cijelu priču o mjerama poput LCP-a obradili smo u vodiču o brzini i Core Web Vitalsima. Ovdje se radi. Idemo redom kroz zahvate: što napraviti prvo, kojim alatom, na što paziti i kako provjeriti da niste ništa slomili.
Jedno pravilo prije svega. Redoslijed nije nebitan detalj, redoslijed je pola rezultata: prvo izmjerite, zatim slike, pa cache, a tek na kraju hosting i CDN. Tko krene od CDN-a, a na naslovnici drži fotografije od četiri megabajta, oprao je auto kojem motor ne pali.
Sadržaj
- Prvo izmjerite, pa popravljajte. Nikad obrnuto
- Prije prvog poteza: backup, pa tek onda alati
- Korak 1: slike su krivac broj jedan
- Korak 2: cache je najjeftinija sekunda koju ćete kupiti
- Korak 3: skinite prikolicu, počistite pluginove
- Korak 4: tema i skripte koje drže ekran bijelim
- Korak 5: fontovi, dva su stil, deset je teret
- Korak 6: kada nije kriva stranica, nego temelj
- Korak 7: CDN, pojačanje koje dolazi na kraj reda
- Kako ubrzati web stranicu pravim redom: tablica zahvata
- Brzi servis: kako ubrzati web stranicu u 60 minuta
- Koliko je dovoljno brzo? Korisnik prije brojke
- Što brzina znači za Google, bez mistifikacije
- Ubrzavanje web stranice nije projekt, nego navika
- Pitanja koja uvijek stignu nakon ovog vodiča
Prvo izmjerite, pa popravljajte. Nikad obrnuto
Svaki ozbiljan plan kako ubrzati web stranicu počinje nalazom, a ne zahvatom. Bez mjerenja popravljate naslijepo: potrošit ćete vikend na postavke pluginova, a pravi krivac je možda jedna jedina fotografija na naslovnici. Mjerenje vam u petnaest minuta pokaže gdje curi.
Otvorite PageSpeed Insights, upišite adresu svoje stranice i pričekajte nalaz. Odmah prvo pravilo čitanja: gledajte karticu za mobilne uređaje, ne onu za računala. Na računalu je gotovo svaka stranica pristojna. Na mobitelu padaju maske.
Tri dijela nalaza, točno ovim redom
- Stvarni korisnici (vrh nalaza). Ako stranica ima dovoljno prometa, Google ovdje pokazuje iskustvo pravih posjetitelja kroz protekla 4 tjedna. Zeleno znači da ljudi ne pate, ma što pisalo niže.
- Ocjena performansi. Laboratorijska simulacija na namjerno sporijem uređaju i mreži. Služi za usporedbu prije i poslije zahvata, a ne za paniku.
- Prilike i dijagnostika. Najvredniji dio: popis onoga što vas usporava, poredan po procijenjenoj uštedi. To je vaš popis zadataka za ostatak vodiča.
Ocjena je termometar. Popis prilika je dijagnoza. Liječite dijagnozu, a termometar će se popraviti sam.
Za drugu rundu otvorite GTmetrix. Njegov vodopadni prikaz izlista svaku datoteku koju stranica učitava, s veličinom i trajanjem. Kad vidite da jedna fotografija teži više od cijelog ostatka stranice, više se nećete pitati odakle krenuti.
Najvažniji mjerni instrument ipak nosite u džepu
Isključite WiFi i učitajte naslovnicu u anonimnom prozoru, preko mobilnih podataka. Zatim najvažniju podstranicu, cjenik ili kontakt. Kakav je osjećaj? Alati mjere milisekunde, ali strpljenje vaših gostiju mjeri se dojmom. Zabilježite oboje, ocjenu i dojam. To je nulta točka s kojom ćete uspoređivati svaki sljedeći zahvat.
Prije prvog poteza: backup, pa tek onda alati
Dio zahvata iz ovog vodiča posve je bezopasan. Kompresija slika uz sačuvane originale, uključivanje cachea, brisanje mrtvog plugina: sve se vraća u minuti. S druge strane, minifikacija skripti, odgoda JavaScripta i promjena PHP verzije znaju razbiti izgled stranice, a u rijetkim slučajevima i srušiti je cijelu.
Zato prije koraka 4 i svih zahvata na hostingu napravite potpuni backup, i datoteka i baze. Većina hostinga to nudi jednim klikom u korisničkom panelu. Usput provjerite izvodi li se automatski backup uopće; mnogi otkriju da ne radi baš onog dana kad im zatreba. Pravilo za sve što slijedi: jedan zahvat, jedna provjera, uvijek put natrag.
Korak 1: slike su krivac broj jedan. Pola megabajta je nova norma, ne četiri
Fotograf vam pošalje fotografije apartmana. Svaka je široka šest tisuća piksela i teška po nekoliko megabajta. Vi ih, sasvim razumljivo, ubacite na stranicu takve kakve jesu. Upravo tako nastaje većina sporih stranica u Hrvatskoj: galerije pune neobrađenih fotografija ravno iz aparata.
Slika od četiri megabajta na mobilnoj mreži je selidba u kojoj kamion vozi po jednu žlicu. Promet ogroman, učinak mizeran. Ekran mobitela ne može prikazati ni trećinu tih piksela; ostatak vaš gost plaća čekanjem. Četiri zahvata rješavaju slike, ovim redom:
- Smanjite dimenzije. Za sliku preko cijele širine dovoljno je oko 1600 do 1920 piksela, za galerije i blog još manje. Nijedan ekran vaših posjetitelja ne treba 6000.
- Prijeđite na WebP. Moderni format koji uz isti izgled daje osjetno manje datoteke. WordPress ga podržava još od verzije 5.8, a smjernice o formatima nudi Googleov web.dev.
- Komprimirajte. Plugin poput ShortPixela ili Imagifyja provuče cijelu medijsku knjižnicu odjednom, a nove slike obrađuje sam pri uploadu.
- Provjerite lazy load. Slike ispod ruba ekrana učitavaju se tek kad korisnik doskrola. WordPress to radi automatski od verzije 5.5; provjerite samo da tema to nije isključila.
Tipičan primjer iz naše prakse: fotografija terase ravno s aparata, JPEG od 4,3 MB. Ista fotografija na 1600 piksela u WebP formatu: oko 150 KB. Golim okom razlike nema. Na mobilnim podacima to je razlika između gosta koji lista galeriju i gosta koji je otišao.
Prije masovne kompresije provjerite čuva li plugin originale ili sami kopirajte mapu s medijima. I usvojite naviku: nijedna slika više ne ide na stranicu ravno s mobitela ni iz fotografova ZIP-a.
Korak 2: cache je najjeftinija sekunda koju ćete ikad kupiti
Bez cachea WordPress za svaki posjet iznova sastavlja stranicu: upit u bazu, slaganje predloška, tek onda isporuka. Page cache tu istu stranicu sastavi jednom i gotovu kopiju poslužuje svima sljedećima. Zamislite konobara koji najtraženija jela drži spremna na pultu umjesto da za svaku narudžbu trči u kuhinju.
Poslije slika, ovo je najveći dobitak na većini stranica, a posla je za desetak minuta. Instalirajte jedan cache plugin. Jedan, ne dva; dva cache plugina su dva vozača za istim volanom. Vrti li vaš hosting LiteSpeed poslužitelj, LiteSpeed Cache je prirodan i besplatan izbor. WP Rocket je plaćena opcija koja većinu postavki složi sama. Prije instalacije pitajte hosting nudi li već vlastiti cache na razini poslužitelja, da se alati međusobno ne gaze.
Uz page cache uključite i predmemoriju preglednika. Logotip, stilove i skripte posjetiteljev preglednik tada zapamti, pa ih pri drugom posjetu ne skida ponovno. U dobrim je pluginovima to jedna kvačica, a povratnom posjetitelju stranica djeluje trenutna.
Hoće li cache slomiti formu ili košaricu? Provjerite u pet minuta
Ovo je najčešći strah, pa ga rješavamo odmah. Cache poslužuje gotove kopije, a košarica i prijava su žive stvari. Dobri pluginovi zato unaprijed izuzimaju košaricu, blagajnu i prijavljene korisnike. Vaš je posao samo provjera:
- Anonimni prozor. Kao prijavljenog administratora cache vas obično zaobilazi, pa vidite krivu sliku stanja.
- Kontakt forma. Pošaljite testnu poruku i provjerite da je stigla u sandučić.
- Košarica i blagajna. Imate li trgovinu, dodajte proizvod i prođite cijeli put do plaćanja.
- Pražnjenje cachea. Nakon svake veće izmjene sadržaja kliknite purge, da posjetitelji ne gledaju staru verziju stranice.
Zapne li nešto, ne brišite plugin u panici. Otvorite postavke, pronađite popis izuzetaka i dodajte problematičnu stranicu. To je cijela mudrost oko koje se digla tolika prašina.
Korak 3: stranica s 15 pluginova je auto s prikolicom na usponu
Možda i vozi, ali ne pitajte kako. Pritom ne vuku svi pluginovi jednako: neki dodaju miligram, neki kilograme, a najgori se učitavaju na svakoj stranici iako trebaju samo na jednoj. Broj pluginova sam po sebi nije problem. Teret jest.
Napravite popis instaliranih pluginova i za svaki odgovorite na dva pitanja: čemu služi i kad ste ga zadnji put stvarno trebali. Nemate odgovor? Deaktivirajte ga i promatrajte stranicu tjedan dana. Sve radi? Obrišite ga. Deaktiviran plugin doduše ne usporava stranicu, ali stoji na disku kao nezaključana pomoćna vrata: sigurnosni rizik bez ikakve koristi.
Na koga prvo posumnjati? Na vizualne buildere sa svim uključenim modulima, slidere, pluginove koji crtaju statistiku u administraciji i pakete “sve u jednom” iz kojih koristite jednu funkciju. Sumnjivca raskrinkate jednostavno: deaktivirajte ga, ponovite mjerenje na PageSpeedu i usporedite s nultom točkom. Brojke ne lažu.
Korak 4: tema i skripte, ili zašto gledate u bijeli ekran
Znate onaj trenutak kad se stranica učitava, a ekran samo stoji bijel? Preglednik tada skida i čita stilove i skripte koji blokiraju prikaz: dok njih ne obradi, ne smije nacrtati ništa. PageSpeed ih u prilikama prijavljuje kao resurse koji blokiraju prikazivanje.
Dobra vijest: velik dio rješenja već imate, u cache pluginu iz koraka 2. Loša vijest: ovdje se najlakše nešto slomi. Zato ponavljam pravilo: jedna kvačica, jedno mjerenje, jedan pogled na stranicu.
- Minifikacija. Izbacivanje suvišnih razmaka i komentara iz CSS-a i JavaScripta. U pravilu bezopasno; uključite, pa provjerite izgled stranice.
- Odgoda JavaScripta. Skripte pričekaju da se sadržaj iscrta, pa stranica djeluje brža. Tu zna zaštekati slider ili kalendar rezervacija, zato backup prije i test odmah poslije.
- Spajanje datoteka. Nekad pomogne, na modernim vezama često ne. Isprobajte i zadržite samo ako mjerenje kaže da vrijedi.
Pogledajte i vanjske skripte. Chat koji nitko ne koristi, tri koda za analitiku, piksel kampanje koja je završila lani: svaka vanjska skripta je gost koji dolazi s vlastitom prtljagom. Izbacite sve što više ne radi za vas.
A tema? Napuhana višenamjenska tema vuče module za trgovinu, forum i portfolio čak i kad ih ne koristite. Nju ne mijenjate danas, jer zamjena teme je mali redizajn. Ali kod sljedećeg redizajna neka lakoća bude kriterij broj jedan, ispred broja demo naslovnica.
Korak 5: fontovi. Dva su stil, deset je teret
Fontovi su stavka koju svi preskoče, a zbraja se. Svaki font i svaki njegov rez, obični, podebljani, kurziv, zasebna je datoteka koju preglednik mora skinuti prije nego što tekst dobije konačan izgled.
Držite se dva fonta i ukupno tri do četiri reza. Birajte WOFF2 format, a Google Fonts razmislite hostati lokalno: brže je, a usput uredite i pitanje privatnosti. Provjerite i da tema koristi zamjenski prikaz teksta, pa posjetitelj čita odmah, sistemskim fontom, dok se vaš font učitava u pozadini. Deset rezova ukrasne tipografije čitatelj ne doživi kao stil. Doživi ih kao čekanje.
Korak 6: kada nije kriva stranica, nego temelj ispod nje
Ponekad ste optimizirali sve, a stranica i dalje “razmišlja” prije nego što se išta pojavi. Taj početni muk je vrijeme odziva poslužitelja: koliko serveru treba da uopće počne slati stranicu. Prepoznat ćete ga po upozorenju o vremenu odziva na PageSpeedu, ili po tome što stranica ujutro leti, a popodne puže jer server dijelite s previše susjeda. Tada je red na temelj, a ne na nove kvačice.
Prvo iskoristite ono što već plaćate. U korisničkom panelu podignite PHP na aktualnu verziju, jer novije verzije donose mjerljivo ubrzanje, i uključite cache na razini poslužitelja ako postoji. Ako ni to ne pomogne, vrijeme je za jači paket ili selidbu; koga i po kojim kriterijima birati, raspisali smo u usporedbi hostinga u Hrvatskoj.
I jedan stav koji će vam sačuvati novac: ne kupujte CDN da biste zakrpali spor server. Temelj se ne krpa fasadom.
Korak 7: CDN, pojačanje koje dolazi na kraj reda
CDN drži kopije vaših statičkih datoteka na poslužiteljima diljem svijeta i svakom posjetitelju servira najbližu. Zvuči moćno, i jest, ali samo ako vam publika dolazi izdaleka.
Iznajmljujete apartmane, a gosti vas otvaraju iz Njemačke i Skandinavije? CDN ima itekako smisla, a besplatna razina Cloudflarea sasvim je pristojan početak. Vodite lokalni obrt s isključivo hrvatskom publikom i hostingom u Hrvatskoj ili bližoj okolici? Ušteda će biti mršava. Zato CDN stoji na začelju plana: to je pojačanje za već sređenu stranicu, uvedeno tek kad prethodnih šest koraka odradi svoje.
Kako ubrzati web stranicu pravim redom: tablica zahvata
Složimo sada sve na jedno mjesto. Ovako izgleda odgovor na pitanje kako ubrzati web stranicu kad ga svedete na jednu tablicu: krećete odozgo i ne preskačete redove.
| Redoslijed | Zahvat | Očekivani učinak | Težina izvedbe |
|---|---|---|---|
| 1. | Mjerenje: PageSpeed Insights + vlastiti mobitel | Bez njega radite naslijepo | Lako, 15 minuta |
| 2. | Slike: dimenzije, WebP, kompresija, lazy load | Najveći na većini stranica | Lako |
| 3. | Page cache + predmemorija preglednika | Velik, osjeti se odmah | Lako, uz test forme i košarice |
| 4. | Audit i čišćenje pluginova | Srednji do velik | Srednje |
| 5. | Minifikacija i odgoda skripti | Srednji | Zahtjevnije, obavezan backup |
| 6. | Fontovi: manje rezova, WOFF2, lokalno | Manji, ali vidljiv | Lako |
| 7. | PHP verzija, jači paket ili selidba hostinga | Velik kad je server usko grlo | Srednje do zahtjevno |
| 8. | CDN | Velik samo za udaljenu publiku | Srednje |
Primijetite gdje stoji CDN. Na dnu. A upravo se on najčešće reklamira kao čarobno rješenje, odmah uz “turbo” dodatke i skupe teme. Najveći dobici su dosadni: slike i cache. Vjerojatno ih baš zato toliki preskaču.
Brzi servis: kako ubrzati web stranicu u 60 minuta
Nemate cijeli vikend? Evo kako ubrzati web stranicu u sat vremena, sa štopericom u ruci. Ovo je trijaža koja pokriva zahvate s najvećim učinkom:
- 0–10 min: izmjerite i zabilježite. PageSpeed za mobilne uređaje, screenshot nalaza, pa učitajte stranicu na svom mobitelu preko mobilnih podataka.
- 10–15 min: osigurajte se. Provjerite da backup postoji i da je svjež.
- 15–35 min: slike. Instalirajte plugin za kompresiju i pustite ga na najveće slike. Naslovnicu obradite prvu.
- 35–45 min: cache. Jedan page cache plugin, osnovne postavke, uključena predmemorija preglednika.
- 45–50 min: provjera. Anonimni prozor: izgled, kontakt forma, košarica ako je imate.
- 50–55 min: pluginovi. Deaktivirajte očite viškove; brisanje može pričekati tjedan dana promatranja.
- 55–60 min: ponovno mjerenje. Usporedite s početnim nalazom i zapišite razliku.
U sat vremena nećete stići sve, ali hoćete slike i cache. Kod većine stranica koje su nam prošle kroz ruke upravo ta dva koraka naprave razliku koju gost osjeti na mobitelu, bez ikakvog gledanja u brojke.
Koliko je dovoljno brzo? Korisnik oprašta prije nego PageSpeed
Sad neugodno pitanje: koji je rezultat dovoljan? Jurnjava za 100 od 100 je hobi, ne posao. Naše je mjerilo uvijek isto: korisnik prije brojke. Stranica je dovoljno brza kad je gost na prosječnom mobitelu otvori, prolista i pošalje upit, a da nijednom ne pomisli na čekanje.
Za orijentaciju u brojkama: zeleni podaci stvarnih korisnika vrijede više od bilo koje laboratorijske ocjene, a mobilna ocjena iznad osamdesetak za mali poslovni web sasvim je miran san. Razlika između 92 i 98? Taština. Sate koje bi pojela tih šest bodova pametnije je uložiti u sadržaj koji prodaje.
I bez panike ako ocjena varira od mjerenja do mjerenja; laboratorijski test ima svoje oscilacije. Pratite trend kroz mjesece, ne jedno jutro. Svaka sekunda čekanja košta posjetitelje, no razliku koju čovjek stvarno osjeti mjerite sekundama, ne bodovima.
Što brzina znači za Google, bez mistifikacije
Brzina je Googleu signal kvalitete i dio priče o Core Web Vitalsima, ali nemojte je pretvarati u sveto pismo: sjajan sadržaj na osrednje brzoj stranici pobjeđuje prazan tekst na munjevitoj. Brža stranica pomaže dvostruko. Korisnici ostaju i vraćaju se, a Google učinkovitije obilazi i indeksira vaše stranice.
Metrike, pragove i cijelu teoriju već smo raspakirali u vodiču o Core Web Vitalsima s početka teksta. A gdje brzina sjeda u širu sliku, od indeksiranja do sigurnosti, pokazuje naš vodič kroz tehnički SEO.
Ubrzavanje web stranice nije projekt, nego navika
Stranica koju danas ubrzate za godinu će opet usporiti. Netko doda plugin, netko ubaci trideset fotografija s mobitela, baza naraste, tema dobije tri ažuriranja. Entropija radi protiv vas, tiho i uporno, pa se i ubrzavanje web stranice mora ponavljati kao servis auta.
Rutina je skromna: jednom mjesečno mjerenje na PageSpeedu, ažuriranje WordPressa, teme i pluginova uz backup, pogled na nove slike i čišćenje viškova. Sat vremena mjesečno. Nemate za to ni vremena ni živaca? Upravo je to posao koji za klijente radimo kroz održavanje web stranice: mi mjerimo i ubrzavamo, vi radite svoj posao.
Pitanja koja uvijek stignu nakon ovog vodiča
Mogu li sve ovo napraviti sam, bez programera?
Većim dijelom da. Mjerenje, slike, cache i čišćenje pluginova posao su za svakoga tko zna instalirati WordPress plugin, a to je srž odgovora na pitanje kako ubrzati web stranicu vlastitim snagama. Oprez počinje kod minifikacije i odgode skripti. Selidbu hostinga i zahvate u kod prepustite nekome tko to radi svaki dan.
Besplatan ili plaćeni cache plugin?
Prvo provjerite što hosting već nudi; možda plaćate cache koji uopće ne koristite. LiteSpeed Cache je besplatan i na odgovarajućem poslužitelju igra u samom vrhu. Plaćene opcije poput WP Rocketa kupuju vam jednostavnost i podršku, a ne nužno bolji rezultat. Krenite s besplatnim, pa neka mjerenje presudi.
Zašto je ocjena na mobitelu puno gora nego na računalu?
Zato što mobilni test namjerno simulira slabiji uređaj i sporiju mrežu. To ima smisla: velik dio vaših posjetitelja stranicu otvara upravo tako, negdje između plaže i auta. Optimizirajte za mobilnu ocjenu, a računalna će se posložiti sama od sebe.
Hoće li kompresija uništiti kvalitetu mojih fotografija?
Uz razumne postavke neće. Pametna kompresija izbacuje podatke koje oko ionako ne registrira. Za mirniji san odaberite plugin koji čuva originale, pa svaku sliku po potrebi vratite jednim klikom. Razliku ćete tražiti povećalom, a gost će je osjetiti samo kroz brže listanje galerije.
Koliko često ponavljati cijeli postupak?
Potpuni prolaz kroz svih sedam koraka jednom godišnje, ili nakon svake veće promjene poput redizajna i vala novog sadržaja. Kratko kontrolno mjerenje jednom mjesečno. Tako pad primijetite na brojkama, a ne tek kad presuše upiti.
Zaključak: sekunda po sekunda do stranice koja ne tjera goste
Rezimirajmo bez uljepšavanja. Kako ubrzati web stranicu? Izmjerite stanje, sredite slike, uključite cache, počistite pluginove, pa tek onda dirajte skripte, hosting i CDN. Svaki zahvat potvrdite mjerenjem i vlastitim palcem na mobitelu. Dosadno? Pomalo. Djelotvorno? Svaki put.
A ako biste radije da štopericu držimo mi, javite nam se. Pogledat ćemo vašu stranicu, izmjeriti gdje gubi sekunde i poslati vam konkretan plan: što bismo napravili prvo, što to mijenja i koliko košta. Vaš gost na mobilnim podacima broji do tri. Pobrinite se da stranica do tri već stoji pred njim.