HAR File Waterfall Analyzer
Töltsön fel egy .har fájlt, amelyet a böngészője DevTools programjából exportálunk, hogy megtekinthesse az egyes kérések saját időzítési adataiból felépülő valódi kérés-vízesést, valamint ellenőrizze a hiányzó gyorsítótár fejléceit, a tömörítetlen válaszokat és a megjelenítést blokkoló szkripteket.
Eredmény
A HAR (HTTP-archívum) fájl JSON-exportja mindazoknak, amelyeket a böngésző DevTools Network panele rögzített az oldalbetöltés során: minden kérés és válasz fejlécet, az egyes választörzsek pontos méretét és MIME-típusát, valamint a kérésenkénti időzítést. Létrehozhat egyet a Chrome, Firefox, Edge vagy Safari böngészőből. Ehhez nyissa meg a DevTools programot, töltse be újra az oldalt a Hálózat lapon, majd kattintson a jobb gombbal a kérelmek listájára, és válassza az „Összes mentése tartalommal HAR néven” lehetőséget. Ez az eszköz közvetlenül beolvassa az exportált fájlt – semmit sem tölt le vagy kér újra.
A vízesés diagram teljes egészében a fájlon belüli adatokból épül fel: minden bejegyzés saját időzítési objektuma blokkolt, DNS-keresési, kapcsolódási, SSL/TLS-egyeztetési, küldési, várakozási (első bájtig eltelt idő) és fogadási fázisokra bontja a kérelmet, és minden egyes fázis saját színes szegmensként rajzolódik ki. A HAR-specifikáció szerint az SSL-idő is benne van a csatlakozáson belül, tehát először azt vonják vissza – különben a TLS-részt kétszer számolják, és a sávszélességek már nem adják össze a kérés valós időtartamát. A szaggatott függőleges jelölők a DOMContentLoaded és Load feliratokat mutatják, közvetlenül a fájl saját oldalidőzítéséből olvashatók, így pontosan láthatja, hogy mely kérések fejeződtek be, mielőtt 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. Megjelöli azokat a gyorsítótárazható válaszokat (200-as, 203-as vagy 206-os állapot), amelyek nem tartalmaznak sem Cache-Control-t, sem Expires-fejlécet, ami azt jelenti, hogy az ismételt látogatás során a semmiből újra le kell tölteni őket. Megjelöli az 1 KB-nál nagyobb szöveges válaszokat – HTML, CSS, JavaScript, JSON, SVG és hasonlók –, amelyeket tartalomkódolás nélkül szolgáltak ki. Ez egy egyszerű tömörítési lehetőség, amelyet a legtöbb szerver egyetlen konfigurációs sorral is bekapcsolhat. És megjelöli azokat a CSS vagy JavaScript kéréseket, amelyek az oldal saját DOMContentLoaded eltolása előtt kezdődtek, ami a megjelenítést blokkoló tartalom klasszikus aláírása.
Mindez olyan adatokon fut, amelyek már benne vannak a feltöltött fájlban – nincs hálózati hozzáférés, nincs külső keresési szolgáltatás, és nem lehet újra lekérni az eredeti oldalt. A HAR fájl teljes egészében beolvasásra, elemzésre és megjelenítésre kerül a böngésző lapján, és soha nem töltődik fel sehova.