WebPageTest – kako da proverite šta zaista usporava vaš web sajt

Ako želite da utvrdite zbog čega se neka stranica na vašem web sajtu učitava sporije nego što bi trebalo, onda vam nije dovoljan samo alat koji će pokazati jednu ocenu i nekoliko opštih preporuka. Mnogo je korisnije da vidite kako izgleda ceo tok učitavanja vašeg sajta i na kom mestu nastaje zastoj. Upravo za to služi WebPageTest.

Ovaj alat pomaže da preciznije sagledate šta se dešava od trenutka kada korisnik otvori stranicu do trenutka kada ona postane vidljiva i upotrebljiva. Na taj način lakše možete da utvrdite da li problem dolazi od servera, velikih slika, CSS i JavaScript fajlova, eskternih fontova, spoljašnjih servisa ili samog rasporeda učitavanja resursa.

U ovom tekstu ćemo predstaviti WebPageTest alat i objasniti kako da tumačite njegove rezultate.

U jednom od prethodnih tekstova na našem blogu predstavili smo jedan alat sličan WebPageTest-u. U pitanju je GTmetrix, pa ukoliko želite da se malo detaljnije upoznate sa ovom vrstom alata, predlažemo da ga pročitate.

Kako se koristi WebPageTest

Ako WebPageTest koristite prvi put, najbolje je da krenete od osnovnih opcija. Prvi korak je da odete na WebPageTest web sajt i tamo unesete URL stranice koju želite da testirate. Za početak ne morate da kreirate nalog, ali ako želite da imate pristup naprednijim podešavanjima, onda je naša preporuka da ga ipak kreirate (o tome nešto kasnije u tekstu).

To može biti početna strana vašeg sajta, stranica proizvoda, blog tekst, landing stranica ili bilo koja druga adresa koja vam je važna.

Kada unesete URL, slede osnovna podešavanja testa. Prvo treba da odlučite iz kog regiona želite da se pokrene test, da li želite da se testira brzina na desktop ili mobilnom uređaju i za koji tip konekcije.

To je važno zato što se isti sajt neće učitati istom brzinom ako mu se pristupa iz Amerike ili iz Evrope. To je i logično jer udaljenost servera itekako utiče na brzinu učitavanja sajta. Ovaj problem se delimično može rešiti korišćenjem nekog CDN provajdera popt Cloudflare-a, ali je dobro znati brzinu učitavanja da biste mogli da preduzmete eventualne mere na njegovom ubrzanju.

Dakle, ako je vaša ciljana publika uglavnom iz Srbije, onda je preporuka da za region odaberete neku lokaciju najbližu nama. WebPageTest nudi za sada tri glavna regiona. Ameriku, Evropu i Aziju, pa je za naš slučaj najbolje odabrati Evropu.

Imajući u vidu upravo važnost toga da server na kojem se nalazi vaš web sajt treba da bude što bliže vašoj ciljanoj publici, mi u Plus Hostingu smo obezbedili da naši serveri budu u Srbiji. Zato, ako se opredelite za bilo koji od naših Premium hosting paketa, imaćete sve preduslove da se vaš sajt brzo učitava korisnicima iz Srbije. Ovo je takođe važno i ukoliko želite da vaš sajt bude SEO optimizovan, jer je brzina učitavanja jedna od važnih metrika koje Google prati u rangiranju rezultata u pretrazi.

Takođe, u najvećem broju slučajeva vaš web sajt će se različito učitavati na telefonu i na računaru. Vrlo često će se desktop verzija brže učitavati nego verzija za mobilne uređaje. Zato je važno da znate koliko je velika ta razlika, da biste mogli da preduzmete odgovarajuće mere na poboljšanju te verzije. WebPageTest nudi opciju da testirate upravo dve odvojene verzije i da utvrdite gde ima prostora za poboljšanje brzine.

Na kraju, u osnovnim podešavanjima imate opciju da izaberete i tip konekcije. Ovo je važno jer se svaki sajt učitava drugačije na različitim tipovima konekcije. Ako očekujete da će se veći deo vaših korisnika povezivati preko brže veze, onda ćete odabrati recimo Regular5G opciju u podešavanjima. Ovo su svakako korisne opcije i naša je preporuka da svoj web sajt testirate i na bržim i na sporijim konekcijama.

Ovo je sve što možete da radite sa podešavanjima bez kreiranja naloga. Za brzi test ovo može biti dovoljno, međutim ako želite detaljnija podešavanja i napredniji izveštaj, onda svakako preporučujemo da kreirate svoj nalog.

To možete besplatno uraditi klikom na dugme Start for free u gornjem desnom uglu stranice.

Sada ćete imati opciju da odaberete potpuno besplatan plan ili neki od naprednijih koji naravno nisu besplatni. Naša preporuka je da za početak odbarete Free Stater Plan i testirate alat.

Ukoliko vam bude potrebna neka od plaćenih verzija, lako ćete kasnije nadograditi svoj plan.

Klikom na dugme Sign Up otvoriće vam se forma za popunjavanje ličnih podataka za registraciju naloga.

Popunite polja za ime, prezime i email adresu, čekirajte polje da ste saglasni sa uslovima usluge i izjavom o privatnosti i kliknite na dugme Sign up.

Biće vam poslat email za verifikaciju, pa je potrebno da proverite svoj inbox i verifikujete svoj nalog klikom na link u email-u.

Nakon što kliknete na link za verifikaciju, bićete preusmereni na stranicu za podešavanje vaše lozinke za WebPageTest nalog. Unesite željenu lozinku i ponovite je, a zatim kliknite na dugme Login.

Otvoriće vam se WebPageTest dashboard sa pop-up obaveštenjem o tome šta je sve uključeno u besplatan plan.

Ovaj plan vam omogućava da sajt testirate u realnim uslovima, preko pravih browser-a i sa stvarnih lokacija, uz najnovije verzije operativnih sistema. Uključeno je i testiranje na realnim brzinama veze, kao i izvođenje testova nad pojedinačnim stranicama i korisničkim putanjama, uz podršku za prilagođene skripte.

Dodatno, imate pristup istoriji testiranja za poslednjih 60 dana, kao i podršci i stručnoj dokumentaciji. Sve ovo je sasvim dovoljno za početak i za većinu korisnika nema potrebe raditi nadogradnju na neki od plaćenih naloga.

Kliknite na dugme Start testing Now da biste mogli da pokrenete test.

Otvoriće vam se dashboard odakle ćete moći da radite sva napredna podešavanja testova i pokrećete testiranje kada god vam je to potrebno.

Test Parameters tab

Kada otvorite WebPageTest i prijavite se na nalog, prvi tab koji ćete videti je Test Parameters. Tu zapravo kreće celo testiranje, jer upravo ovde birate šta želite da proverite, sa kog uređaja, sa koje lokacije i pod kojim uslovima.

Na prvi pogled deluje da ima dosta opcija, ali je raspored prilično logičan. Kada jednom razumete šta koja stavka radi, lako ćete namestiti test tako da dobijete rezultat koji vam stvarno nešto znači.

Enter Website URL

Na vrhu se nalazi polje u koje unosite adresu stranice koju želite da testirate.

Ovde je najvažnije da ne testirate nasumično. Ako vam najveći deo poseta dolazi na stranice proizvoda ili blog tekstove, nema mnogo koristi od toga da proveravate samo naslovnu stranu. Mnogo je pametnije da krenete od onih stranica koje su vam stvarno bitne iz ugla prodaje, poseta, kampanja ili SEO-a.

Treba obratiti pažnju i na to da URL mora biti unet sa prefiksom http:// ili https://. Ako to izostavite, alat može prijaviti da unos nije ispravan.

Device

Sledeća bitna stavka je izbor uređaja. Ovde određujete sa kog tipa uređaja će WebPageTest simulirati učitavanje stranice. Možete birati desktop, mobilne uređaje poput iPhone-a ili iPad-a, kao i druge uređaje kroz dodatni meni.

Ova opcija je važna jer se isti sajt često ne ponaša isto na računaru i na telefonu. Desktop verzija obično lakše učitava veće slike, skripte i fontove, dok mobilna verzija mnogo brže pokaže gde sajt zaista ima problem.

Ako želite realniju sliku korisničkog iskustva, nemojte se zadržati samo na desktop testu. Ako vam većina posetilaca dolazi sa telefona, mobilni test je često važniji od desktop rezultata.

Location

Odmah ispod toga bira se lokacija sa koje će test biti pokrenut. Ako želite da proverite kako se sajt učitava korisnicima u Srbiji, logično je da birate lokaciju koja je što bliža našem tržištu.

U ovom alatu je najbliža lokacija Milano, pa je to u praksi najrazumniji izbor kada želite da dobijete što realniju sliku za posetioce iz Srbije. Nije isto da li test radite iz Evrope ili sa neke mnogo udaljenije lokacije, jer fizička udaljenost od servera i dalje igra važnu ulogu u brzini odziva.

Tests Performed

U delu Tests Performed birate vrstu analize koju želite da pokrenete. Tu se vide opcije Performance i Lighthouse.

Performance je osnovni test performansi i za većinu korisnika to je sasvim dobar početak. On daje pregled ključnih metrika, brzine učitavanja i ponašanja stranice tokom testa.

Lighthouse može dati dodatni uvid, ali za prvi prolaz nije obavezan. Ako tek upoznajete alat i želite da vidite kako se stranica ponaša u realnim uslovima, sasvim je dovoljno da za početak koristite Performance.

Number of Runs

Opcija Number of Runs određuje koliko puta će isti test biti pokrenut. Na slici je podešena vrednost 3, i to je sasvim razumno podešavanje.

Jedan test nije uvek dovoljan da pokaže realnu sliku. Na rezultat mogu uticati trenutno opterećenje servera, mrežni uslovi, ponašanje spoljašnjih servisa i razne manje oscilacije koje ne znače nužno da sajt stalno radi isto.

Kada pokrenete test više puta, mnogo lakše vidite da li je loš rezultat bio slučajan ili se isti obrazac zaista ponavlja. Tri pokretanja su dobar početak jer daju dovoljno pouzdaniji rezultat, a da test ne traje nepotrebno dugo.

Repeat View

Opcija Repeat View služi da simulira ponovnu posetu istoj stranici. To znači da alat ne meri samo prvi dolazak na sajt, već i situaciju kada se korisnik vraća, pa browser već ima sačuvane određene fajlove u kešu.

To je korisno kada želite da proverite koliko vaš sajt dobija od keširanja. Ako je druga poseta primetno brža, to je dobar znak. Ako razlika gotovo da ne postoji, to može značiti da ima prostora da se keširanje bolje podesi.

Za prvi test ovu opciju ne morate obavezno uključivati, ali kasnije može biti veoma korisna.

Label

Polje Label služi da testu dodelite naziv. To može biti bilo koja interna oznaka koja će vam pomoći da kasnije lakše prepoznate šta ste tačno testirali.

Tu možete upisati naziv stranice, tip uređaja, verziju sajta ili neku konkretnu izmenu koju ste napravili. To je posebno korisno ako radite više testova zaredom i želite da razlikujete rezultate pre i posle optimizacije slika, promene teme, uključivanja keširanja ili izmene hosting okruženja.

Ako radite samo jedan brzi test, naziv nije presudan. Ali kada krenete da upoređujete više rezultata, ume dosta da olakša snalaženje.

Run Test

Na dnu se nalazi dugme Run Test. Njime pokrećete analizu sa svim podešavanjima koja ste prethodno odabrali.

Pre nego što kliknete na ovo dugme, vredi da još jednom proverite URL, uređaj i lokaciju. To su tri stavke koje najviše utiču na to da li će rezultat biti smislen i upotrebljiv.

Advanced tab

Kada završite osnovna podešavanja u Test Parameters tabu, sledeći korak može biti Advanced. Ovaj deo nije obavezan za svaki test, ali postaje koristan kada želite precizniju kontrolu nad tim kako će analiza biti izvedena.

Osnovna podešavanja su sasvim dovoljna za prvi pregled. Međutim, ako želite detaljniji uvid, duže praćenje učitavanja ili neku specifičniju tehničku proveru, onda ovaj tab dobija smisao.

Test Duration

Prva sekcija odnosi se na trajanje testa. Tu možete da odredite minimalno trajanje kroz opciju Min Test Duration, kao i da uključite Stop Test at Document Complete.

Ovo je korisno zato što se stranica nekad formalno učita, a da se u pozadini i dalje nastavljaju dodatna učitavanja. To mogu biti skripte, analitike, chat widget-i, marketinški alati i drugi spoljašnji resursi.

Ako želite da vidite širu sliku, ima smisla da test traje dovoljno dugo da obuhvati i te kasnije aktivnosti. Ako vas zanima samo osnovni trenutak kada je glavni dokument završen, onda opcija Stop Test at Document Complete može biti dobar izbor.

Capture Settings

U sekciji Capture Settings nalaze se dodatne opcije za beleženje onoga što se dešava tokom testa:

• Capture Full Size Video
• Capture Network Packet Trace (tcpdump)
• Save Response Bodies For Text Resources

Capture Full Size Video je korisna kada želite da vidite kako se stranica vizuelno formira tokom učitavanja. To zna da bude vrlo korisno kada brojke ne deluju strašno, a sajt korisniku ipak izgleda sporo.

Capture Network Packet Trace (tcpdump) je već naprednija opcija i više je namenjena detaljnoj mrežnoj analizi. Prosečnom korisniku uglavnom neće trebati, ali developerima i administratorima može pomoći da provere postoji li neki mrežni problem i da ga lakše lociraju.

Save Response Bodies For Text Resources služi za čuvanje sadržaja tekstualnih resursa kao što su HTML, CSS i JavaScript fajlovi. To je korisno kada radite dublju tehničku analizu i želite da vidite šta je server zaista isporučio.

Image Support

U sekciji Image Support vide se opcije:

• Disable AVIF Image Support
• Disable WEBP Image Support

Ove opcije služe da namerno isključite podršku za moderne formate slika tokom testa.

To može biti korisno ako želite da proverite kako će se stranica ponašati u okruženju gde browser ne podržava AVIF ili WebP. Nije poenta da “pokvarite” rezultat, nego da proverite kompatibilnost i ponašanje sajta u drugačijim uslovima.

Za većinu osnovnih testova ove opcije ne morate dirati, ali za specifične provere mogu biti korisne.

Custom Headers

Polje Custom Headers omogućava da dodate prilagođena zaglavlja svim mrežnim zahtevima tokom testa.

To ima smisla kada želite da simulirate poseban način pristupa sajtu. Na primer, kada treba poslati određeni header zbog autentifikacije, testiranja posebne verzije okruženja ili zaobilaženja nekih ograničenja.

Ovo nije nešto što će većina korisnika testirati često, ali u određenim tehničkim scenarijima može biti veoma korisno.

Inject Script

Polje Inject Script služi za ubacivanje JavaScript koda koji će se pokrenuti nakon što stranica počne da se učitava.

Ova opcija je korisna kada želite dodatno da prilagodite scenario testa. Na primer, kada želite da simulirate neku radnju ili promenite ponašanje stranice tokom učitavanja.

Ispod toga se nalazi i opcija:

Inject script into all frames and run before any page scripts run (Chrome-only)

To je već veoma specifična funkcija i većini korisnika neće trebati, ali može biti korisna kada želite vrlo preciznu kontrolu nad tokom testa.

Security tab

Security tab nije nešto što ćete koristiti pri svakom testiranju. Međutim, kada radite sa stranicama koje nisu javno dostupne ili želite da testirate specifične uslove pristupa, ovaj deo postaje važan.

Ovde možete da testirate i staging sajt, razvojno okruženje ili zaštićene delove web sajta, a ne samo javno dostupne stranice.

HTTP Basic Auth

Prva opcija odnosi se na HTTP Basic Auth. Kada je uključite, dobijate polja za korisničko ime i lozinku.

Ovo je korisno kada radite sa staging ili testnim verzijama sajta koje nisu otvorene za javnost, već su zaključane osnovnom prijavom preko browser-a.

Ako želite da testirate takvu stranicu, ovde unosite podatke za pristup. Bez toga WebPageTest neće moći pravilno da otvori stranicu i rezultat neće biti upotrebljiv.

Username i Password

Kada uključite HTTP Basic Auth, ispod se pojavljuju polja za korisničko ime i lozinku.

Važno je da se unesu tačni podaci. Ako nisu ispravni, alat neće otvoriti stranicu kako treba, pa umesto pravog testa možete dobiti neuspešan rezultat ili potpuno pogrešnu stranicu.

Discard All HTTP Headers

Opcija Discard All HTTP Headers je dosta specifična i nije namenjena svakodnevnom radu.

Koristi se samo kada imate jasan razlog da ignorišete HTTP zaglavlja tokom testa. Za standardno testiranje performansi ova opcija uglavnom nije potrebna.

Ignore SSL Certificate Errors

U delu Other Settings nalazi se opcija Ignore SSL Certificate Errors.

Ona je korisna kada testirate razvojno ili privremeno okruženje koje nema potpuno ispravno podešen SSL sertifikat. U takvim slučajevima alat bez ove opcije možda neće moći normalno da pristupi stranici.

Ovu opciju treba koristiti pažljivo. Na produkcionom sajtu SSL greške ne treba ignorisati, nego rešiti.

Chromium tab

Ako vam osnovni test nije dovoljan i želite detaljniji uvid u ponašanje stranice u Chrome okruženju, tu je Chromium tab.

Ovaj deo nije namenjen svakodnevnom testiranju, ali je koristan kada želite dublju analizu ponašanja browser-a, rada JavaScript engine-a i procesa renderovanja.

Run Carbon Control

Opcija Run Carbon Control spada u specifičnija podešavanja i većini korisnika neće trebati.

Najbolje je da je ostavite isključenu osim ako tačno znate zašto vam je potrebna.

Use Chrome dev tools traffic shaping

Pored nje se nalazi opcija Use Chrome dev tools traffic shaping, uz napomenu da se ne preporučuje.

Već sama ta napomena je dobar signal da ovu opciju ne treba uključivati bez jasnog razloga.

Host Resolver Rules

Polje Host Resolver Rules služi da browser razrešava domen ka određenoj IP adresi po pravilima koja vi zadate.

To je korisno kada želite da testirate novu verziju sajta pre promene DNS-a, staging okruženje ili migraciju na novi server.

Command Line

Polje Command Line omogućava dodavanje dodatnih parametara za pokretanje browser-a.

Ovo je već vrlo napredna opcija i namenjena je onima koji žele veoma preciznu kontrolu nad Chromium okruženjem tokom testa.

Capture Settings

U ovoj sekciji se vide opcije:

• Capture Dev Tools Timeline
• Capture Network Log

Capture Dev Tools Timeline pomaže kada želite da vidite kako browser obrađuje sadržaj, kada dolazi do zauzeća glavne niti i gde eventualno nastaje zastoj.

Capture Network Log je koristan kada želite detaljnije da pratite sve mrežne zahteve i njihove odgovore.

Capture Chrome Trace

Opcija Capture Chrome Trace služi za još detaljnije beleženje onoga što se dešava unutar browser-a.

To može biti korisno kada želite da razumete zašto je stranica teška za browser ili zašto određeni deo interfejsa deluje tromo.

Trace Categories

Polje Trace Categories određuje koje kategorije događaja će biti uključene u trace zapis.

Ovo je korisno kada tačno znate koji deo ponašanja browser-a želite da pratite detaljnije.

Enable V8 Sampling Profiler

Opcija Enable V8 Sampling Profiler služi za detaljnije profilisanje rada JavaScript engine-a V8.

Koristi se kada sumnjate da skripte ozbiljno opterećuju browser i želite dublji uvid u to gde odlazi vreme tokom izvršavanja.

Capture V8 Runtime Call Stats

Opcija Capture V8 Runtime Call Stats prikuplja dodatne statistike o radu V8 runtime okruženja.

To je već vrlo specifična analiza i nije deo svakodnevnog rada, ali može biti korisna kod ozbiljnije frontend dijagnostike.

Script tab

Za većinu osnovnih testova dovoljno je da unesete URL, izaberete uređaj i lokaciju, a zatim pokrenete analizu. Međutim, nekada vam nije dovoljno samo da proverite učitavanje jedne stranice. Nekada želite da test uključuje i konkretnu radnju. Tu na scenu stupa Script tab.

Ovde možete da zadate tačan scenario testiranja. To može biti otvaranje više stranica redom, klik na određeni element, prijava na sajt, čekanje da se učita deo sadržaja ili neki drugi korisnički korak.

Script

Na vrhu se nalazi opcija Script, koja je na slici isključena.

Kada je isključena, WebPageTest radi standardan test bez dodatnog scenarija. Kada je uključite, možete uneti sopstvenu skriptu i tako preciznije odrediti šta želite da alat uradi tokom testa.

Polje za unos skripte

Glavni deo ovog taba zauzima veliko polje u koje unosite komande koje alat treba da izvrši.

Ovo je korisno kada želite realniji test od običnog otvaranja URL-a. Na primer, kada želite da proverite performanse nakon prijave korisnika ili testirate određeni korisnički tok kroz sajt.

Import text file

Opcija Import text file služi da umesto ručnog unosa možete uvesti gotovu skriptu iz tekstualnog fajla.

To štedi vreme i smanjuje mogućnost greške kada isti scenario želite da koristite više puta.

Script Includes Sensitive Data

Na dnu se nalazi opcija Script Includes Sensitive Data.

Nju treba uključiti kada skripta sadrži osetljive podatke, kao što su korisnička imena, lozinke, tokeni ili drugi pristupni podaci. U tom slučaju skripta neće ostati trajno sačuvana u rezultatima i moraće ponovo da se unese za naredni test.

To je korisno kada testirate administrativni deo sajta, pristup internim okruženjima ili bilo koji scenario sa poverljivim podacima.

Block tab

U standardnom testu WebPageTest pokušava da učita sve što se na stranici inače učitava: slike, skripte, fontove, analitiku, marketinške alate, chat widget-e i druge spoljašnje servise. Ali nekada želite da proverite šta bi se desilo kada neki od tih resursa ne bi bio učitan. Za to služi Block tab.

Ovde možete privremeno blokirati određene zahteve i tako videti koliko oni zaista utiču na brzinu i ponašanje stranice.

Block Requests Containing URL Substrings

U ovo polje unosite delove URL adresa koje želite da alat blokira tokom testa.

To je korisno kada ne želite da blokirate ceo domen, već samo određeni tip resursa ili tačno određeni deo putanje.

Block Domains Full Host Name

Ovde unosite pune nazive domena koje želite da WebPageTest potpuno blokira tokom testa.

Ovo je praktično kada želite da proverite koliko neki spoljašnji servis utiče na performanse kao celinu. Na primer, analitika, chat alat, font servis, oglasna mreža ili neki treći servis.

Import text file

Kao i u drugim tabovima, i ovde možete uvesti gotovu listu iz tekstualnog fajla umesto ručnog unosa.

To je korisno kada radite sa većim brojem pravila blokiranja ili želite da isti scenario ponovite više puta.

SPOF tab

SPOF tab služi da proverite šta se dešava kada važan spoljašnji servis otkaže.

SPOF znači Single Point of Failure, odnosno situaciju u kojoj jedan spoljašnji servis, domen ili resurs može ozbiljno da poremeti učitavanje cele stranice.

To je važan test zato što sajt može delovati sasvim korektno dok sve radi normalno, ali se raspasti čim neki spoljašnji host kasni ili ne odgovara.

Simulate failure of specified domains

Na vrhu se vidi objašnjenje da alat može da simulira otkazivanje određenih domena tako što njihove zahteve preusmerava na internu adresu koja ih neće isporučiti.

To vam omogućava da proverite kako će se stranica ponašati kada neki spoljašnji resurs praktično “nestane”.

Hosts to fail

U glavno polje unosite hostove koje želite da simulirano “oborite”, pri čemu ide jedan host po liniji.

To mogu biti domeni sa kojih se učitavaju fontovi, analitika, chat alati, marketinške skripte, video embed servisi, CDN domeni trećih strana i bilo koji drugi spoljašnji host od kog stranica zavisi.

Tako možete proveriti vrlo konkretnu stvar: šta će se desiti ako taj servis ne bude dostupan.

Import text file

I ovde postoji opcija za uvoz gotove tekstualne liste, što je korisno kada želite da testirate više hostova ili da isti scenario sačuvate za kasnije.

Po čemu se SPOF razlikuje od Block taba

Na prvi pogled deluje slično kao Block tab, jer i ovde sprečavate učitavanje određenih resursa. Ali razlika ipak postoji.

Block tab više služi da proverite koliko određeni resurs utiče na brzinu i performanse.

SPOF tab više služi da proverite koliko je sajt ranjiv kada određeni spoljašnji host prestane da radi.

Drugim rečima, Block češće koristite za proveru opterećenja, a SPOF za proveru otpornosti sajta.

Šta WebPageTest prikazuje kada se test završi

Kada se test završi, otvara vam se stranica sa rezultatima. Tu već ne gledate podešavanja, već konkretne podatke o tome kako se stranica učitala, koliko joj je trebalo da prikaže sadržaj, gde je eventualno zapinjala i šta je najverovatnije pravilo problem.

Na prvi pogled deluje da ima dosta stvari na ekranu, ali taj prikaz je zapravo dosta logično složen. Gore prvo vidite pod kojim uslovima je test urađen, ispod toga kratak sažetak, a zatim ključne metrike i dodatne tabove za dublju analizu.

Prvo pogledajte pod kojim je uslovima test urađen

Na vrhu rezultata stoje osnovne informacije o testu. Tu ćete videti uređaj, browser, tip konekcije i lokaciju sa koje je test pokrenut.

Ovo nije usputna informacija, nego nešto što odmah treba pogledati. Isti sajt može dati sasvim drugačiji rezultat na desktopu i na telefonu, kao i na brzoj vezi i na sporijoj mreži. Isto važi i za lokaciju. Ako je test rađen iz Milana, a vi ciljate korisnike iz Srbije, rezultat može biti dobar pokazatelj, ali i dalje nije isto što i test iz bliže lokacije.

Zato svaki rezultat treba da gledate zajedno sa tim uslovima. Bez toga brojke lako mogu da zavaraju.

Tu se vidi i vreme kada je test pokrenut, a postoji i polje za naziv, što smo rekli da može biti korisno kada radite više testova pa želite da znate koji je rezultat nastao pre izmene, a koji posle nje.

Tri brze procene koje alat daje na početku

Odmah ispod osnovnih informacija vide se tri odvojena bloka:

• Is It Quick?
• Is It Usable?
• Is It Resilient?

Oni služe da vam odmah daju prvi utisak gde je problem. Nisu zamena za detaljnu analizu, ali su dobar početak jer vas odmah usmeravaju gde da gledate dalje.

Is It Quick?

Ovde alat daje kratku procenu same brzine učitavanja. To se pre svega odnosi na to koliko brzo sajt počinje da vraća sadržaj i koliko brzo korisnik dobija prvi ozbiljniji vizuelni signal.

Ako ovde vidite lošiji rezultat, uzrok često bude u jednoj od sledećih stvari: početno učitavanje je zatrpano velikim slikama, CSS ili JavaScript blokiraju prikaz, učitava se previše stvari odjednom ili stranica zavisi od previše spoljašnjih resursa.

U praksi to se najčešće rešava optimizacijom slika, rasterećenjem početnog dela stranice, boljim keširanjem i smanjenjem svega što blokira prvi prikaz.

Is It Usable?

Ovde više nije pitanje samo da li se nešto pojavilo na ekranu, nego da li stranica postaje upotrebljiva dovoljno brzo. To je važna razlika. Može se desiti da sadržaj već bude vidljiv, ali da korisnik i dalje ne može normalno da klikne, otvori meni ili koristi formu.

Ako je ovaj deo slabiji, problem je vrlo često u JavaScript-u. Konkretno, u preteškim skriptama, previše frontend logike, spoljašnjim skriptama koje opterećuju browser ili u tome što važni elementi kasno postaju aktivni.

Tu rešenje obično nije u slikama, nego u rasterećenju browser-a. To znači manje JavaScript-a, odlaganje nebitnih skripti i bolju organizaciju onoga što se izvršava odmah po učitavanju.

Is It Resilient?

Ovaj deo se odnosi na otpornost stranice. Drugim rečima, koliko je sajt stabilan i koliko zavisi od trećih strana.

Ovde alat ume da pokaže da sajt možda nije spor u klasičnom smislu, ali je labilan i dosta zavisi od spoljnih servisa. Na primer, ako neki spoljašnji servis kasni ili ne odgovara, to može da pokvari prikaz ili uspori ceo tok učitavanja.

Ako je ovde lošiji rezultat, uzrok su često skripte trećih strana koje blokiraju prikaz, prevelika zavisnost od spoljašnjih domena, kasno generisanje HTML-a ili loša organizacija resursa koji bi trebalo da budu sporedni, a zapravo usporavaju sve ostalo.

Rešenje je najčešće u tome da se treće strane drže pod kontrolom. Odnosno, da ih bude manje, da se učitavaju kasnije ili asinhrono, i da ne zavise ključni delovi stranice od nečega što nije pod vašom direktnom kontrolom.

Page Performance: deo koji treba najpažljivije gledati

Ispod tog uvodnog pregleda dolazi sekcija sa metrikama. Ovo je deo gde već vrlo jasno možete da vidite gde je problem. Ne treba svaku metriku posmatrati odvojeno i napamet, ali treba znati šta svaka od njih govori i šta najčešće stoji iza lošeg rezultata.

First Contentful Paint

First Contentful Paint pokazuje kada se na ekranu prvi put pojavi stvarni sadržaj. To može biti tekst, logo, slika ili bilo koji drugi pravi element stranice.

Ovo je jedna od prvih stvari koje korisnik oseti. Ako ova vrednost kasni, korisnik ima utisak da se dugo ništa ne dešava.

Kada je FCP loš, uzrok je često u sporom početnom odgovoru, blokirajućem CSS-u, teškim skriptama, loše optimizovanim fontovima ili prevelikim elementima na vrhu stranice.

Najčešći način da se to popravi jeste da se rastereti prvi deo učitavanja. To znači da se smanji broj stvari koje browser mora odmah da obradi, da se optimizuju slike i da se kritični resursi bolje organizuju.

Largest Contentful Paint

Largest Contentful Paint pokazuje kada se prikaže najveći vidljivi element na stranici. U praksi je to najčešće glavna slika, hero sekcija ili najveći naslov na vrhu stranice.

Ova metrika je važna jer korisnik vrlo često tek tada stiče utisak da je stranica stvarno stigla. Može nešto sitno da se pojavi ranije, ali ako glavni sadržaj kasni, ceo sajt i dalje deluje sporo.

Ako je LCP slab, najčešći krivci su prevelike slike, spor server, blokirajući CSS i JavaScript, kao i loše postavljen prioritet učitavanja glavnog sadržaja.

Ovde obično pomažu optimizacija hero slike, bolji raspored učitavanja i uklanjanje svega što odlaže prikaz glavnog dela stranice.

Cumulative Layout Shift

Cumulative Layout Shift pokazuje da li se elementi pomeraju dok se stranica učitava.

To je ona situacija kada počnete da čitate tekst ili hoćete da kliknete na nešto, a onda se raspored odjednom pomeri. To deluje loše i neozbiljno, posebno na telefonu.

Uzrok su uglavnom slike bez unapred definisanih dimenzija, kasno ubačeni baneri, iframe elementi, fontovi koji menjaju raspored ili dinamički sadržaj koji gura već učitane elemente.

Ovo se rešava tako što se dimenzije elemenata definišu unapred i tako što se raspored stranice učini stabilnijim još pre nego što sve stigne da se učita.

Time To First Byte

Time To First Byte pokazuje koliko je serveru trebalo da krene da odgovara.

Ako je ova vrednost loša, problem najčešće nije u slikama i front-end delu, nego u aplikaciji, bazi, DNS-u ili hosting okruženju.

To je važna metrika jer odmah odvaja problem sa infrastrukturom od problema sa prikazom. Ako je TTFB visok, najčešći uzroci su spora baza, previše backend obrade, loše keširanje, ili opterećeno ili neadekvatno hosting okruženje. Rešenja su bolja optimizacija servera, keširanja, baze i ukupne aplikacione logike.

Start Render

Start Render pokazuje kada stranica prvi put počinje da prikazuje bilo šta na ekranu.

To je vrlo praktična metrika, jer lepo pokazuje kada korisnik prvi put dobija signal da se stranica otvara. Ako ovde postoji kašnjenje, sajt deluje tromo i kada možda ukupne brojke nisu katastrofalne.

Uzroci su često slični kao kod FCP-a: spor početak, blokirajući CSS, teški fontovi i previše stvari koje se učitavaju prerano.

Speed Index

Speed Index pokazuje koliko brzo stranica postaje vizuelno popunjena sadržajem.

Ovo je korisno zato što ne meri samo jedan trenutak, nego utisak tempa učitavanja. Nekad dve stranice imaju slično ukupno vreme, ali jedna deluje sporije baš zato što sadržaj sporije “ispunjava” ekran.

Loš Speed Index obično znači da se bitni delovi stranice pojavljuju presporo ili u lošem redosledu. Uzrok su najčešće velike slike iznad prevoja, težak CSS i JavaScript i loše organizovan početni prikaz.

Total Blocking Time

Total Blocking Time pokazuje koliko je browser bio zauzet do te mere da stranica nije mogla normalno da reaguje.

Ovo je posebno važno kod sajtova koji na prvi pogled deluju učitano, ali su i dalje teški za korišćenje. Korisnik vidi sadržaj, ali klik ne prolazi odmah, meni kasni ili skrol nije gladak.

Tu je najčešći problem JavaScript. Konkretno, previše koda koji se izvršava prerano, preteške biblioteke ili skripte trećih strana koje opterećuju browser.

Rešenje je da se JavaScript rastereti, podeli, odloži gde može i da se pažljivije bira šta stvarno mora da se izvrši odmah.

Page Weight

Page Weight pokazuje ukupnu težinu stranice, odnosno koliko podataka mora da se preuzme.

Ako je broj visok, to ne znači automatski da je sajt loš, ali je dobar signal da treba pogledati šta ga čini toliko teškim. Često su to velike slike, video sadržaj, teški JavaScript fajlovi, nepotrebni fontovi i razni spoljašnji resursi.

Ovde rešavanje najčešće kreće od slika, jer su one vrlo često najveći pojedinačni problem. Posle toga dolaze skripte, stilovi i sve ostalo što možda nije neophodno da se učita odmah.

Total Time

Total Time pokazuje ukupno vreme testa.

Ovo jeste korisna brojka, ali ne treba da bude jedina stvar koju gledate. Sama po sebi ne govori dovoljno. Važnije je da znate zbog čega je ukupno vreme takvo. Nekad problem pravi aplikacija, nekada server, nekad slike, nekad JavaScript, a nekad kombinacija više stvari.

Zato ovu metriku ima smisla gledati zajedno sa ostalima, a ne izolovano.

Total Requests

Total Requests pokazuje koliko je ukupno zahteva stranica napravila tokom učitavanja.

Ako je taj broj visok, to često znači da se učitava previše pojedinačnih fajlova, da ima mnogo spoljašnjih servisa ili da stranica zavisi od previše resursa odjednom.

To mogu biti slike, CSS i JavaScript fajlovi, fontovi, widget-i, alati za analitiku, marketinške skripte i razni embed elementi.

Što je više zahteva, veća je šansa da se učitavanje razvlači, posebno na slabijim mrežama i telefonima. Tu pomaže smanjenje broja resursa, bolje grupisanje fajlova i racionalnije korišćenje svega što dolazi sa strane. Veliki broj modernih tema dolazi sa dosta funkcionalnosti ugrađenim u startu, od kojih neke možda nikada nećete ni koristiti, i upravo ovakve stvari utiču na ukupan broj zahteva, pa je preporuka da dobro odaberete temu koju koristite i izbegavate one koje imaju puno nepotrebnih opcija.

Vizuelni deo ispod metrika nije tu bez razloga

Ispod brojki se vidi i vizuelni tok učitavanja. To je koristan deo jer vam pokazuje kako se stranica formirala kroz vreme, a ne samo šta kažu metrički podaci.

Nekad brojke deluju pristojno, ali kada pogledate kako stranica izgleda tokom učitavanja, odmah vidite da korisnik zapravo predugo gleda skoro prazan ekran. Nekad se vidi i da se glavni sadržaj pojavljuje tek kasnije nego što biste očekivali.

Zato taj vizuelni deo vredi pogledati zajedno sa FCP, LCP i Start Render metrikama.

Ostali tabovi u rezultatima

Pored Summary taba, u rezultatima se vide i drugi tabovi, kao što su:

• Filmstrip
• Waterfall
• Opportunities
• Assets
• JavaScript

Tu već ulazite dublje u analizu.

Filmstrip

Filmstrip prikazuje niz kadrova kroz koje možete da vidite kako je stranica izgledala iz trenutka u trenutak tokom učitavanja.

Ovo je korisno jer ne morate da nagađate kada se šta pojavilo. Odmah se vidi kada je ekran bio prazan, kada se pojavio prvi sadržaj i kada je stranica počela da liči na svoju konačnu verziju.

Ako imate osećaj da sajt deluje sporije nego što brojke govore, Filmstrip često lepo pokaže zašto.

Waterfall

Waterfall je jedan od najvažnijih delova celog izveštaja.

Tu se vidi svaki zahtev koji je stranica napravila, kojim redom je krenuo, koliko je trajao i gde je nastalo zadržavanje. Ako želite da stvarno shvatite šta usporava sajt, ovde to najčešće prvi put postane potpuno jasno.

Waterfall vrlo često otkrije da problem pravi određena slika, font, CSS fajl, JavaScript, CDN, analitika, chat alat ili neki treći servis.

Ako treba da birate jedan deo izveštaja koji ćete pažljivo gledati, to je vrlo često upravo ovaj.

Opportunities

Opportunities tab daje predloge šta bi moglo da se popravi.

To nije nešto što treba slepo pratiti redom, ali jeste koristan pregled stvari koje alat prepoznaje kao prostor za poboljšanje. Tu se često vide preporuke vezane za slike, keširanje, blokirajuće resurse i slične probleme.

U ovom delu alata ćete pronaći sve ono što je identifikovano kao ključno da biste rešili usporavanja i još više ubrzali svoj web sajt. Iako je dosta opcija ovde slobodno, ipak za većinu dodatnih alata, pogotovo onih koji vam mogu pomoići da eksperimentišete sa različitim opcijama i podešavanjima, trebaće vam neki od plaćenih planova.

Najbolje je da taj tab koristite kao smernicu, a ne kao spisak koji se samo mehanički odradi.

Assets

Assets prikazuje od čega se stranica sastoji. Tu možete da vidite koliko ima slika, skripti, stilova, fontova i drugih resursa.

Ovaj deo je koristan kada pokušavate da razumete šta najviše puni stranicu i šta joj najviše diže težinu.

JavaScript

JavaScript tab je važan kada sumnjate da front-end deo sajta pravi problem.

Ako stranica deluje tromo, iako se vizuelno pojavila relativno brzo, vrlo je moguće da je problem baš tu. Ovaj deo je posebno koristan kod modernih sajtova i web aplikacija gde JavaScript ima veliku ulogu u prikazu i radu stranice.

Kako da rešavate problem kada vidite loš rezultat u WebPageTest alatu

Najgora stvar koju možete da uradite jeste da krenete da popravljate sve odjednom. Tako se lako izgubi fokus i na kraju se potroši vreme, a pravi problem ostane.

Mnogo je bolje da prvo utvrdite gde je glavni zastoj.

• Ako je loš TTFB, prvo gledajte aplikaciju, hosting, bazu i keširanje.
• Ako kasne FCP, Start Render i LCP, gledajte slike, CSS, fontove i sve što blokira prvi prikaz.
• Ako je problem u TBT-u, fokus treba da bude na JavaScript-u i ponašanju browser-a.
• Ako imate utisak da problem pravi nešto spolja, otvorite Waterfall i pogledajte da li određeni servis koči ostatak učitavanja.

Drugim rečima, ne rešava se svaki problem na istom mestu. Nekad je problem u serveru, nekad u front-endu, a nekad u trećim stranama. Poenta WebPageTest-a i jeste u tome da vam pomogne da ne nagađate, nego da vidite gde zaista treba da kopate.

Zaključak

Kao što ste videli, najveća vrednost WebPageTest alata nije u tome što vam pokaže jednu ocenu ili nekoliko brojeva, već u tome što vam pomaže da razumete zbog čega je neka stranica spora i gde tačno nastaje problem. To je i najvažnija razlika u odnosu na jednostavnije alate koji uglavnom ostanu na opštim preporukama.

Kada jednom naučite da čitate rezultate, ovaj alat vam može dosta pomoći da brže dođete do pravog uzroka usporavanja. Nekada će problem biti u serveru, nekada u slikama, nekada u CSS ili JavaScript fajlovima, a vrlo često u kombinaciji više faktora. Upravo zato je važno da ne gledate samo jednu metriku, nego celu sliku.

Na kraju, ako želite da vaš sajt ima dobru osnovu za brzo učitavanje korisnicima iz Srbije, stabilan rad i bolje uslove za SEO, pogledajte naše Premium hosting pakete. U sve Premium pakete je uključen i LiteSpeed Cache plugih za ubrzavanje rada web stranice, koji je i do deset puta brži u odnosu na Apache web server. To znači da će se i vaše stranice učitavati znatno brže u poređenju sa standardnim web hosting okruženjima.

Nenad Mihajlović