Chrome (și Edge) include DevTools, util pentru a analiza încărcarea paginii. Îl deschizi cu Ctrl+Shift+I (Windows/Linux) sau Cmd+Option+I (macOS), apoi mergi la tab-ul Network.
Reîncarcă pagina cu DevTools deschis: Chrome listează toate resursele și, pentru fiecare, afișează Name, Method (GET/POST), Status HTTP, Type (MIME), Size și Time.
Cascada (waterfall)
Ținând mouse-ul peste bara fiecărei resurse vezi defalcarea timpilor:
- Blocking — DNS, SSL și deschiderea conexiunii;
- Sending — trimiterea cererii;
- Waiting (TTFB) — timpul în care serverul procesează și începe să răspundă;
- Receiving — descărcarea conținutului.
În partea de jos vezi rezumatul: numărul de cereri, dimensiunea totală și cele două evenimente cheie — DOMContentLoaded (când pagina devine utilizabilă) și Load (când s-au încărcat toate resursele). Combinația Waiting + Receiving este factorul principal al vitezei. Pentru o analiză cu scor și recomandări, folosește și tab-ul Lighthouse din DevTools.
