A Resource Waterfall az oldal minden kérését egy idővonalon rajzolja meg, minden sávot valós fázisaira bontva – sorban állás, DNS, TCP, TLS, várakozás és letöltés – FCP, LCP, DOMContentLoaded és betöltés jelölőkkel.
Amikor egy oldal lassúnak tűnik, mindig ugyanaz a kérdés: mire vár? A böngésző saját válasza a Hálózat panelen található, ami azt jelenti, hogy meg kell nyitni a DevTools-t, dokkolni egy fiókot a vizsgált oldal fölé, és újra kell tölteni, hogy a betöltés kezdetét észlelje.
A Resource Waterfall ezt az idővonalat egy lebegő panelen helyezi el az oldal mellett. Minden kérés sávként jelenik meg, amely az indulás időpontja szerint van elrendezve, és aszerint van szegmentálva, hogy hol telt el az ideje: sorban állás vagy leállás, DNS-keresés, TCP-csatlakozás, TLS-kézfogás, várakozás a szerverre, majd letöltés. A hosszú kék szegmens lassú szerver; a hosszú zöld egy kövér reszelő; a hosszú szürke azt jelenti, hogy a kérés a sorára vár. A megkülönböztetés dönti el, hogy mit kell javítania.
Az idővonalon lévő szaggatott jelölők a First Contentful Paint, a Largest Contentful Paint, a DOMContentLoaded és a betöltést mutatják, így láthatja, hogy mely kérések fejeződnek be, mielőtt a felhasználó bármit is látna, és melyek vannak még folyamatban ezután is. A renderelést blokkoló erőforrások és a gyorsítótár találatai minden sorban meg vannak jelölve, és egyetlen blokkolószűrő levágja a listát az első festés tényleges késleltetésére.
Szűrjön típus szerint, keressen URL alapján, vagy rendezze a leglassabb vagy legnagyobb szerint, hogy gyorsan megtalálja a legrosszabb elkövetőt. Kattintson bármelyik sorra a teljes URL-cím, a protokoll, az átviteli és dekódolt méretek, az állapot és a teljes fázisbontás megtekintéséhez. Azok a kérések, amelyek akkor érkeznek, amikor a panel nyitva van, közvetlenül beérkeznek, az Export JSON pedig lemásolja a teljes idővonalat, beleértve a mérföldköveket is, így a teljesítmény-lelet képernyőkép nélkül átadható másnak.
Minden sáv sorba állított, DNS-re, TCP-re, TLS-re van felosztva, várakozásra és letöltésre, így a lassú szerver, a vastag fájl és a sorba állított kérés azonnal megkülönböztethető.
Az FCP, LCP, DOMContentLoaded és load szaggatott vonalai azt mutatják, hogy mely kérések fejeződnek be, mielőtt a felhasználó látná a tartalmat, és melyek futnak még utána.
Egy kattintás lecsökkenti a listát azokra az erőforrásokra, amelyek ténylegesen feltartják az első festéket, és az összesítő sávon látható a blokkolások teljes száma.
A gyorsítótárból kiszolgált erőforrások meg vannak jelölve és címkézve, ahelyett, hogy titokzatos nulla bájtos sorokként jelennének meg, így ellenőrizheti, hogy a gyorsítótár valóban működik.
Szűkítés típus szerint – dokumentum, CSS, JS, képek, betűtípusok, XHR, média – keressen URL alapján, vagy rendezze a leglassabb vagy legnagyobb szerint, hogy másodpercek alatt elérje a legrosszabb elkövetőt.
Másolja a teljes vízesést JSON-ként, beleértve a mérföldköveket, az összegeket és a kérésenkénti fázisokat, hogy jegyhez csatolja, vagy összehasonlítsa egy későbbi futtatással.
Szűrjön a megjelenítést blokkoló erőforrásokra, és tekintse meg a pontos stíluslapokat és szkripteket, amelyek a látogató és a látható tartalom között állnak.
Válogass a leglassabb szerint, és nézd meg, amint egy elemző, betűtípus vagy csevegési szolgáltató jelenik meg a tetején, hosszú várakozási fázissal, aminek semmi köze a kódodhoz.
Olvassa el a fázisszíneket: a várakozással töltött idő háttér- vagy CDN-probléma, a letöltéssel töltött idő pedig fájlméret-probléma. A javítás mindegyiknél más.
Töltse be újra, és ellenőrizze, hogy az eszközök a gyorsítótárból származnak, és az átviteli méretek jóval kisebbek a dekódolt méreteknél, ami bizonyítja, hogy a tömörítés valóban be van kapcsolva.
Exportálja az idővonalat JSON-ként, és csatolja egy jegyhez, hogy a következő személy ugyanazokat a számokat lássa, ahelyett, hogy megpróbálná reprodukálni a munkamenetet.
Kattintson a Resource Waterfall ikonra a DevSuite Pro dokkban. Minden, amit az oldal eddig betöltött, azonnal megjelenik az idővonalon.
Töltse be újra nyitott panellel, hogy a legelső kéréstől kezdve rögzítse a terhelést, beleértve magát a dokumentumot és a festési mérföldköveket.
Nyomja meg a blokkoló chipet, ha csak a megjelenítést blokkoló erőforrásokat szeretné látni, vagy válasszon típust, például js vagy img. Rendezés a leglassabb szerint, hogy a legrosszabb elkövető kerüljön a csúcsra.
Kattintson bármelyik sorra a teljes URL-cím, a protokoll, a méretek, az állapot és az ezredmásodpercenkénti fázisonkénti lebontás megtekintéséhez – és ha szüksége van rá, másolja ki az URL-t.
Az Export JSON lemásolja a teljes idővonalat mérföldkövekkel és összesítéssel, így készen áll arra, hogy beillessze egy jegybe, vagy megőrizze előtte-utána rekordként.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 71+ fejlesztői eszközt böngészőjéhez.
