Resource Waterfall desenează fiecare solicitare făcută de pagină pe o linie temporală, fiecare bară împărțită în fazele sale reale - în coadă, DNS, TCP, TLS, așteptare și descărcare - cu marcatori pentru FCP, LCP, DOMContentLoaded și încărcare.
Când o pagină pare lentă, întrebarea este întotdeauna aceeași: ce așteaptă? Răspunsul propriu al browserului se află în panoul de rețea, ceea ce înseamnă deschiderea DevTools, andocarea unui sertar peste pagina pe care o inspectați și reîncărcarea pentru a prinde începutul încărcării.
Resource Waterfall pune acea cronologie într-un panou plutitor lângă pagină. Fiecare solicitare apare ca o bară poziționată în funcție de momentul în care a pornit și segmentată în funcție de locul în care a trecut timpul său: în coadă sau blocat, căutare DNS, conectare TCP, strângere de mână TLS, așteptare pentru server, apoi descărcare. Un segment albastru lung este un server lent; unul lung verde este un fișier gras; un lung gri înseamnă că cererea a așteptat rândul. Distincția decide ce ar trebui să remediați.
Marcatoarele întrerupte de-a lungul cronologiei afișează First Contentful Paint, Largest Contentful Paint, DOMContentLoaded și se încarcă, astfel încât să puteți vedea ce solicitări se termină înainte ca utilizatorul să vadă ceva și care sunt încă în curs după. Resursele care blochează randarea și accesările cache sunt semnalate pe fiecare rând, iar un singur filtru de blocare reduce lista la ceea ce întârzie de fapt prima vopsire.
Filtrați după tip, căutați după URL sau sortați după cel mai lent sau cel mai mare pentru a găsi rapid cel mai rău infractor. Faceți clic pe orice rând pentru adresa URL completă, protocolul, dimensiunile de transfer și decodificate, starea și defalcarea completă a fazei. Solicitările care sosesc în timp ce panoul este deschis sunt transmise direct și Export JSON copiază întreaga cronologie, inclusiv etapele, astfel încât o constatare a performanței poate fi transmisă altcuiva fără o captură de ecran.
Fiecare bară este împărțită în coadă, DNS, TCP, TLS, așteptare și descărcare, astfel încât un server lent, un fișier gras și o solicitare în coadă se disting imediat.
Liniile întrerupte pentru FCP, LCP, DOMContentLoaded și încărcare arată ce solicitări sunt finalizate înainte ca utilizatorul să vadă conținut și care încă rulează după el.
Un clic reduce lista la resursele care dețin de fapt prima vopsea, cu numărul total de blocare în bara de rezumat.
Resursele furnizate din cache sunt marcate și etichetate în loc să apară ca rânduri misterioase de zero octeți, astfel încât să puteți verifica că stocarea în cache funcționează cu adevărat.
Restrângeți după tip - document, CSS, JS, imagini, fonturi, XHR, media - căutați după URL sau sortați după cel mai lent sau cel mai mare pentru a ajunge la cel mai grav infractor în câteva secunde.
Copiați întreaga cascadă ca JSON, inclusiv etapele de referință, totalurile și fazele pe solicitare, pentru a o atașa la un bilet sau a compara cu o rulare ulterioară.
Filtrați pentru resursele care blochează randarea și vedeți foile de stil și scripturile exacte care se află între vizitatorul dvs. și conținutul vizibil.
Sortați după cel mai lent și urmăriți cum un furnizor de analize, font sau chat apare în partea de sus cu o fază lungă de așteptare care nu are nimic de-a face cu codul dvs.
Citiți culorile fazei: timpul petrecut în așteptare este o problemă de backend sau CDN, timpul petrecut cu descărcarea este o problemă de dimensiunea fișierului. Remedierea este diferită pentru fiecare.
Reîncărcați și confirmați că activele provin din cache și că dimensiunile de transfer sunt mult mai mici decât dimensiunile decodificate, dovedind că compresia este de fapt activată.
Exportați cronologia ca JSON și atașați-o la un bilet, astfel încât următoarea persoană să vadă aceleași numere în loc să încerce să vă reproducă sesiunea.
Faceți clic pe pictograma Resource Waterfall din dock-ul DevSuite Pro. Tot ceea ce a încărcat pagina până acum apare imediat pe cronologia.
Reîncărcați cu panoul deschis pentru a capta încărcătura de la prima solicitare, inclusiv documentul în sine și reperele vopselei.
Apăsați cipul de blocare pentru a vedea numai resursele care blochează randarea sau alegeți un tip, cum ar fi js sau img. Sortați după cel mai lent pentru a pune pe primul loc cel mai rău infractor.
Faceți clic pe orice rând pentru adresa URL completă, protocolul, dimensiunile, starea și o defalcare fază cu fază în milisecunde - și copiați adresa URL dacă aveți nevoie.
Export JSON copiază cronologia completă cu etape și totaluri, gata să fie inserată într-un bilet sau păstrată ca înregistrare înainte și după.
Instalează DevSuite Pro gratuit și deblochează peste 71 de instrumente pentru dezvoltatori în browserul tău.
