Când iau în considerare performanța unui site web, îmi vin în minte mai multe lucruri. Mă gândesc să analizez solicitările unei pagini, să înțeleg ce resurse sunt încărcate și cât durează aceste resurse să fie disponibile utilizatorilor.

Fila Rețea Chrome

Fila rețea vă va oferi un tabel care conține toate activele încărcate pe pagină. De asemenea, vă va arăta informații relevante despre originea acelor active (domeniu, cod de stare HTTP, dimensiune), care au inițiat solicitarea și ordinea în care au fost încărcate într-o reprezentare cascadă.

Puteți adăuga mai multe informații la acest tabel făcând clic dreapta pe unul dintre antetele tabelului și alegând alte coloane.

Dimensiunea, timpul și coloanele cascadei vor fi cruciale pentru a înțelege performanța unei pagini. Valoarea dimensiunii va prezenta dimensiunea gzipped a resursei (atunci când este cazul), în timp ce coloana de timp arată durata totală de la începutul cererii până la primirea octetului final în răspuns.

Nu în ultimul rând, coloana cascadă demonstrează când materialul este încărcat împreună cu celelalte solicitări.

Îmbunătățirile de performanță sunt vizibile prin modificări ale codului / mediului dvs. Deci, cum ținem evidența a ceea ce este analizat de fila Rețea? Exportând pagina în format HAR.

Ce este un fișier HAR?

Un fișier HAR (scurt pentru HTTP Archive) este un fișier JSON care conține toate informațiile despre interacțiunile unui browser cu o pagină. Acesta va conține documentul HTML și fișierele JS și CSS respective.

Împreună cu acest conținut, un fișier HAR va conține, de asemenea, toate informațiile anteturilor și metadatele browserului (adică ora fiecărei cereri).

Este important să menționăm aici că cookie-urile și datele formularului vor fi, de asemenea, înregistrate în fișier, deci aveți grijă să nu includeți informații sensibile (detalii personale, parole, numere de card de credit) în timpul auditării paginilor.

De asemenea, ar trebui să auditați paginile din ferestrele private, ceea ce evită extensiile browserului. Este important să evitați extensiile unui browser, deoarece acestea pot modifica timpul de încărcare al unei pagini.

Generarea fișierelor HAR

Google Chrome

  • Închideți toate ferestrele incognito din Google Chrome.
  • Deschideți o nouă fereastră incognito în Google Chrome.
  • Accesați Vizualizare> Dezvoltator> Instrumente pentru dezvoltatori.
  • În panoul Instrumente pentru dezvoltatori, alegeți fila Rețea.
  • Bifați casetele de validare Conservare jurnal și Dezactivare cache pentru a înregistra toate interacțiunile.
  • Reincarca Pagina.
  • Faceți clic pe Export HAR (pictograma săgeată în jos) pentru a exporta fișierul HAR.
  • Salvați fișierul HAR.

Firefox

  • Închideți toate ferestrele private din Firefox.
  • Deschideți o nouă fereastră privată în Firefox.
  • Accesați Instrumente> Dezvoltator> Rețea sau ctrl-shift-E.
  • Reincarca Pagina.
  • În pictograma Cog (partea dreaptă sus a paginii), alegeți Salvați tot ca har.
  • Salvați fișierul HAR.
Fila Rețea Firefox

Safari

  • Asigurați-vă că bifați caseta de selectare Afișare meniu în bara de meniu este bifată în Safari> Preferințe> Avansat.
  • Alegeți Fișier> Deschideți fereastra privată nouă.
  • Accesați pagina web unde apare problema.
  • Alegeți Dezvoltare> Afișare inspector web. Apare fereastra Web Inspector.
  • Reincarca Pagina.
  • Faceți clic pe Export în partea dreaptă sus a panoului.
  • Salvați fișierul HAR.
Fila Rețea Safari

Citirea fișierelor HAR

După ce aveți un fișier HAR, puteți încerca câțiva spectatori HAR online. Favoritul meu personal este unul creat de Jan Odavarko.

Vizualizator HAR

Ceea ce îmi place la acest vizualizator în special este faptul că puteți avea mai multe fișiere deschise în același timp, ceea ce face mai ușor să le comparați.

Utilizarea fișierelor HAR pentru a analiza performanța unei pagini

Fișierele HAR pot fi utile pentru a colecta informații despre activele unei pagini. Deoarece aveți informații detaliate despre conținutul lor, puteți compara ceea ce s-a îmbunătățit (sau, în unele cazuri, nu s-a îmbunătățit) după lansarea unei noi funcții sau finalizarea unei reproiectări, de exemplu.

În timpul fluxului meu de lucru, îmi place să urmăresc valorile finale ale dimensiunii / timpului pentru câteva pagini ale produsului la care lucrez.

Mai multe informatii

Postat și pe blogul meu. Dacă îți place acest conținut, urmărește-mă Stare de nervozitate și GitHub. Fotografia de copertă de William Daigneault / Unsplash