Kinukuha ng Resource Waterfall ang bawat kahilingan na ginawa ng page sa isang timeline, ang bawat bar ay nahahati sa mga tunay nitong yugto — nakapila, DNS, TCP, TLS, naghihintay at nag-download — na may mga marker para sa FCP, LCP, DOMContentLoaded at load.
Kapag ang isang pahina ay parang mabagal, ang tanong ay palaging pareho: ano pa ang hinihintay nito? Ang sariling sagot ng browser ay nasa panel ng Network, na nangangahulugan ng pagbubukas ng DevTools, pag-dock ng drawer sa pahinang iyong sinusuri, at pag-reload upang mahuli ang pagsisimula ng pag-load.
Inilalagay ng Resource Waterfall ang timeline na iyon sa isang lumulutang na panel sa tabi ng pahina. Ang bawat kahilingan ay lilitaw bilang isang bar na nakaposisyon kung kailan ito nagsimula at naka-segment sa kung saan aktwal na napunta ang oras nito: nakapila o natigil, DNS lookup, TCP connect, TLS handshake, naghihintay sa server, pagkatapos ay nagda-download. Ang mahabang asul na segment ay isang mabagal na server; ang isang mahabang berde ay isang matabang file; ang isang mahabang kulay abo ay nangangahulugan na ang kahilingan ay naghihintay sa kanyang turn. Ang pagkakaiba ay nagpapasya kung ano ang dapat mong ayusin.
Ang mga gitling na marker sa buong timeline ay nagpapakita ng First Contentful Paint, Largest Contentful Paint, DOMContentLoaded at naglo-load, para makita mo kung aling mga kahilingan ang matatapos bago makita ng user ang anuman at kung alin ang pupunta pa rin pagkatapos. Ang mga mapagkukunan ng pag-block sa pag-render at mga hit sa cache ay na-flag sa bawat row, at ang isang filter ng Pag-block ay pinuputol ang listahan hanggang sa kung ano talaga ang nakakaantala sa unang pintura.
I-filter ayon sa uri, paghahanap ayon sa URL, o pag-uri-uriin ayon sa pinakamabagal o pinakamalaki upang mabilis na mahanap ang pinakamasamang nagkasala. I-click ang anumang row para sa buong URL, protocol, paglilipat at mga na-decode na laki, katayuan at kumpletong bahagi ng breakdown nito. Dumating ang mga kahilingan habang nakabukas ang panel, at kinokopya ng Export JSON ang buong timeline, kasama ang mga milestone, para maibigay ang paghahanap ng performance sa ibang tao nang walang screenshot.
Ang bawat bar ay nahahati sa naka-queued, DNS, TCP, TLS, naghihintay at nag-download, kaya ang isang mabagal na server, isang matabang file at isang queued na kahilingan ay agad na nakikilala.
Ang mga putol-putol na linya para sa FCP, LCP, DOMContentLoaded at pag-load ay nagpapakita kung aling mga kahilingan ang kumpleto bago makita ng user ang nilalaman at kung saan ay tumatakbo pa rin pagkatapos nito.
Ang isang pag-click ay binabawasan ang listahan sa mga mapagkukunang aktwal na nagtataglay ng unang pintura, na may kabuuang bilang ng pag-block sa summary bar.
Ang mga mapagkukunang inihatid mula sa cache ay minarkahan at nilagyan ng label sa halip na lumabas bilang mahiwagang zero-byte na mga hilera, upang ma-verify mo na talagang gumagana ang iyong pag-cache.
Makitid ayon sa uri — dokumento, CSS, JS, mga larawan, font, XHR, media — maghanap ayon sa URL, o pag-uri-uriin ayon sa pinakamabagal o pinakamalaki upang maabot ang pinakamasamang nagkasala sa ilang segundo.
Kopyahin ang buong talon bilang JSON, kasama ang mga milestone, kabuuan at mga yugto ng bawat kahilingan, para i-attach sa isang tiket o ikumpara sa susunod na pagtakbo.
I-filter sa mga mapagkukunang nagba-block sa pag-render at tingnan ang eksaktong mga stylesheet at script na nakatayo sa pagitan ng iyong bisita at nakikitang nilalaman.
Pagbukud-bukurin ayon sa pinakamabagal at panoorin ang isang analytics, font o chat provider na lalabas sa itaas na may mahabang yugto ng paghihintay na walang kinalaman sa iyong code.
Basahin ang mga kulay ng phase: ang oras na ginugol sa paghihintay ay isang backend o problema sa CDN, ang oras na ginugol sa pag-download ay isang problema sa laki ng file. Ang pag-aayos ay iba para sa bawat isa.
I-reload at kumpirmahin na ang mga asset ay nagmula sa cache at ang mga laki ng paglilipat ay mas maliit kaysa sa mga na-decode na laki, na nagpapatunay na naka-on talaga ang compression.
I-export ang timeline bilang JSON at ilakip ito sa isang ticket para makita ng susunod na tao ang parehong mga numero sa halip na subukang kopyahin ang iyong session.
I-click ang icon na Resource Waterfall sa DevSuite Pro dock. Lahat ng na-load ng page sa ngayon ay lilitaw kaagad sa timeline.
I-reload nang nakabukas ang panel para makuha ang load mula sa pinakaunang kahilingan, kasama ang mismong dokumento at ang mga milestone ng pintura.
Pindutin ang blocking chip upang makita lamang ang mga mapagkukunan ng pag-render-block, o pumili ng uri gaya ng js o img. Pagbukud-bukurin ayon sa pinakamabagal upang ilagay ang pinakamasamang nagkasala sa itaas.
I-click ang anumang row para sa buong URL, protocol, laki, status, at phase-by-phase breakdown nito sa mga millisecond — at kopyahin ang URL kung kailangan mo ito.
Kinokopya ng Export JSON ang buong timeline na may mga milestone at kabuuan, na handang i-paste sa isang ticket o panatilihin bilang isang bago at pagkatapos na tala.
I-install ang DevSuite Pro nang libre at i-unlock ang 71+ developer tools para sa iyong browser.
