Kako ubrzati web stranicu: praktičan popis

Web stranicu ubrzavaš tako da je prvo izmjeriš alatom PageSpeed Insights, a zatim popraviš najveći uzrok koji ti pokaže — obično prevelike slike, previše JavaScripta, teške fontove ili skripte trećih strana. Cilj su Googleovi „dobri” ciljevi Core Web Vitals: glavni sadržaj vidljiv unutar 2,5 sekunde, odgovor na dodir unutar 200 milisekundi i gotovo nikakvo skakanje rasporeda. Većina stranica do toga dolazi s nekoliko promjena, a ne s prepisivanjem.

Izmjeri prije nego što išta promijeniš

Nagađanje troši vrijeme. Dva besplatna alata pokrivaju gotovo sve:

• PageSpeed Insights (pagespeed.web.dev) — zalijepi živu adresu. Prikazuje terenske podatke od stvarnih korisnika Chromea (ako stranica ima dovoljno prometa) i laboratorijske podatke iz simuliranog učitavanja, uz popis konkretnih problema.
• Lighthouse u Chrome DevTools — isti laboratorijski test, pokrenut na bilo kojoj stranici koju možeš otvoriti, uključujući pregled. Testiraj u mobilnom načinu rada; na telefonima sporijih mreža problemi se najbolje vide.

Brojke koje su važne su Googleovi Core Web Vitals. Od rujna 2026. Googleova dokumentacija na web.dev daje ove „dobre” pragove, mjerene na 75. percentilu učitavanja stranica:

INP je 2024. zamijenio stariju metriku First Input Delay. Ako neki alat još prikazuje FID, zastario je.

Zapiši početne brojke. Nakon svake promjene ponovno testiraj da znaš što je pomoglo.

Gdje ide vrijeme: mogućnosti i kompromisi

Svaki čest uzrok ima popravak, a svaki popravak ima cijenu. Počni s onima na vrhu — najjeftiniji su i najčešći.

Slike

Slike su najčešći problem i najlakše ih je popraviti. Fotografija od 4000 piksela prikazana na 800 piksela širine tjera svakog posjetitelja da preuzme pet puta više nego što vidi.

• Poslužuj slike u veličini u kojoj se prikazuju, s responzivnim srcset veličinama za telefone i desktope.
• Koristi moderne formate (WebP ili AVIF) i razumnu kompresiju.
• Postavi width i height na svaku sliku da preglednik rezervira prostor. Samo to rješava većinu pomicanja rasporeda.
• Lijeno učitavaj slike ispod preklopa s loading="lazy".
• Nikad ne lijeno učitavaj glavnu sliku na vrhu stranice. Googleove smjernice za LCP su oštre po tom pitanju: lijeno učitavanje LCP slike uvijek ju odgađa. Umjesto toga daj joj fetchpriority="high".

JavaScript

Mnoge web stranice izrađene uz AI su jednostranične aplikacije (SPA): preglednik preuzme JavaScript paket, pa tek onda iscrta stranicu. Što je paket veći, to je duži prazan ekran. Popravci, redom po naporu:

1. Ukloni što ne koristiš. Zatraži popis ovisnosti i izbaci biblioteke koje su dodane jednom i zaboravljene — biblioteka za datume zbog jednog datuma, cijeli paket ikona za pet ikona.
2. Podijeli po ruti. Učitaj kod za administratorsku nadzornu ploču tek kad je netko otvori, a ne na početnoj stranici.
3. Prerenderiraj javne stranice. Marketinška stranica koja se isporučuje kao pravi HTML pojavljuje se prije nego što se išta izvrši u JavaScriptu. To također pomaže tražilicama; vidi SEO za web stranice izgrađene uz AI.

Spor INP obično znači jedan dugi zadatak koji blokira stranicu — filtriranje ogromnog popisa pri svakom pritisku tipke ili ponovno iscrtavanje cijele tablice kad se promijeni jedna ćelija. Panel Performance u Chrome DevTools pokazuje što.

Fontovi

Svaka obitelj fonta i svaka debljina je još jedna datoteka. Dvije obitelji i tri ili četiri debljine obično su dovoljne. Prethodno učitaj font koji se koristi iznad preklopa, koristi font-display: swap da se tekst odmah prikaže i sam poslužuj fontove ako je vanjska usluga fontova spora za tvoje posjetitelje.

Skripte trećih strana

Chat widgeti, analitika, heatmape, pixeli oglasa, ugrađeni videozapisi i društveni feedovi učitavaju kod s drugih poslužitelja. Svaki izgleda malen; zajedno su često najsporiji dio stranice. Zadrži one koje stvarno gledaš. Ostale učitaj nakon što stranica postane interaktivna, a teške ugradnje (YouTube player, karta) zamijeni laganim pregledom koji učitava pravu stvar tek na klik.

Odgovor poslužitelja

Vrijeme do prvog bajta (TTFB) — koliko poslužitelju treba da počne odgovarati — leži ispod svih ostalih metrika. Statične stranice poslužene s CDN-a (mreže poslužitelja blizu tvojih posjetitelja; vidi što je CDN) brze su gotovo svugdje. Stranice koje poslužitelj gradi pri svakom zahtjevu ovise o tom poslužitelju i njegovoj bazi podataka. Predmemoriranje ponovljenog posla i indeksi baze podataka za spore upite uobičajeni su popravci.

Upiti koji funkcioniraju

Budi konkretan: imenuj stranicu, metriku i ograničenje. Zalijepi nalaze iz PageSpeed Insights ako ih imaš.

PageSpeed Insights prijavljuje LCP od 4,8 s na mobitelu za početnu stranicu, a LCP element je slika zaglavlja. Promijeni veličinu i pretvori sliku zaglavlja u WebP, poslužuj responzivne veličine, postavi width i height, daj joj fetchpriority="high" i pazi da nije lijeno učitana. Lijeno učitaj svaku sliku ispod preklopa. Ne mijenjaj dizajn.

Pregledaj ovisnosti ove aplikacije. Navedi svaki paket, što ga koristi i otprilike koliko dodaje paketu. Ukloni neiskorištene i podijeli rute /admin i /settings u zasebne dijelove koji se učitavaju tek kad se posjete.

Pretraživanje na /products osjeća se sporo. Odgodi filtriranje (debounce), izbjegavaj ponovno iscrtavanje cijelog popisa pri svakom pritisku tipke i stranici ili virtualiziraj popis ako ima više od 200 stavki.

Korak po korak

1. Testiraj živu stranicu u PageSpeed Insights na mobitelu. Zabilježi LCP, INP i CLS te tri najvažnija problema s popisa.
2. Prvo popravi slike: veličine, formate, dimenzije, lijevo učitavanje ispod preklopa, prioritet za sliku zaglavlja.
3. Ukloni skripte trećih strana koje ne koristiš i odgodi ostale.
4. Smanji fontove na ono što dizajn treba.
5. Smanji JavaScript: ukloni neiskorištene pakete, podijeli po ruti.
6. Prerenderiraj javne stranice ako su još renderirane na klijentu i LCP je i dalje spor.
7. Provjeri poslužitelj: predmemoriranje, indekse baze podataka, statički hosting za sadržaj koji se rijetko mijenja.
8. Ponovno objavi i ponovno testiraj. Terenski podaci u PageSpeed Insights ažuriraju se tijekom sljedećih tjedana kako stižu stvarne posjete, pa rane rezultate procjenjuj prema laboratorijskim podacima.

Česte greške

• Testiranje samo na brzom laptopu. Tvoji posjetitelji su na srednje jakim telefonima i nestabilnim mobilnim podacima. Testiraj u mobilnom načinu rada.
• Jurenje za savršenih 100. Laboratorijski rezultat je vodič. Kad su Core Web Vitals u dobrom rasponu, sadržaj i upotrebljivost važniji su od posljednjih nekoliko bodova.
• Lijeno učitavanje svega, uključujući sliku zaglavlja. To pogoršava LCP.
• Dodavanje dodatka ili biblioteke za brzinu. Uklanjanje težine gotovo uvijek nadmašuje dodavanje koda za upravljanje njome.
• Optimiziranje pregleda, a ne žive stranice. Razvojni pregledi koriste neoptimizirane buildove. Mjeri objavljenu adresu.
• Ubrzavanje jednom. Svaki novi widget, slika i značajka dodaje težinu. Nakon velikih promjena ponovno testiraj.

Popis za brzinu

• LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 na mobitelu
• Slike promijenjene u veličini, komprimirane, moderni format, s width i height
• Slika zaglavlja nije lijeno učitana; slike ispod preklopa jesu
• Nema neiskorištenih JavaScript biblioteka; teške rute odvojene
• Dvije obitelji fonta ili manje, glavni font prethodno učitan
• Samo one skripte trećih strana koje stvarno koristiš, učitane kasno
• Javne stranice prerenderirane ili statične gdje je moguće
• Ponovno testirano na živoj adresi nakon objave

Brzina i mobilni raspored idu zajedno; vidi kako napraviti web stranicu responzivnu za mobitele. Za cjelovit pregled prije lansiranja, kako prenijeti AI prototip u produkciju pokriva ostatak.

Brzina na Mythexu

Na Mythexu te promjene radiš tako da ih zatražiš u chatu ili u uređivaču koda na Pro planu. Provjeri objavljenu adresu, a ne Preview, jer Preview pokreće razvojni poslužitelj. Statički frontendovi se pri objavi postavljaju kao statičke stranice (statičke web stranice), što odgovara sadržajnim stranicama. Aplikacije s poslužiteljem skaliraju na nulu: uspavaju se kad su neaktivne i bude se pri sljedećem posjetu, pa je prvi zahtjev nakon mirnog razdoblja sporiji, a priključena baza podataka se uspava nakon 5 minuta neaktivnosti (ograničenja hostinga). Ako je javna stranica spora samo pri prvom posjetu, to je vjerojatan uzrok. Držanje marketinških stranica statičkima pomaže. Nakon promjena ponovno objavi i osvježi stranicu s tvrdim osvježavanjem.

Pitanja