Resource Waterfall zakresľuje každú požiadavku, ktorú stránka odoslala, na časovú os, pričom každý pruh je rozdelený na skutočné fázy – zaradené do frontu, DNS, TCP, TLS, čakanie a sťahovanie – so značkami pre FCP, LCP, DOMContentLoaded a načítanie.
Keď sa stránka zdá pomalá, otázka je vždy rovnaká: na čo čaká? Vlastná odpoveď prehliadača sa nachádza na paneli Sieť, čo znamená otvorenie DevTools, ukotvenie zásuvky nad kontrolovanou stránkou a opätovné načítanie, aby sa zachytil začiatok načítania.
Resource Waterfall umiestni túto časovú os na plávajúci panel vedľa stránky. Každá požiadavka sa zobrazí ako lišta umiestnená podľa toho, kedy začala, a segmentovaná podľa toho, kde skutočne šiel jej čas: vo fronte alebo pozastavená, vyhľadávanie DNS, pripojenie TCP, handshake TLS, čakanie na server a potom sťahovanie. Dlhý modrý segment je pomalý server; dlhý zelený je tučný pilník; dlhá šedá znamená, že žiadosť zostala a čaká, kým na ňu príde rad. Rozdiel rozhoduje o tom, čo by ste mali opraviť.
Prerušované značky na časovej osi zobrazujú prvé vyfarbenie obsahu, najväčšie vyfarbenie obsahu, DOMContentLoaded a načítanie, takže môžete vidieť, ktoré požiadavky sa skončia skôr, ako používateľ niečo uvidí, a ktoré ešte pokračujú. Zdroje blokujúce vykresľovanie a prístupy do vyrovnávacej pamäte sú označené v každom riadku a jediný filter blokovania zredukuje zoznam na to, čo v skutočnosti oneskoruje prvé vykreslenie.
Filtrujte podľa typu, hľadajte podľa adresy URL alebo zoraďte podľa najpomalšieho alebo najväčšieho, aby ste rýchlo našli najhoršieho páchateľa. Kliknutím na ľubovoľný riadok zobrazíte jeho úplnú adresu URL, protokol, prenosové a dekódované veľkosti, stav a úplné rozdelenie fáz. Požiadavky, ktoré prídu, keď je panel otvorený, sa streamujú priamo dovnútra a Export JSON skopíruje celú časovú os vrátane míľnikov, takže zistenie o výkonnosti môže byť odovzdané niekomu inému bez snímky obrazovky.
Každý pruh je rozdelený na vo fronte, DNS, TCP, TLS, čakanie a sťahovanie, takže pomalý server, tučný súbor a požiadavka vo fronte sú okamžite rozlíšiteľné.
Prerušované čiary pre FCP, LCP, DOMContentLoaded a načítanie ukazujú, ktoré požiadavky sú dokončené predtým, ako používateľ uvidí obsah, a ktoré sú stále spustené po ňom.
Jedno kliknutie zredukuje zoznam na zdroje, ktoré skutočne držia prvú farbu, s celkovým počtom blokovaní v súhrnnom riadku.
Zdroje poskytované z vyrovnávacej pamäte sú označené a označené namiesto toho, aby sa zobrazovali ako záhadné nulabajtové riadky, takže si môžete overiť, že vaše ukladanie do vyrovnávacej pamäte naozaj funguje.
Zúžiť podľa typu – dokument, CSS, JS, obrázky, písma, XHR, médiá – vyhľadávanie podľa adresy URL alebo triedenie podľa najpomalšieho alebo najväčšieho, aby ste v priebehu niekoľkých sekúnd dosiahli najhoršieho páchateľa.
Skopírujte celý vodopád ako JSON, vrátane míľnikov, súčtov a fáz na žiadosť, aby ste ich mohli pripojiť k tiketu alebo porovnať s neskorším spustením.
Filtrujte zdroje blokujúce vykresľovanie a pozrite si presné šablóny so štýlmi a skripty, ktoré stoja medzi vaším návštevníkom a viditeľným obsahom.
Zoraďte od najpomalšieho a sledujte, ako sa analytika, písmo alebo poskytovateľ chatu objaví navrchu s dlhou fázou čakania, ktorá nemá nič spoločné s vaším kódom.
Prečítajte si farby fázy: čas strávený čakaním je problémom backendu alebo CDN, čas strávený sťahovaním je problémom veľkosti súboru. Oprava je u každého iná.
Znova načítajte a potvrďte, že prostriedky pochádzajú z vyrovnávacej pamäte a že prenosové veľkosti sú oveľa menšie ako dekódované veľkosti, čo dokazuje, že kompresia je skutočne zapnutá.
Exportujte časovú os ako JSON a pripojte ju k lístku, aby ďalšia osoba videla rovnaké čísla namiesto pokusu o reprodukovanie vašej relácie.
Kliknite na ikonu Resource Waterfall v doku DevSuite Pro. Všetko, čo stránka doteraz načítala, sa okamžite zobrazí na časovej osi.
Znovu načítajte s otvoreným panelom, aby ste zachytili zaťaženie od úplne prvej požiadavky vrátane samotného dokumentu a míľnikov farby.
Stlačením blokovacieho čipu zobrazíte iba zdroje blokujúce vykreslenie, alebo vyberte typ, ako napríklad js alebo img. Zoraďte podľa najpomalšieho, aby sa navrch dostal najhorší páchateľ.
Kliknutím na ľubovoľný riadok zobrazíte jeho úplnú adresu URL, protokol, veľkosti, stav a fázový rozpis v milisekundách – a ak potrebujete, skopírujte adresu URL.
Export JSON skopíruje celú časovú os s míľnikmi a súčtami, pripravený na prilepenie do tiketu alebo uloženie ako záznam pred a po.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 71 vývojárskych nástools pre váš prehliadač.
