Resource Waterfall joonistab iga lehe päringu ajaskaalal, iga riba jagatuna tegelikeks faasideks – järjekord, DNS, TCP, TLS, ootamine ja allalaadimine – FCP, LCP, DOMContentLoaded ja laadimise markeritega.
Kui leht tundub aeglane, on küsimus alati sama: mida see ootab? Brauseri enda vastus asub paneelil Võrk, mis tähendab DevToolsi avamist, sahtli dokkimist kontrollitava lehe kohale ja laadimise algusesse jõudmiseks uuesti laadimist.
Resource Waterfall paneb selle ajaskaala lehe kõrvale ujuvale paneelile. Iga päring kuvatakse ribana, mis on positsioneeritud selle alguse järgi ja segmenteeritud selle järgi, kus selle aeg tegelikult läks: järjekorras või seiskunud, DNS-i otsimine, TCP-ühendus, TLS-i käepigistus, serveri ootamine, seejärel allalaadimine. Pikk sinine segment on aeglane server; pikk roheline on rasvaviil; pikk hall tähendab, et taotlus istus oma korda ootamas. Eristamine otsustab, mida peaksite parandama.
Katkendlikud markerid ajaskaalal näitavad First Contentful Paint, Largest Contentful Paint, DOMContentLoaded ja laadivad, nii et näete, millised päringud lõppevad enne, kui kasutaja midagi näeb ja millised veel pärast seda toimivad. Renderdust blokeerivad ressursid ja vahemälu tabamused märgitakse igal real lipuga ning üks blokeerimisfilter lõikab loendi alla selle, mis tegelikult esimest värvimist viivitab.
Filtreerige tüübi järgi, otsige URL-i järgi või sortige aeglasema või suurima järgi, et leida kiiresti halvim rikkuja. Klõpsake mis tahes real selle täieliku URL-i, protokolli, ülekande ja dekodeeritud suuruste, oleku ja täieliku faasijaotuse nägemiseks. Taotlused, mis saabuvad siis, kui paneel on avatud, voogavad otse sisse ja Export JSON kopeerib kogu ajaskaala, sealhulgas verstapostid, nii et toimivusleiu saab ilma ekraanipildita kellelegi teisele üle anda.
Iga riba on jagatud järjekordadeks, DNS-iks, TCP-ks, TLS-iks, ootamiseks ja allalaadimiseks, nii et aeglane server, paks fail ja järjekorras olevad päringud on kohe eristatavad.
Katkendjooned FCP, LCP, DOMContentLoaded ja load näitavad, millised päringud lõpetatakse enne, kui kasutaja sisu näeb ja millised pärast seda veel töötavad.
Üks klõps vähendab loendit ressurssideni, mis tegelikult hoiavad esimest värvi, koos blokeeringute koguarvuga kokkuvõtteribal.
Vahemälust pakutavad ressursid on märgistatud ja sildistatud, selle asemel et kuvada salapäraste nullbaidiste ridadena, et saaksite kontrollida, kas vahemälu tõesti töötab.
Kitsendage tüübi järgi – dokument, CSS, JS, pildid, fondid, XHR, meedia – otsige URL-i järgi või sortige aeglasema või suurima järgi, et jõuda sekunditega halvima rikkujani.
Kopeerige kogu juga JSON-vormingus, sealhulgas verstapostid, kogusummad ja taotluse faasid, et lisada piletile või võrrelda seda hilisema jooksuga.
Filtreerige renderdust blokeerivaid ressursse ja vaadake täpseid stiililehti ja skripte, mis asuvad teie külastaja ja nähtava sisu vahel.
Sorteerige kõige aeglasema järgi ja vaadake, kuidas ülaosas kuvatakse analüüsi, fondi või vestluse pakkuja pika ootefaasiga, millel pole teie koodiga midagi pistmist.
Read the phase colours: time spent waiting is a backend or CDN problem, time spent downloading is a file-size problem. Parandus on iga jaoks erinev.
Laadige uuesti ja kinnitage, et varad pärinevad vahemälust ja et edastusmahud on palju väiksemad kui dekodeeritud suurused, mis tõestab, et tihendamine on tegelikult sisse lülitatud.
Eksportige ajaskaala JSON-vormingus ja lisage see piletile, et järgmine inimene näeks samu numbreid, selle asemel et proovida teie seanssi reprodutseerida.
Klõpsake DevSuite Pro dokis ikooni Resource Waterfall. Kõik, mida leht on seni laadinud, ilmub ajajoonele kohe.
Laadige uuesti avatud paneeliga, et jäädvustada koormus alates esimesest taotlusest, sealhulgas dokument ise ja värvimise verstapostid.
Vajutage blokeerimiskiipi, et näha ainult renderdamist blokeerivaid ressursse, või valige tüüp, näiteks js või img. Sorteerige kõige aeglasema järgi, et asetada halvim kurjategija ette.
Klõpsake mis tahes real, et näha selle täielikku URL-i, protokolli, suurusi, olekut ja faaside kaupa jaotust millisekundites – ja kopeerige URL, kui seda vajate.
Ekspordi JSON kopeerib kogu ajaskaala koos verstapostide ja kogusummadega ning on valmis piletile kleepimiseks või enne ja pärast kirjena säilitamiseks.
Paigaldage DevSuite Pro tasuta ja avage 71+ arendustööriista oma brauserile.
