Brzina stranice je tema oko koje se puno priča i malo mjeri. „Optimizirana za brzinu" piše u gotovo svakoj ponudi, a velik dio stranica se na mobitelu učitava tri i više sekundi.
Ovaj tekst razlaže što brzinu stvarno određuje, poredano po tome koliko svaka stavka nosi.
Zašto je važno
Dva razloga, i prvi je veći.
Ljudi odlaze. Svaka dodatna sekunda čekanja odnese dio posjetitelja, a najviše na mobitelu i na slabijoj vezi — dakle točno tamo gdje je danas većina prometa.
Google mjeri. Brzina ulazi u ocjenu stranice, i to na temelju stvarnih posjetitelja. Objašnjenje mjera je u tekstu Core Web Vitals za vlasnike tvrtki.
Prvi razlog vrijedi neovisno o tražilicama. Stranica koja gubi petinu posjetitelja prije prve slike gubi ih i kad savršeno rangira.
1. Slike — najveći pojedinačni krivac
Na tipičnoj poslovnoj stranici slike su 60 do 80 posto svega što se preuzme.
Što ide krivo:
Neprilagođena veličina. Fotografija iz aparata je 4.000 piksela široka i nekoliko megabajta. Na ekranu zauzima 800 piksela. Preglednik svejedno skine sve.
Stari formati. JPEG i PNG su nadživjeli svoje. WebP daje istu kvalitetu uz 25 do 35 posto manje, a AVIF još manje.
Sve odjednom. Slike na dnu stranice se učitavaju iako ih nitko nije vidio.
Bez zadanih dimenzija. Preglednik ne zna koliko mjesta ostaviti, pa sadržaj skače kad slika stigne.
Ispravno napravljeno, ovo je najveći dobitak za najmanje truda. Kod mojih case studyja slike su s 13 MB pale na 472 KB bez vidljive razlike.
2. Količina koda koji se šalje
Druga stavka po težini.
JavaScript je najskuplji jer se ne mora samo preuzeti nego i izvršiti, a to na jeftinijem telefonu traje osjetno duže nego na računalu.
CSS blokira prikaz — dok se ne učita, ništa se ne prikazuje.
Fontovi. Svaka težina i svaki rez je zasebna datoteka. Tri fonta u četiri težine je dvanaest datoteka prije prve riječi.
Odavde dolazi razlika između stranice po mjeri i one na gotovoj platformi ili predlošku: predložak nosi kod za sve mogućnosti koje ima, a vi koristite dio.
3. Poslužitelj i gdje stranica stoji
Vrijeme do prvog bajta je koliko poslužitelj čeka prije nego pošalje išta. Ako je to sekunda, sve ostalo kasni sekundu.
Ovdje je najveća razlika između stranice koja se sastavlja pri svakom posjetu i one koja je već gotova. Prva pokreće kod, pita bazu i slaže HTML; druga šalje datoteku koja čeka spremna.
Blizina također nosi. Stranica poslužena s mreže poslužitelja koja ima čvor blizu posjetitelja stiže brže od one koja putuje preko pola Europe.
4. Skripte trećih strana
Svaki alat koji se dodaje ima cijenu: chat prozor, praćenje posjeta, oglasni piksel, traka za kolačiće, ugrađene karte, ugrađeni video.
Neugodno je to što nad njima nemate kontrolu. Ako njihov poslužitelj kasni, kasni vaša stranica.
Vrijedi ih jednom popisati i za svaki pitati donosi li više nego što košta. Ugrađena karta koja se učitava odmah često se može zamijeniti slikom koja postaje karta na dodir.
5. Redoslijed učitavanja
Isti sadržaj može stići za jednu ili tri sekunde ovisno o redoslijedu.
Ono što je na prvom ekranu treba prioritet. Ostalo može čekati. Fontovi trebaju biti postavljeni tako da se tekst vidi odmah, pa se zamijeni kad font stigne — bolje nego prazan prostor.
Kako izmjeriti
PageSpeed Insights — gornji dio pokazuje stvarne posjetitelje, donji test. Gledajte mobilnu ocjenu.
Ploča Network u pregledniku pokazuje što se preuzima i koliko je veliko. Poredajte po veličini i vidjet ćete krivca u nekoliko sekundi.
WebPageTest za detaljniji prikaz redoslijeda.
Realna očekivanja
Za poslovnu stranicu na modernom stogu razumno je:
- Glavni sadržaj vidljiv ispod 1,5 sekunde na mobitelu.
- Ukupna težina stranice ispod 1 MB, uključujući slike.
- Ispod 100 KB JavaScripta.
To nije teorija — to je ono što se dobije kad se stranica napiše bez viška i kad se slike pripreme kako treba.
Česta pitanja
Može li se postojeća stranica ubrzati?
Djelomično gotovo uvijek. Slike, skripte trećih strana i fontovi se mogu popraviti bez nove izrade. Granica je u građi: količina koda koju platforma šalje ne može se maknuti.
Koliko traje popravak?
Slike i skripte su nekoliko sati do dan. Dublji zahvati ovise o tome kako je stranica napravljena.
Je li brzina važnija od sadržaja?
Nije. Sadržaj i to što stranica nudi odlučuju više. Brzina odlučuje hoće li itko doći do sadržaja.
Trebam li AMP?
Ne. Google ga više ne povlašćuje i za većinu stranica nema smisla.
Kako provjeriti gdje stojite
Provucite adresu kroz PageSpeed Insights i pogledajte mobilnu ocjenu. Ako je ispod 50, pošaljite mi adresu pa ću reći što je uzrok i je li popravak sitan ili zadire u građu.