+381 065 528 7 338 info@webstudiolink.com

GTmetrix je jedan od najpopularnijih online alata za testiranje brzine učitavanja web-sajta.

Novi GTmetrix dolazi sa nekoliko novih alata i sa potpuno novim interfejsom. Pre svega više nema PageSpeed Yslow biblioteka, koje je GTmetrix dugo vremena koristio za analizu testiranih sajtova. To je najuočljivija ali ne i jednina promena.

Analiza web sajta GTmetrix Speed Test alatom

Za razliku od prethodne verzije, novi GTmetrix koristi nešto drugačije alate i ima malo drugačiji interfejs.

Ono što je svakako najveća novina kada je u pitanju novi GTmetrix je korišćenje metrike pod nazivom Core Web Vitals (ili samo Web Vitals). U pitanju je Google-ov set od tri parametra koji u neku ruku predstavljaju sažeto korisničko iskustvo koje ima onaj koji dolazi na vaš web sajt:

  • Brzina učitavanja (koliko brzo se sadržaj pojavljuje na ekranu)
  • Odziv (koliko brzo stranica reaguje na input od strane korisnika)
  • Stabilnost prikaza (da li se sadržaj pomera na ekranu prilikom učitavanja).

Ova tri parametra su predstavljena odgovorajućom metrikom koja je sastavni deo novog GTmetrix-a.

web vitalis
  • LCP (Large Contextual Paint: Ovim se meri koliko je vremena potrebno da se najveći deo sadržaja web stranice pojavi na ekranu. Ovo može biti slika ili blok teksta. Dobra ocena daje korisnicima osećaj da se stranica brzo učitava. Loša ocena znači da se sadržaj sporo učitava.
  • FIS (First Input Delay): Ovim se meri koliko je potrebno da web stranica reaguje na prvu interakciju sa korisnikom. Na primer, ovo može biti klik mišem ili na taster.
  • CLS (Cumulative Layout Shift): Ovim se meri vizuelna stabilnost web sajta. Drugim rečima, da li se sadržaj kreću po ekranu dok se učitava – i koliko često se to događa?

Već smo rekli da više nema PageSpeed i Yslow biblioteka. Umesto toga novi GTmetrix sada ima sledeće sekcije:

  • GTmetrix Summary
  • Performance
  • Structure
  • Waterfall Chart
  • Video
  • History

U daljem tekstu ćemo obraditi svaku od ovih sekcija posebno.

GTmetrix summary

Prvo što vidite kao rezultat testiranja GTmetrix-om jeste takozvani Performance Report. On se sastoji od GTmetrix Grade-a i već pomenutog Web Vitals-a.

Summary report takođe sadrži i vremensku liniju (timeline) u vidu Speed Visualisation report-a koja prikazuje ključne događaje tokom učitavanja stranice i predstavlja brzinu učitavanja prikazano po segmentima.

Tu su prikazane tačke kao što su TTFB, FCB, LPC, onload time, time to interactive i fully loaded. Svaka od njih predstavlja određenu fazi tokom učitavanja web sajta.

Na kraju Summary report-a nalaze se sekcije pod nazivom Top Issues i Page Details. Kao što i samo ime kaže Top Issues predstavlja prikaz problema koje je GTmetrix detektovao tokom testiranja, dok Page Details prikazuje detaljan izveštaj vezan za veličinu fajlova koji se učitavaju tokom prikazivanja stranice.

Performance

Sledeći tab je Performance. On pokazuje metriku za nekoliko posmatranih kriterijuma koje vuče iz Lighthouse podataka. Pored već prikazanih LCP, TBT i CLS prikazanih na Summary tab-u, Performance tab prikazuje i Spped Index (SI), Time to Interactive (TTI) i First Contentful Paint (FCP).

Iako vam ovi podaci neće dati konkretnu informaciju šta treba da popravite na svom sajtu, daće vam dobar uvid u to koji segment biste trebali da popravite.

Ispod na istoj stranici se nalazi statistički izveštaj u vezi sa vremenom učitavanja unutar browser-a, koji uključuje Onload Time, Time to First Byte i Fully Loaded Time.

Structure

U okviru ovog taba možete videti specifične probleme koji utiču na performanse vašeg web sajta. Sadrži veoma detaljne izveštaje koji uključuju i linkove ka konkretnim stranicama na kojima je detektovan neki problem, kao i preporuke za njihovo rešavanje.

Ovaj tab je u drugačijem obliku postojao i u prethodnoj verziji GTmetrix-a. Negde se analiza odnosi na parametre i element koji su sa malo drugačijim nazivom postojali i u prethodnoj verziji. Tada je on bio generisan iz PageSpeed alata. U novom GTmetrix-u sada ima uglavnom drugačije i neke nove parametre po kojima vrši analizu, tako da je to ipak jedan potpuno drugačiji alat i izveštaj.

Waterfall

Ovo je definitivno najkorisniji i najdetaljniji izveštaj koji ćete dobiti u GTmetrix-u. Prikazuje svaki pojedinačni request na vašem web sajtu.

Analizom ovog izveštaja možete da saznate mnogo korisnih informacija koje će vam pomoći da utvrdite koji to elementi blokiraju i usporavaju učitavanje vašeg sajta.

Za razliku od prethodne verzije GTmetrix-a, u novom Waterfall chart-u su zasebno po tabovima prikazani različiti elementi koji se učitavaju prilikom renderovanja stranice. Tako možete videti posebno HTML, posebno CSS, JavaScriot i druge elemente.

Ovo je veoma korisno kada želite da pretražite samo određeni element za koji pretpostavljate ili znate da pravi problem.

Ukoliko se zadržite mišem na nekoj od konkretnih linija, pojaviće se novi prozor sa detaljima koji se odnose na određene elemente. Oni su obeleženi različitim bojama od kojih svaka označava određeni element / kategoriju.

Sada ćemo pojasniti šta svaka od tih boja znači.

Blocking (braon)

Kada browser učitava web stranu, JavaScript i CSS resursi obično sprečavaju web stranicu da se prikaže sve dok ne budu preuzeti i procesirani od strane browser-a. Taj zastoj u učitavanju se u waterfall chart-u prikazuje kao blocking i označen je braon bojom.

DNS Lookup (svetlo plava)

DNS lookup možemo donekle da uporedimo sa telefonskim imenikom. Znamo da postoje DNS serveri kod kojih se nalazi informacija o vašem veb-sajtu i tome na koju IP adresu treba da bude rutiran. Kada prvi put testirate vaš veb-sajt preko Gtmetrix-a, on pokrene nov lookup i mora da pošalje upit DNS serveru za IP adresu. Za sve to je potrebno neko vreme – u svakom slučaju kratko vreme, ali kada je u pitanju brzina veb-sajta, svaka milisekunda je važna.

Connecting (zelena)

Vreme povezivanja se u GTmetrix-u se odnosi na TCP konekciju, odnosno na ukupno vreme potrebno za uspostavljanje TCP konekcije između servera i hosta.

Sending (crvena)

Sending (odnosno slanje) je vreme koje je potrebno browser-u da pošalje podatke ka serveru.

Waiting (ljubičasta)

Waiting (ili čekanje) je u GTmetrix-u mertrika koja je u poznatija kao TTFB (time to first byte). Ova metrika označava odziv web servera ili nekog drugog mrežnog uređaja. U principu, sve ispod 100ms je dobro i prihvatljivo je za najveći broj sajtova.

Ako ste u rezultatima dobili rezultat koji prelazi 300ms, onda je najverovatnije problem u pogrešnoj konfiguraciji servera ili je možda vreme da pređete na neki napredniji web server.

Receiving (siva)

Receiving (primanje) predstavlja vreme potrebno da browser primi podatke od web servera.

Event Timings

Svaki put kada otvarate neku web stranicu ona ima event timing (vreme za koje se neki događaj izvršava) u kojem se određeni elementi renderuju / učitavaju.

Izveštaj o tome ćete naći u posebnom prozoru koji se otvara u okviru Waterfall Chart-a ukoliko mišem stanete na neki konkretan dođaj (liniju u chart-u).

First Paint (zelena) predstavlja prvu tačku u kojoj browser započinje renderovanje stranice, kao na primer prikazivanje pozadine stranice.

DOM loaded (plava) predstavlja tačku u kojoj je DOM spreman (Document Object Model)

Onload (crvena) označava vreme u kojem je procesiranje stranice završeno i u kojem je završeno učitavanje svih resursa na stranici (slike, CSS…itd)

Fully Loaded (ljubičasta) predstavlja tačku nakon što se pokrene Onload i nakon koje 2 sekunde nema mrežnih aktivnosti.

Ovo je ujedno i sve što smatramo korisnim da znate kada je u pitanju razumevanje Waterfall chart-a. Za neko detaljnije upoznavanje možete pogledati ovaj vodič za čitanje Watherfall Chart-a.

Zaključak

Novi GTmetrix donosi nešto drugačiji pristup analizi brznie web sajta, ali je u suštini to onaj isti alat koji u svojoj osnovi sadrži sve bitne izveštaje koji vam mogu pomoći da iz svog sajta izvučete makimalnu brzinu.