cum se măsoară performanța site-ului web utilizând Google Chrome instrumente pentru dezvoltatori

acest articol descrie modul de utilizare a instrumentelor pentru dezvoltatori Google Chrome pentru a măsura și monitoriza performanța unui site web.

utilizarea instrumentelor pentru dezvoltatori Chrome

browserul web Google Chrome include instrumente pentru dezvoltatori, o caracteristică care ajută dezvoltatorii web să depaneze probleme cu HTML, CSS și JavaScript:

• Pentru a accesa instrumente pentru dezvoltatori pe Microsoft Windows sau Linux, apăsați Ctrl+Shift+I.
• Pentru a accesa instrumente pentru dezvoltatori pe Apple Mac OS X, apăsați Option+Command+I.

următoarea imagine afișează instrumente pentru dezvoltatori deschise pe pagina de pornire Google:

în fila Rețea din panoul Instrumente pentru dezvoltatori, Chrome listează toate conexiunile pentru pagina curentă. Pentru a testa o anumită pagină, deschideți Instrumente pentru dezvoltatori și navigați la pagina pe care doriți să o testați. Alternativ, dacă doriți să testați pagina curentă, pur și simplu reîmprospătați pagina.

Chrome afișează informații pentru fiecare resursă de pagină și solicitarea acesteia:

nume: numele sau adresa URL a resursei solicitate.

metodă: metoda HTTP (GET sau POST).

Status: codul de stare HTTP returnat de server.

Type: tipul MIME al resursei.

inițiator: referentul trimis către server; aceasta este de obicei adresa URL a paginii pe care o vizualizați.

Dimensiune: Dimensiunea resursei așa cum a fost primită de browser (dacă pagina a fost comprimată de server, această valoare este mai mică decât dimensiunea reală a fișierului).

timp: timpul total pentru a prelua resursa, inclusiv căutarea DNS și timpul de descărcare.

cronologie: cronologia este o vizualizare temporală “cascadă” a fiecărei cereri. Dacă plasați cursorul mouse-ului peste o bară de pe cascadă, apare un sfat cu o defalcare detaliată a timpului de descărcare:

• blocarea: aceasta include timpul pentru căutarea DNS, strângerea de mână SSL și realizarea unei conexiuni la server.
• trimiterea: Aceasta include timpul pentru a trimite cererea cu toate datele de solicitare către server și pentru a primi confirmarea de la server că a primit cererea.
• așteptare: aceasta include timpul pentru ca serverul să redea conținutul care urmează să fie servit și să înceapă trimiterea acestuia către browser.
• primirea: aceasta include timpul necesar pentru a descărca conținutul.

combinația timpilor de așteptare și primire este cel mai important factor în determinarea vitezei site-ului. Cu toate acestea, viteza conexiunii la internet poate afecta și performanța, deci ar trebui să comparați întotdeauna orele din aceeași locație atunci când stabiliți repere de performanță ale site-ului.

în partea de jos a filei rețea este un rezumat al procesului de încărcare a paginii. Acest Rezumat include numărul total de solicitări, dimensiunea totală a întregii pagini, inclusiv resursele acesteia, și o defalcare a timpului petrecut pentru redarea paginii în browser.

valoarea pentru prima dată este timpul total petrecut încărcând tot conținutul de pe pagină. Această valoare include conținutul încărcat de JavaScript după randarea paginii; ca urmare, acest număr se poate modifica dacă cererile apar în fundal.

cele două valori de timp din paranteze sunt evenimente importante pentru optimizarea site-ului:

• încărcare: Acest eveniment este momentul pentru a încărca pagina, inclusiv toate fișierele JavaScript, CSS și imagine care se află în documentul HTML original. Acest eveniment durează, în general, mai mult decât evenimentul DOMContentLoaded.
• DOMContentLoaded: acest eveniment reprezintă timpul perceput de un utilizator pentru a încărca pagina. Este timpul să redați pagina așa cum este descris în documentul original înainte ca JavaScript să solicite resurse suplimentare. Acest timp este stocat atunci când browserul declanșează evenimentul DOMContentLoaded în JavaScript. (Un exemplu de resursă solicitată în afara DOM este Google Analytics.)