Kako koristiti HAR datoteke za analizu izvedbe tijekom vremena

Kad uzmem u obzir izvedbu web stranice, padne mi na pamet nekoliko stvari. Razmišljam o tome da pogledam zahtjeve stranice, razumijem koji se resursi učitavaju i koliko dugo ti resursi trebaju biti dostupni korisnicima.

Kartica Chrome mreža

Kartica mreža dobit će vam tablicu koja sadrži svu imovinu učitanu na stranici. Pokazat će vam i relevantne informacije o podrijetlu te imovine (domena, HTTP statusni kôd, veličina), koja je pokrenula zahtjev i redoslijedom kojim su učitane u slapu.

Ovoj tablici možete dodati više podataka tako da desnom tipkom miša kliknete jedno od zaglavlja tablice i odaberete druge stupce.

Veličina, vrijeme i vodopadni stupovi bit će presudni za razumijevanje performansi stranice. Vrijednost veličine prikazat će gzipiranu veličinu resursa (ako je primjenjivo), dok stupac vremena prikazuje ukupno trajanje od početka zahtjeva do primitka konačnog bajta u odgovoru.

Posljednje, ali ne najmanje važno, stupac vodopada pokazuje kada se sredstvo učitava zajedno s ostalim zahtjevima.

Poboljšanja performansi primjetna su promjenama u vašem kodu / okruženju. Pa kako možemo pratiti što se analizira na kartici Mreža? Izvozom stranice u HAR formatu.

Što je HAR datoteka?

Datoteka HAR (skraćenica od HTTP Archive) je JSON datoteka koja sadrži sve informacije o interakciji preglednika sa stranicom. Sadržat će HTML dokument i pripadajuće JS i CSS datoteke.

Uz ovaj sadržaj, datoteka HAR sadržavat će i sve podatke zaglavlja i metapodatke preglednika (odnosno vrijeme svakog zahtjeva).

Ovdje je važno napomenuti da će se kolačići i podaci obrazaca također bilježiti u datoteku, pa pripazite da tijekom revizije stranica ne uključujete osjetljive podatke (osobne podatke, lozinke, brojeve kreditnih kartica).

Također, trebali biste revidirati stranice u privatnim prozorima, čime se izbjegavaju proširenja preglednika. Važno je izbjegavati proširenja preglednika jer mogu mijenjati vrijeme učitavanja stranice.

Generiranje HAR datoteka

Google Chrome

  • Zatvorite sve anonimne prozore u pregledniku Google Chrome.
  • Otvorite novi anonimni prozor u Google Chromeu.
  • Idite na View> Developer> Developers Tools.
  • Na ploči Developer Tools odaberite karticu Network.
  • Označite potvrdne okvire Spremi zapisnik i Onemogući predmemoriju da biste zabilježili sve interakcije.
  • Osvježite stranicu.
  • Kliknite Izvoz HAR-a (ikona strelice dolje) za izvoz HAR datoteke.
  • Spremite HAR datoteku.

Firefox

  • Zatvorite sve privatne prozore u Firefoxu.
  • Otvorite novi privatni prozor u Firefoxu.
  • Idite na Alati> Razvojni programer> Mreža ili ctrl-shift-E.
  • Osvježite stranicu.
  • U ikoni Cog (gornja desna strana stranice) odaberite Save All As Har.
  • Spremite HAR datoteku.
Kartica Firefox Network

Safari

  • Provjerite je li potvrđen potvrdni okvir Show Develop menu na traci izbornika u Safari> Preferences> Advanced.
  • Odaberite Datoteka> Otvori novi privatni prozor.
  • Posjetite web stranicu na kojoj se problem javlja.
  • Odaberite Razviti> Prikaži web inspektora. Pojavljuje se prozor Web Inspector.
  • Osvježite stranicu.
  • Kliknite Izvoz na gornjoj desnoj strani okna.
  • Spremite HAR datoteku.
Kartica Safari Network

Čitanje HAR datoteka

Nakon što imate HAR datoteku, možete isprobati nekoliko pregledača HAR-a na mreži. Meni je osobno najdraži onaj koji je stvorio Jan Odavarko.

HAR preglednik

Ono što mi se posebno sviđa kod ovog preglednika jest činjenica da možete istovremeno otvoriti više datoteka, što olakšava njihovu usporedbu.

Korištenje HAR datoteka za analizu performansi stranice

Datoteke HAR mogu biti korisne za prikupljanje podataka o imovini stranice. Budući da imate detaljne informacije o njihovom sadržaju, možete usporediti što se poboljšalo (ili u nekim slučajevima nije poboljšalo) nakon pokretanja nove značajke ili dovršetka redizajna, na primjer.

Tijekom svog tijeka rada volim pratiti konačne vrijednosti veličine / vremena nekoliko stranica proizvoda na kojem radim.

Više informacija

  • Izmjerite vrijeme učitavanja resursa
  • Izvorni kod HAR Viewera

Također objavljeno na mom blogu. Ako vam se sviđa ovaj sadržaj, slijedite me na Twitteru i GitHubu. Naslovnu fotografiju William Daigneault / Unsplash