Resource Waterfall nariše vsako zahtevo strani na časovni premici, vsaka vrstica je razdeljena na svoje dejanske faze – čakalna vrsta, DNS, TCP, TLS, čakanje in prenos – z oznakami za FCP, LCP, DOMContentLoaded in nalaganje.
Ko se stran zdi počasna, je vprašanje vedno isto: kaj čaka? Lastni odgovor brskalnika je na plošči Omrežje, kar pomeni, da odprete DevTools, zasidrate predal nad stranjo, ki jo pregledujete, in ponovno naložite, da ujamete začetek nalaganja.
Resource Waterfall postavi to časovnico v plavajočo ploščo poleg strani. Vsaka zahteva je prikazana kot vrstica, postavljena glede na to, kdaj se je začela, in segmentirana glede na to, kam je dejansko minil: v čakalni vrsti ali zastoju, iskanje DNS, povezava TCP, rokovanje TLS, čakanje na strežnik in nato prenos. Dolg modri segment je počasen strežnik; dolga zelena je debela datoteka; dolga siva pomeni, da je zahteva čakala na vrsto. Razlika odloča, kaj morate popraviti.
Črtkani označevalci na časovni premici prikazujejo First Contentful Paint, Largest Contentful Paint, DOMContentLoaded in load, tako da lahko vidite, katere zahteve se končajo, preden uporabnik kaj vidi, in katere se še izvajajo. Viri, ki blokirajo upodabljanje, in zadetki v predpomnilniku so označeni v vsaki vrstici, en filter za blokiranje pa zmanjša seznam na tisto, kar dejansko zamuja prvo barvanje.
Filtrirajte po vrsti, iščite po URL-ju ali razvrstite po najpočasnejšem ali največjem, da hitro najdete najhujšega storilca. Kliknite katero koli vrstico za celoten URL, protokol, prenos in dekodirane velikosti, status in celotno razčlenitev faz. Zahteve, ki prispejo, medtem ko je plošča odprta, se pretakajo naravnost, Export JSON pa kopira celotno časovnico, vključno z mejniki, tako da se lahko ugotovitev uspešnosti preda nekomu drugemu brez posnetka zaslona.
Vsaka vrstica je razdeljena na čakalno vrsto, DNS, TCP, TLS, čakanje in prenos, tako da je počasen strežnik, debelo datoteko in zahtevo v čakalni vrsti takoj razločiti.
Črtkane črte za FCP, LCP, DOMContentLoaded in load prikazujejo, katere zahteve se dokončajo, preden uporabnik vidi vsebino, in katere se še izvajajo po njej.
En klik zmanjša seznam na vire, ki dejansko vsebujejo prvo barvo, s skupnim številom blokiranj v vrstici s povzetkom.
Viri, dobavljeni iz predpomnilnika, so označeni in označeni, namesto da bi bili prikazani kot skrivnostne nič-bajtne vrstice, tako da lahko preverite, ali vaše predpomnjenje res deluje.
Zožite po vrsti – dokument, CSS, JS, slike, pisave, XHR, mediji – iščite po URL-ju ali razvrstite po najpočasnejšem ali največjem, da dosežete najhujšega kršitelja v nekaj sekundah.
Kopirajte celoten slap kot JSON, vključno z mejniki, skupnimi vrednostmi in fazami na zahtevo, da ga priložite vstopnici ali primerjate s poznejšim zagonom.
Filtrirajte do virov, ki blokirajo upodabljanje, in si oglejte natančne slogovne liste in skripte, ki stojijo med vašim obiskovalcem in vidno vsebino.
Razvrstite po najpočasnejšem in si oglejte, kako se na vrhu pojavi ponudnik analitike, pisave ali klepeta z dolgo fazo čakanja, ki nima nobene zveze z vašo kodo.
Preberite fazne barve: čas, porabljen za čakanje, je težava v ozadju ali CDN, čas, porabljen za prenos, pa je težava z velikostjo datoteke. Popravek je za vsako drugačen.
Ponovno naložite in potrdite, da sredstva prihajajo iz predpomnilnika in da so velikosti prenosa veliko manjše od dekodiranih velikosti, kar dokazuje, da je stiskanje dejansko vklopljeno.
Izvozite časovnico kot JSON in jo priložite vozovnici, tako da bo naslednja oseba videla iste številke, namesto da poskuša reproducirati vašo sejo.
Kliknite ikono Resource Waterfall v doku DevSuite Pro. Vse, kar je stran naložila do zdaj, se takoj prikaže na časovnici.
Ponovno naložite z odprto ploščo, da zajamete obremenitev od prve zahteve, vključno s samim dokumentom in mejniki barve.
Pritisnite blokirni čip, da vidite samo vire, ki blokirajo upodabljanje, ali izberite vrsto, kot je js ali img. Razvrsti po najpočasnejšem, da najhujšega storilca postaviš na vrh.
Kliknite katero koli vrstico za njen celoten URL, protokol, velikosti, status in razčlenitev po fazah v milisekundah – in kopirajte URL, če ga potrebujete.
Izvoz JSON kopira celotno časovnico z mejniki in vsotami, pripravljeno za lepljenje v vozovnico ali shranjevanje kot zapis prej in potem.
Namestite DevSuite Pro brezplačno in odklenite več kot 71 orodij za razvijalce za svoj brskalnik.
