A HAR fájlok használata a teljesítmény időbeli elemzéséhez

Ha egy weboldal teljesítményét mérlegelem, több dolog jut eszembe. Gondolkodom azon, hogy megnézzem az oldal kéréseit, megértem, hogy milyen erőforrásokat töltenek be, és hogy ezek az erőforrások mennyi idő alatt állnak rendelkezésre a felhasználók számára.

Chrome Hálózat fülre

A Hálózat fül egy táblázatot tartalmaz, amely az oldalra töltött összes eszközt tartalmazza. Megjeleníti a releváns információkat azoknak az eszközöknek a származásáról (tartomány, HTTP állapotkód, méret) is, akik kezdeményezték a kérést, valamint a vízesés ábrázolásának sorrendjéről.

Ha további információkat szeretne hozzáadni ehhez a táblához, kattintson a jobb gombbal az egyik táblázat fejlécére, és válassza az egyéb oszlopokat.

A méret, az idő és a vízesés oszlopok döntő fontosságúak lesznek az oldal teljesítményének megértéséhez. A méret értéke az erőforrás gzip méretű méretét mutatja (ha alkalmazható), míg az idő oszlop a teljes időtartamot mutatja a kérés kezdetétől a végső bájt fogadásáig a válaszban.

Végül, de nem utolsósorban, a vízesés oszlop bemutatja, hogy az eszköz betöltődik-e a többi kéréssel együtt.

A teljesítmény javulása észrevehető a kód / környezet megváltoztatásával. Tehát hogyan tudjuk nyomon követni, hogy mit elemez a Hálózat fül? Az oldal HAR formátumban történő exportálásával.

Mi az a HAR fájl?

A HAR (a HTTP-archívum rövidítése) egy JSON-fájl, amely minden információt tartalmaz a böngésző és az oldal közötti interakciókról. Tartalmazza a HTML dokumentumot és a hozzá tartozó JS és CSS fájlokat.

E tartalom mellett a HAR fájl tartalmazza az összes fejléc adatait és a böngésző metaadatait (vagyis az egyes kérelmek idejét).

Fontos itt megemlíteni, hogy a sütik és az űrlapadatok is naplózásra kerülnek a fájlban, ezért ügyeljen arra, hogy az oldalak ellenőrzése közben ne adjon meg bizalmas információkat (személyes adatokat, jelszavakat, hitelkártyaszámokat).

Ellenőriznie kell a privát ablakokban található oldalakat is, ezzel elkerülhető a böngésző kiterjesztése. Fontos kerülni a böngésző kiterjesztéseit, mivel ezek módosíthatják az oldal betöltési idejét.

HAR fájlok generálása

Google Chrome

  • Zárjon be minden inkognitóablakot a Google Chrome-ban.
  • Nyisson meg egy új inkognitóablakot a Google Chrome-ban.
  • Válassza a Nézet> Fejlesztő> Fejlesztői eszközök lehetőséget.
  • A Fejlesztői eszközök panelen válassza a Hálózat fület.
  • Az összes interakció rögzítéséhez jelölje be a Napló megőrzése és a gyorsítótár letiltása jelölőnégyzeteket.
  • Frissítsd az oldalt.
  • Kattintson a HAR exportálása (lefelé mutató nyíl ikon) gombra a HAR fájl exportálásához.
  • Mentse a HAR fájlt.

Firefox

  • Zárjon be minden privát ablakot a Firefoxban.
  • Nyisson meg egy új privát ablakot a Firefoxban.
  • Válassza az Eszközök> Fejlesztő> Hálózat vagy a ctrl-shift-E parancsot.
  • Frissítsd az oldalt.
  • A Fogaskerék ikonban (az oldal jobb felső sarkában) válassza az Összes mentése másként lehetőséget.
  • Mentse a HAR fájlt.
Firefox Hálózat fülre

Szafari

  • Győződjön meg arról, hogy a Menü megjelenítése a menüsorban jelölőnégyzet be van jelölve a Safari> Beállítások> Speciális menüpont alatt.
  • Válassza a Fájl> Új privát ablak megnyitása lehetőséget.
  • Látogasson el arra a weboldalra, ahol a probléma felmerül.
  • Válassza a Fejlesztés> Webellenőr megjelenítése lehetőséget. Megjelenik a Web Inspector ablak.
  • Frissítsd az oldalt.
  • Kattintson a panel jobb felső sarkában az Exportálás elemre.
  • Mentse a HAR fájlt.
Safari Network fül

HAR fájlok olvasása

Ha van HAR fájlja, kipróbálhat néhány HAR nézőt online. Személyes kedvencem Jan Odavarko által készített.

HAR Viewer

Ami különösen tetszik ebben a nézőben, az a tény, hogy egyszerre több fájl is megnyitható, ami megkönnyíti azok összehasonlítását.

HAR fájlok használata egy oldal teljesítményének elemzéséhez

A HAR fájlok hasznosak lehetnek az oldal tartalmaival kapcsolatos információk gyűjtéséhez. Mivel részletes információval rendelkezik a tartalmukról, összehasonlíthatja, mi javult (vagy egyes esetekben nem javult) például egy új szolgáltatás elindítása vagy az újratervezés befejezése után.

Munkafolyamatom során szeretném nyomon követni a termék néhány oldalának végső méret / idő értékét, amelyen dolgozom.

Több információ

  • Mérje meg az erőforrások betöltési idejét
  • HAR Viewer forráskód

A blogomra is felkerült. Ha tetszik ez a tartalom, kövessen a Twitteren és a GitHub-on. Címlapfotó: William Daigneault / Unsplash