Spor sajt: šta ga zaista usporava
Spor sajt skoro nikad nema jedan uzrok. Ima lanac: server odgovara sporo, tema učitava previše toga, slike su izvorne sa telefona, treći skriptovi blokiraju prikaz, a keš je isključen jer je jednom nešto pokvario. Svaka karika sama po sebi izgleda podnošljivo. Zbir je stranica koja se otvara pet sekundi na mobilnom, pa posetilac odustane pre nego što uopšte vidi šta prodaješ.
Ovaj tekst nije lista od dvadeset saveta. To bi bilo lako napisati i beskorisno primeniti. Ovo je redosled: kako da utvrdiš gde tačno gubiš vreme, šta da diraš prvo, šta da ne diraš uopšte i kada je pošteno reći da ubrzanje sajta nije tvoj najveći problem.
Brzina nije ocena, brzina je vreme do prve korisne stvari
Alati daju ocenu od 0 do 100. Ta ocena je zbir merenja u laboratorijskim uslovima, na simuliranom mobilnom uređaju i simuliranoj mreži. Korisno je za dijagnostiku. Beskorisno je kao cilj.
Cilj je konkretniji: koliko prođe od klika do trenutka kad posetilac vidi glavni sadržaj i može da uradi ono zbog čega je došao. Ako je to poziv, cilj je da broj telefona bude vidljiv i kliktabilan što pre. Ako je to formular, cilj je da se polje otvori bez čekanja i bez skakanja rasporeda.
Zato ne krećem od ocene. Krećem od jedne stranice i jedne radnje. Koja stranica donosi posao i šta na njoj čovek treba da uradi. Sve merenje posle toga ima smisla. Bez toga optimizacija brzine sajta postaje trka za brojem koji nikome ništa ne donosi.
Videćeš i sajtove sa ocenom 95 koji se ljudima čine sporim, i sajtove sa ocenom 60 koji rade sasvim solidno. Razlika je obično u tome da li se prvo iscrtava ono što je bitno ili ono što je dekorativno.
Tri broja koja stvarno nešto znače
Google meri iskustvo kroz tri metrike i one su, za razliku od ukupne ocene, prilično jasno definisane. Prag za "dobro" se meri na 75. percentilu stvarnih poseta, što znači da tri četvrtine poseta mora da bude ispod praga, ne prosek.
LCP (Largest Contentful Paint) je vreme do iscrtavanja najvećeg elementa u vidljivom delu ekrana. Obično je to naslovna slika ili veliki naslov. Dobro je 2,5 sekunde ili manje.
INP (Interaction to Next Paint) meri koliko stranica kasni da odgovori na interakciju, na klik, tap ili unos u polje. Dobro je 200 milisekundi ili manje. Ovo je metrika koja je 2024. zamenila stari FID i mnogo je stroža, jer meri sve interakcije tokom posete, a ne samo prvu.
CLS (Cumulative Layout Shift) meri koliko se raspored pomera dok se stranica učitava. Dobro je 0,1 ili manje. Ovo je onaj efekat kad hoćeš da klikneš dugme, a u tom trenutku se učita banner iznad njega i dugme odskoči, pa klikneš na nešto drugo.
Zašto insistiram na ova tri, a ne na ukupnoj oceni. Zato što svaki od njih pokazuje na drugu grupu uzroka. Loš LCP je najčešće server, slika ili blokirajući resurs. Loš INP je JavaScript. Loš CLS je nedostatak dimenzija na elementima. Kad znaš koji broj je loš, znaš i koga da tražiš.
Laboratorijski i terenski podaci nisu ista stvar
Alat koji odmah izmeri stranicu daje laboratorijski podatak, jedno merenje u kontrolisanim uslovima. Search Console prikazuje terenske podatke, prosek stvarnih poseta u prethodnih 28 dana.
Ta dva se često ne poklapaju i to je normalno. Laboratorijski podatak je za dijagnostiku i za proveru da li je ispravka pomogla. Terenski podatak je za odluku da li problem uopšte postoji kod tvojih posetilaca. Ako laboratorija vrišti, a teren je zelen, tvoja publika verovatno ima bolje uređaje i bolju mrežu nego simulacija.
Obrnuto je gore. Ako je laboratorija pristojna, a teren crven, znači da nešto ne vidiš. Najčešće je to keš koji ne radi za prijavljene korisnike, ili sporo učitavanje sa određenih lokacija, ili stranica koju uopšte nisi merio.
Kojim redom se traži uzrok
Postoji redosled koji štedi vreme, jer svaki sledeći korak ima smisla tek kad je prethodni čist.
- Vreme odgovora servera. Meri se kao TTFB, vreme do prvog bajta. Ako je ono preko sekunde, sve ostalo je kozmetika. Nema te optimizacije slika koja će spasiti hosting koji razmišlja sekundu i po pre nego što uopšte počne da šalje stranicu.
- Šta se učitava pre prikaza. Fontovi, CSS i skripte u zaglavlju umeju da zadrže iscrtavanje. Ako ih ima previše, prazan ekran traje duže nego što treba.
- Težina i format slika. Ovo je najčešći uzrok i najlakše se popravlja.
- JavaScript i treći alati. Analitika, piksel, četovi, mape, iskačući prozori. Ovo najviše utiče na INP.
- Baza i broj upita. Relevantno za prodavnice i sajtove sa mnogo sadržaja.
Ako preskočiš prvi korak i odmah kreneš da komprimuješ slike, dobićeš pola sekunde i nećeš razumeti zašto je spor sajt i dalje neupotrebljiv. Video sam sajtove na kojima je zamena hostinga donela više nego tri dana rada na svemu ostalom.
Hosting: najskuplja ušteda koju ljudi prave
Deljeni hosting od tri evra mesečno je racionalan izbor za sajt vizit kartu bez saobraćaja. Za sve ostalo je uštede radi. Na deljenom hostingu tvoj sajt deli procesor i memoriju sa nekoliko stotina drugih, i kad neko od njih dobije skok poseta, ti to osetiš.
Šta konkretno gledaš.
Verzija PHP-a. Ako ti je sajt na staroj verziji, samo prelazak na aktuelnu često donese vidljivo ubrzanje, uz sve sigurnosne razloge da to ionako uradiš. Ovo je u kontrolnom panelu, traje minut i ljudi to godinama ne dodirnu.
Lokacija servera. Ako ti je publika u Srbiji, a server u Teksasu, plaćaš razdaljinu na svakom zahtevu. Nije katastrofa, ali je nepotrebno.
Objektni keš i tip diska. NVMe je danas podrazumevan kod ozbiljnijih paketa. Ako hosting to ne pominje, verovatno ga nema.
Limiti. Broj procesa, memorija po procesu, dnevni limit ulaznih procesa. Kad se ti limiti probiju, sajt ne pada, samo postane spor u talasima. To je najgori scenario za dijagnostiku, jer merenje u pogrešnom trenutku pokaže da je sve u redu.
Ne tvrdim da svako treba na skuplji plan. Tvrdim da treba da znaš na čemu si, pre nego što platiš nekog da ti optimizuje slike na serveru koji ne stiže da odgovori.
Slike: gde se gubi najviše kilobajta i najmanje truda
Najveći pojedinačni uzrok težine stranice je i dalje slika koju je neko postavio direktno sa telefona ili iz fotoaparata. Ta slika ima 4000 piksela širine i pet megabajta, a prikazuje se u kvadratu od 400 piksela.
Šta radi razliku.
Dimenzije pre formata. Prvo smanji sliku na dimenziju u kojoj se stvarno prikazuje, pa je tek onda komprimuj. Obrnut redosled je gubljenje vremena.
Moderan format. WebP je danas standard i podržan je svuda gde je bitno. AVIF ide dalje, ali proveri podršku u temi i pluginu koji koristiš. Ušteda u odnosu na JPEG je često preko trideset odsto pri istom vizuelnom kvalitetu.
Odloženo učitavanje, ali ne za sve. Slike ispod preloma treba da se učitavaju kad se do njih dođe. Glavna slika u vrhu stranice ne sme da bude odložena, jer je ona najčešće baš onaj element koji meri LCP. Ovo je greška koju pravi dosta pluginova sa uključenim agresivnim podešavanjima.
Zadate dimenzije u kodu. Kad slika nema atribute za širinu i visinu, pregledač ne zna koliko mesta da rezerviše, pa se raspored pomera kad slika stigne. To je direktno loš CLS.
Bez slika koje se ne vide. Slajder od šest slika na naslovnoj, od kojih posetilac vidi jednu, znači pet slika plaćenih uzalud. Slajderi su generalno tema za sebe. Retko sam video da rade posao koji im se pripisuje.
Skripte i pluginovi: tiho trošenje
Ovde se gubi interaktivnost. Svaki alat koji dodaš na sajt donese svoj JavaScript, i taj JavaScript se izvršava u glavnoj niti, istoj onoj koja treba da odreaguje kad posetilac klikne.
Tipičan sajt malog biznisa ima analitiku, piksel društvene mreže, alat za četovanje, ugrađenu mapu, banner za kolačiće i još dva plugina koja niko ne koristi ali su ostala od pre dve godine. Zbir ume da bude nekoliko stotina kilobajta koda koji se izvršava pre nego što stranica postane upotrebljiva.
Šta radim u ovoj fazi.
Prvo brojim koliko toga se učitava na stranici koja mi je bitna, ne na celom sajtu. Alatka za kartu je potrebna na stranici kontakta, ne na svakoj stranici. Isto važi za skripte prodavnice na blogu.
Zatim gledam šta može da se odloži. Analitika i piksel ne moraju da se izvrše pre prikaza. Čet ne mora da se učita pre nego što čovek pomeri stranicu.
Onda gledam šta može da se izbaci. Plugin koji je instaliran da bi se rešio jedan problem, a problem više ne postoji, samo troši. Deaktiviran plugin ne troši na frontendu, ali i dalje predstavlja površinu za napad, pa neaktivne treba obrisati, a ne ostaviti uspavane. O tome sam više pisao u tekstu o tome kako se zapravo stvara zaražen WordPress sajt.
Ono što neću uraditi je da agresivno odložim sve. Postoji podešavanje u većini pluginova za keširanje koje odloži sav JavaScript dok korisnik ne interaguje. Ocena skoči, a onda se ispostavi da meni ne radi na mobilnom, ili da formular ne šalje. Bolja ocena i pokvarena funkcija je loša trgovina.
Keširanje: šta stvarno znači i gde se lomi
Keširanje znači da server ne sastavlja stranicu iznova za svakog posetioca, nego servira gotovu verziju. Za sajt čiji se sadržaj menja jednom nedeljno, ovo je najveća pojedinačna dobit koju možeš da dobiješ, i skoro je besplatna.
Postoji nekoliko slojeva i ljudi ih mešaju.
Keš stranica čuva gotov HTML. Ovo najviše utiče na TTFB.
Keš pregledača govori posetiocu da ne preuzima ponovo logotip i CSS pri svakom otvaranju. Utiče na drugu i svaku sledeću posetu, ne na prvu.
Objektni keš čuva rezultate upita ka bazi. Bitan za prodavnice i sajtove sa članstvom.
CDN servira statičke fajlove sa servera bližeg posetiocu. Ako ti je publika lokalna, dobitak je manji nego što marketing obećava, ali nije nula.
Gde se najčešće lomi. Korpa i naplata ne smeju da se keširaju. Stranice sa dinamičkim sadržajem po korisniku ne smeju da se keširaju. Kad neko uključi agresivno keširanje na prodavnici bez izuzetaka, dobiješ situaciju u kojoj kupac vidi tuđu korpu. To je gore od sporog sajta.
I još nešto. Keš se mora očistiti posle izmene. Broj puta kad mi je neko rekao da promena nije vidljiva, a u pitanju je bio stari keš, prešao je granicu smešnog.
Tema i graditelj stranica: ono što se ne popravlja podešavanjem
Ovo je deo koji ljudi ne vole da čuju. Postoje teme i graditelji stranica koji generišu toliko koda za jednostavan raspored da nikakva optimizacija ne može da ih dovede u zelenu zonu.
Prepoznaješ ih po tome što jedna sekcija sa naslovom i dugmetom ima šest ugnježdenih kontejnera, svaki sa svojim klasama i inline stilovima. Kad na to dodaš temu koja učitava kompletnu biblioteku ikonica zbog dve ikonice, dobijaš stranicu koja je teška pre nego što si napisao prvu reč sadržaja.
Šta se tu može. Ograničiti učitavanje na ono što se koristi, ako plugin to dozvoljava. Isključiti module koji se ne koriste. Zameniti biblioteku ikonica sa nekoliko SVG fajlova. To zajedno ume da donese pristojan pomak.
Šta se ne može. Napraviti da graditelj proizvodi vitak kod. Ne proizvodi ga, to nije njegov posao, njegov posao je da ti daš da povlačiš elemente mišem. To je stvarna razmena i treba je znati unapred, o čemu sam pisao i u tekstu WordPress ili custom sajt.
Kad je tema uzrok, pošten odgovor je da je jeftinije preneti sadržaj na laganiju osnovu nego platiti dvadeset sati krpljenja koje daje deset poena. Spor sajt zasnovan na teškoj temi retko postane brz samo podešavanjem.
Mobilni je merilo, ne izuzetak
Skoro sve merenje koje ima veze sa rangiranjem i sa stvarnim posetiocima gleda mobilni prikaz. Ako testiraš samo na svom desktopu sa optičkim internetom, ne testiraš ništa.
Na mobilnom se sabiraju tri stvari. Slabiji procesor, pa se JavaScript izvršava sporije. Nestabilnija mreža, pa svaki dodatni zahtev košta više. Manji ekran, pa se u vidljivi deo staje manje, ali se često učitava isto.
Praktična provera koju svako može da uradi. Uzmi telefon, isključi Wi-Fi, otvori sajt u anonimnom prozoru i broji. Ako do pet sekundi ne vidiš glavni naslov i ne možeš da klikneš ono zbog čega si došao, spor sajt ti je već pokazao problem bez alata. Nijedan izveštaj ne treba da ti potvrdi ono što telefon već kaže.
Šta brzina rešava, a šta ne
Ovde moram da budem precizan, jer se oko brzine proda mnogo maglovitih obećanja.
Brzina utiče na to koliko ljudi ostane. Onaj ko odustane dok se učitava nikad neće videti ponudu, bez obzira koliko je ponuda dobra. To je najkonkretniji efekat i vidi se u stopi napuštanja.
Brzina je faktor rangiranja, ali slab. Google to i sam opisuje kao razdvajajući faktor između rezultata sličnog kvaliteta. Ako je konkurencijin sadržaj bolji i relevantniji, on će biti iznad tebe i sa lošijim LCP-om. Brzina neće nadoknaditi to što stranica ne odgovara na upit.
Brzina ne popravlja ponudu. Ako stranica ne kaže jasno šta nudiš, kome i po kojoj ceni, ubrzanje sajta znači samo da će ljudi brže videti da ne razumeju šta da rade. Isto sam pisao i u tekstu o tome da li prvo SEO ili Google Ads: kanal ne popravlja odredište.
Brzina ne zamenjuje sigurnost. Sajt može da bude izuzetno brz i istovremeno zaražen. To su odvojene provere.
Redosled koji koristim kad neko traži ubrzanje sajta
Ovako izgleda posao u praksi, po prioritetu dobitka u odnosu na uloženo vreme. Kad neko traži pomoć oko sporog sajta, ovaj redosled sprečava da prvo diramo temu dok server i keš nisu provereni.
Prvo, merenje na pravoj stranici. Ne na naslovnoj samo zato što je prva. Na onoj koja donosi upite. Merenje i laboratorijski i, ako postoji dovoljno saobraćaja, terenski podatak.
Drugo, provera servera. TTFB, verzija PHP-a, da li je keš stranica uopšte aktivan. Ako je ovde problem, sve ostalo čeka.
Treće, keširanje. Uključiti, podesiti izuzetke, proveriti da ništa nije puklo. Ovo je najveći odnos dobitka i truda kod većine WordPress sajtova.
Četvrto, slike u vidljivom delu. Dimenzije, format, uklanjanje odloženog učitavanja sa glavne slike, dodavanje dimenzija u kod.
Peto, blokirajući resursi. Fontovi lokalno umesto sa udaljenog servera, kritični CSS, uklanjanje onoga što se ne koristi.
Šesto, treći skriptovi. Odložiti analitiku i piksel, učitavati čet i mapu tek kad zatrebaju, izbaciti alate koji ništa ne rade.
Sedmo, ponovno merenje i poređenje. Ne po oceni, nego po tri metrike i po tome koliko traje do prve korisne stvari.
Tek posle svega toga dolazi razgovor o temi, graditelju i eventualnoj promeni osnove. Ne obrnuto.
Tri greške koje najčešće viđam
Jurenje stotke. Ocena od 100 na laboratorijskom testu je moguća samo na stranici koja gotovo ništa ne radi. Čim dodaš analitiku, formular i par slika, gubiš poene. To ne znači da si pogrešio. Znači da sajt nešto radi.
Instaliranje tri plugina za optimizaciju istovremeno. Oni rade istu stvar i međusobno se sudaraju. Rezultat je duplo minifikovan CSS, pokvaren raspored i dan traženja uzroka. Jedan, dobro podešen, uvek pobeđuje tri uključena redom.
Merenje odmah posle čišćenja keša. Prvo učitavanje posle brisanja keša je uvek najsporije, jer server tek sastavlja stranicu. Izmeri dva-tri puta i uzmi realan rezultat, ne najgori.
Kada ne vredi plaćati optimizaciju
Reći ću i ovo, iako je usluga koju radim.
Ako ti sajt ima deset poseta mesečno, brzina nije tvoj problem. Problem je što niko ne dolazi. Optimizacija u tom slučaju znači da će tih deset ljudi brže videti stranicu koju nisi napisao za njih.
Ako ti je sajt star pet godina, na temi koja se više ne održava, sa graditeljem iz koga se ne izlazi lako, ubrzanje je krpljenje. Novac ima više smisla u novoj osnovi. Slično sam objašnjavao i u tekstu o tome kako pametan redizajn sajta menja igru.
Ako je sajt spor samo tebi, a merenja i drugi uređaji pokazuju drugačije, uzrok je verovatno lokalan. Keš pregledača, DNS, dodatak u pregledaču, mreža. Nemoj plaćati optimizaciju servera zbog svog dodatka za blokiranje reklama.
I ako se sajt usporio naglo, preko noći, bez tvoje izmene, to nije tema za optimizaciju. To je tema za bezbednosnu proveru. Nagli pad performansi zna da bude simptom da neko drugi koristi tvoj server, o čemu sam pisao u tekstu koliko vas zaista košta hakovan sajt.
Šta ne obećavam
Neću obećati zelenu ocenu na svakom alatu. Neću obećati određeno mesto u pretrazi zato što je sajt postao brži. Neću tvrditi da postoji jedno podešavanje koje rešava sve, jer ne postoji.
Ono što mogu da kažem posle merenja je konkretnije od toga: gde se tačno gubi vreme, koliko od toga može da se vrati bez menjanja osnove, koliko traje i šta ostaje kao ograničenje s kojim se živi.
Pošalji URL i jednu radnju, ne screenshot ocene
Ako ti je sajt spor, nemoj slati sliku izveštaja sa crvenim brojem. Pošalji link stranice koja ti donosi posao i napiši šta posetilac na njoj treba da uradi.
Izmeriću tu stranicu, razdvojiću šta je server, šta su slike, šta su skripte, a šta je tema, i reći ću ti kojim redom to ima smisla popravljati i da li deo možeš sam. Ako se ispostavi da brzina nije tvoje usko grlo, i to ću reći, umesto da ti prodam ubrzanje web sajta koje neće promeniti broj upita.
Ako hoćeš prvo sam da vidiš gde stojiš, pokreni besplatnu analizu web sajta i pročitaj nalaze redom, od kritičnih ka kozmetičkim. Kako se ti nalazi čitaju, opisao sam u tekstu o čitanju rezultata analize sajta. Ako ostane nejasno, javi se preko kontakta.
