Resource Waterfall crta svaki zahtjev koji je stranica uputila na vremenskoj traci, pri čemu je svaka traka podijeljena u svoje stvarne faze — čekanje, DNS, TCP, TLS, čekanje i preuzimanje — s oznakama za FCP, LCP, DOMContentLoaded i učitavanje.
Kad se stranica čini sporom, pitanje je uvijek isto: što čeka? Vlastiti odgovor preglednika nalazi se na mrežnoj ploči, što znači otvaranje DevTools-a, postavljanje ladice na stranicu koju pregledavate i ponovno učitavanje kako biste uhvatili početak učitavanja.
Resource Waterfall stavlja tu vremensku traku na plutajuću ploču pored stranice. Svaki se zahtjev pojavljuje kao traka pozicionirana prema vremenu pokretanja i segmentiranom prema tome gdje je njegovo vrijeme zapravo prošlo: u redu ili u zastoju, DNS pretraživanje, TCP povezivanje, TLS rukovanje, čekanje poslužitelja, zatim preuzimanje. Dugi plavi segment je spor poslužitelj; duga zelena je debela turpija; dugi sivi znači da je zahtjev čekao svoj red. Razlika odlučuje što biste trebali popraviti.
Isprekidani markeri na vremenskoj traci prikazuju Prvo slikanje sadržaja, Najveće slikanje sadržaja, DOMContentLoaded i učitavanje, tako da možete vidjeti koji zahtjevi završe prije nego što korisnik vidi bilo što, a koji tek slijede. Resursi koji blokiraju prikaz i pogoci predmemorije označeni su u svakom retku, a jedan filtar za blokiranje smanjuje popis na ono što zapravo odgađa prvo slikanje.
Filtrirajte po vrsti, tražite po URL-u ili sortirajte po najsporijem ili najvećem kako biste brzo pronašli najgoreg prijestupnika. Pritisnite bilo koji redak za puni URL, protokol, prijenos i dekodirane veličine, status i potpunu analizu faza. Zahtjevi koji stignu dok je ploča otvorena izravno se prenose, a Export JSON kopira cijelu vremensku traku, uključujući prekretnice, tako da se nalaz izvedbe može predati nekom drugom bez snimke zaslona.
Svaka traka je podijeljena na čekanje, DNS, TCP, TLS, čekanje i preuzimanje, tako da se spori poslužitelj, debela datoteka i zahtjev u redu čekanja mogu odmah razlikovati.
Isprekidane linije za FCP, LCP, DOMContentLoaded i load pokazuju koji se zahtjevi dovrše prije nego što korisnik vidi sadržaj, a koji se i dalje izvode nakon njega.
Jedan klik smanjuje popis na resurse koji zapravo drže prvo bojanje, s ukupnim brojem blokiranja na traci sažetka.
Resursi koji se poslužuju iz predmemorije označeni su i označeni umjesto da se pojavljuju kao misteriozni nula-bajtni retci, tako da možete provjeriti da vaše predmemoriranje stvarno radi.
Suzite prema vrsti — dokument, CSS, JS, slike, fontovi, XHR, mediji — pretražujte prema URL-u ili sortirajte prema najsporijem ili najvećem kako biste došli do najgoreg prijestupnika u sekundi.
Kopirajte cijeli slap kao JSON, uključujući prekretnice, ukupne vrijednosti i faze po zahtjevu, da biste ih priložili uz kartu ili usporedili s kasnijim izvođenjem.
Filtrirajte prema resursima koji blokiraju prikaz i pogledajte točne stilove i skripte koje stoje između vašeg posjetitelja i vidljivog sadržaja.
Razvrstajte po najsporijem i gledajte kako se analitika, font ili pružatelj usluge chata pojavljuju na vrhu s dugom fazom čekanja koja nema nikakve veze s vašim kodom.
Pročitajte fazne boje: vrijeme provedeno u čekanju problem je pozadine ili CDN-a, vrijeme provedeno u preuzimanju problem je veličine datoteke. Popravak je drugačiji za svakog.
Ponovno učitajte i potvrdite da sredstva dolaze iz predmemorije i da su veličine prijenosa daleko manje od dekodiranih veličina, što dokazuje da je kompresija zapravo uključena.
Izvezite vremensku traku kao JSON i priložite je uz kartu kako bi sljedeća osoba vidjela iste brojeve umjesto da pokušava reproducirati vašu sesiju.
Kliknite ikonu Resource Waterfall u DevSuite Pro docku. Sve što je stranica dosad učitala odmah se pojavljuje na vremenskoj traci.
Ponovno učitajte s otvorenom pločom kako biste zabilježili opterećenje od prvog zahtjeva, uključujući sam dokument i prekretnice boje.
Pritisnite čip za blokiranje da vidite samo resurse koji blokiraju iscrtavanje ili odaberite vrstu kao što je js ili img. Poredajte po najsporijem da biste najgoreg prijestupnika stavili na vrh.
Kliknite bilo koji redak za njegov puni URL, protokol, veličine, status i raščlambu fazu po fazu u milisekundama — i kopirajte URL ako vam je potreban.
Eksport JSON kopira punu vremensku traku s ključnim točkama i ukupnim iznosima, spremnu za lijepljenje u kartu ili čuvanje kao zapis prije i poslije.
Instalirajte DevSuite Pro besplatno i otključajte 71+ razvojnih alata za svoj preglednik.
