HAR fájl vízesésdiagram-elemző

A HAR (HTTP Archive) fájl egy JSON formátumú export, amely mindent tartalmaz, amit a böngésző DevTools Hálózat panelje rögzített egy oldalbetöltés során: minden kérés és válasz fejlécét, a válaszok pontos méretét és MIME-típusát, valamint kérésenkénti időzítési bontást. Ilyen fájlt a Chrome, a Firefox, az Edge vagy a Safari böngészőben készíthet: nyissa meg a DevTools eszközt, töltse újra az oldalt a Hálózat fülön, majd kattintson a jobb gombbal a kérések listájára, és válassza a „Save all as HAR with content” lehetőséget. Ez az eszköz közvetlenül ezt az exportált fájlt olvassa be – semmit nem tölt le újra, és nem küld el sehova.

A vízesésdiagram teljes egészében a fájlban már meglévő adatokból épül fel: minden bejegyzés saját időzítési objektuma blocked, DNS lookup, connect, SSL/TLS negotiation, send, wait (time to first byte) és receive fázisokra bont egy kérést, és minden fázis saját, színezett sávként jelenik meg. A HAR specifikáció szerint az SSL idő a connect részeként is szerepel, ezért azt először levonjuk – különben a TLS szakasz kétszeresen számítana, és a sávok szélessége nem adná ki a kérés valós időtartamát. Szaggatott függőleges vonalak jelzik a DOMContentLoaded és a Load eseményeket, amelyeket közvetlenül a fájl saját oldalidőzítési adataiból olvasunk ki, így pontosan láthatja, mely kérések fejeződtek be még azelőtt, hogy az oldal interaktívvá vált.

A diagramon túl az eszköz három keresési szabályt futtat a HAR formátumban már rögzített mezőkön. Jelzi a gyorsítótárazható (200, 203 vagy 206 státuszú) válaszokat, amelyek sem Cache-Control, sem Expires fejléccel nem rendelkeznek, vagyis egy ismételt látogatáskor ezeket újra le kell tölteni a semmiből. Jelzi az 1 KB-nál nagyobb szöveges – HTML, CSS, JavaScript, JSON, SVG és hasonlók – válaszokat, amelyek Content-Encoding nélkül érkeztek, ami egy könnyen kiaknázható tömörítési lehetőség, a legtöbb szerveren egyetlen konfigurációs sorral bekapcsolható. Végül jelzi azokat a CSS vagy JavaScript kéréseket, amelyek az oldal saját DOMContentLoaded időpontja előtt kezdődtek – ez a renderelést blokkoló elemek klasszikus jele.

Mindez a feltöltött fájlban már meglévő adatokon fut: nincs hálózati hozzáférés, nincs külső lekérdező szolgáltatás, és az eredeti oldal újra letöltésére sem kerül sor. A HAR fájl olvasása, feldolgozása és megjelenítése teljes egészében a böngészőjében történik, és soha nem kerül feltöltésre sehova.