Resource Waterfall zakreslí každý požadavek, který stránka podala, na časovou osu, každý pruh rozdělený do jeho skutečných fází – ve frontě, DNS, TCP, TLS, čekání a stahování – se značkami pro FCP, LCP, DOMContentLoaded a načtení.
Když se stránka zdá pomalá, otázka je vždy stejná: na co čeká? Vlastní odpověď prohlížeče je uložena na panelu Síť, což znamená otevření DevTools, ukotvení šuplíku nad stránkou, kterou kontrolujete, a opětovné načtení, abyste zachytili začátek načítání.
Resource Waterfall umístí tuto časovou osu na plovoucí panel vedle stránky. Každý požadavek se zobrazí jako pruh umístěný podle toho, kdy začal, a segmentovaný podle toho, kde jeho čas skutečně šel: ve frontě nebo zastaven, vyhledávání DNS, připojení TCP, handshake TLS, čekání na server a poté stahování. Dlouhý modrý segment je pomalý server; dlouhý zelený je tlustý pilník; dlouhá šedá znamená, že žádost seděla a čekala, až na ni přijde řada. Rozdíl rozhoduje o tom, co byste měli opravit.
Čárkované značky přes časovou osu zobrazují První obsahové vykreslení, Největší obsahové vykreslení, DOMContentLoaded a načtení, takže můžete vidět, které požadavky skončí dříve, než uživatel něco uvidí, a které ještě pokračují. Zdroje blokující vykreslování a přístupy do mezipaměti jsou označeny příznakem na každém řádku a jediný filtr Blokování omezí seznam na to, co ve skutečnosti zdržuje první malování.
Filtrujte podle typu, hledejte podle adresy URL nebo seřaďte podle nejpomalejšího nebo největšího, abyste rychle našli nejhoršího pachatele. Kliknutím na libovolný řádek zobrazíte jeho úplnou adresu URL, protokol, přenosové a dekódované velikosti, stav a kompletní rozdělení fází. Požadavky, které dorazí, když je panel otevřený, se streamují přímo dovnitř a Export JSON zkopíruje celou časovou osu včetně milníků, takže zjištění výkonu lze předat někomu jinému bez snímku obrazovky.
Každý pruh je rozdělen do fronty, DNS, TCP, TLS, čekání a stahování, takže pomalý server, tlustý soubor a požadavek ve frontě jsou okamžitě rozlišitelné.
Přerušované čáry pro FCP, LCP, DOMContentLoaded a načtení ukazují, které požadavky jsou dokončeny předtím, než uživatel uvidí obsah, a které po něm stále běží.
Jedním kliknutím se seznam zmenší na zdroje, které ve skutečnosti drží první nátěr, s celkovým počtem blokování v souhrnném pruhu.
Zdroje poskytované z mezipaměti jsou označeny a označeny, místo aby se objevovaly jako záhadné řádky s nulou bajtů, takže si můžete ověřit, že vaše ukládání do mezipaměti opravdu funguje.
Zúžit podle typu – dokument, CSS, JS, obrázky, písma, XHR, média – vyhledávejte podle adresy URL nebo seřaďte podle nejpomalejšího nebo největšího, abyste během několika sekund dosáhli nejhoršího pachatele.
Zkopírujte celý vodopád jako JSON, včetně milníků, součtů a fází jednotlivých požadavků, abyste jej mohli připojit k tiketu nebo porovnat s pozdějším spuštěním.
Filtrujte zdroje blokující vykreslování a prohlédněte si přesné šablony stylů a skripty, které stojí mezi vaším návštěvníkem a viditelným obsahem.
Seřaďte podle nejpomalejšího a sledujte, jak se poskytovatel analytiky, písma nebo chatu objeví nahoře s dlouhou čekací fází, která nemá nic společného s vaším kódem.
Přečtěte si barvy fáze: čas strávený čekáním je problém backendu nebo CDN, čas strávený stahováním je problém velikosti souboru. Oprava je u každého jiná.
Znovu načtěte a potvrďte, že prostředky pocházejí z mezipaměti a že přenosové velikosti jsou mnohem menší než dekódované velikosti, což dokazuje, že komprese je skutečně zapnutá.
Exportujte časovou osu jako JSON a připojte ji k lístku, aby další osoba viděla stejná čísla, místo aby se pokoušela reprodukovat vaši relaci.
Klikněte na ikonu Resource Waterfall v doku DevSuite Pro. Vše, co stránka dosud načetla, se okamžitě objeví na časové ose.
Znovu načtěte s otevřeným panelem, abyste zachytili zatížení od úplně prvního požadavku, včetně samotného dokumentu a milníků malování.
Stisknutím blokovacího čipu zobrazíte pouze zdroje blokující vykreslení, nebo vyberte typ, jako je js nebo img. Seřaďte podle nejpomalejšího, abyste umístili nejhoršího pachatele navrch.
Kliknutím na libovolný řádek zobrazíte jeho úplnou adresu URL, protokol, velikosti, stav a rozdělení fází po fázích v milisekundách – a zkopírujte adresu URL, pokud ji potřebujete.
Export JSON zkopíruje celou časovou osu s milníky a součty, připravenou k vložení do tiketu nebo k uložení jako záznam před a po.
Nainstalujte si DevSuite Pro zdarma a odemkněte 71+ vývojářských nástrojů pro svůj prohlížeč.
