Resource Waterfall tegner hver forespørsel siden laget på en tidslinje, hver bar delt inn i sine virkelige faser - kø, DNS, TCP, TLS, venter og nedlasting - med markører for FCP, LCP, DOMContentLoaded og last.
Når en side føles treg, er spørsmålet alltid det samme: hva venter den på? Nettleserens eget svar ligger i nettverkspanelet, som betyr at du åpner DevTools, dokker en skuff over siden du inspiserer og laster inn på nytt for å fange starten på belastningen.
Resource Waterfall legger den tidslinjen i et flytende panel ved siden av siden. Hver forespørsel vises som en linje plassert etter når den startet og segmentert etter hvor tiden faktisk gikk: i kø eller stoppet, DNS-oppslag, TCP-tilkobling, TLS-håndtrykk, venting på serveren, og nedlasting. Et langt blått segment er en treg server; en lang grønn er en fettfil; en lang grå betyr at forespørselen satt og ventet på sin tur. Skillet avgjør hva du skal fikse.
Stiplede markører på tvers av tidslinjen viser First Contentful Paint, Largest Contentful Paint, DOMContentLoaded og last, slik at du kan se hvilke forespørsler som avsluttes før brukeren ser noe, og hvilke som fortsatt er i gang etterpå. Gjengivelsesblokkerende ressurser og hurtigbuffertreff flagges på hver rad, og et enkelt blokkeringsfilter kutter listen ned til det som faktisk forsinker første maling.
Filtrer etter type, søk etter URL, eller sorter etter tregeste eller største for å finne den verste lovbryteren raskt. Klikk på hvilken som helst rad for dens fullstendige URL, protokoll, overførings- og dekodede størrelser, status og fullstendig faseoversikt. Forespørsler som kommer mens panelet er åpent strømmer rett inn, og Export JSON kopierer hele tidslinjen, inkludert milepæler, slik at et ytelsesfunn kan overleveres til noen andre uten skjermbilde.
Hver bar er delt inn i kø, DNS, TCP, TLS, venter og nedlasting, så en treg server, en fettfil og en forespørsel i kø kan umiddelbart skilles.
Stiplede linjer for FCP, LCP, DOMContentLoaded og last viser hvilke forespørsler som fullføres før brukeren ser innhold og hvilke som fortsatt kjører etter det.
Ett klikk reduserer listen til ressursene som faktisk holder opp første maling, med totalt antall blokkeringer i sammendragslinjen.
Ressurser som serveres fra hurtigbufferen er merket og merket i stedet for å vises som mystiske nullbyte-rader, slik at du kan bekrefte at bufringen din virkelig fungerer.
Begrens etter type – dokument, CSS, JS, bilder, fonter, XHR, media – søk etter URL, eller sorter etter tregeste eller største for å nå den verste lovbryteren på sekunder.
Kopier hele fossen som JSON, inkludert milepæler, totaler og faser per forespørsel, for å feste til en billett eller sammenligne med en senere kjøring.
Filtrer til gjengivelsesblokkerende ressurser og se de nøyaktige stilarkene og skriptene som står mellom besøkende og synlig innhold.
Sorter etter tregeste og se en analyse-, font- eller chat-leverandør vises øverst med en lang ventefase som ikke har noe med koden din å gjøre.
Les fasefargene: tid brukt på å vente er et backend- eller CDN-problem, tid brukt på nedlasting er et problem med filstørrelse. Løsningen er forskjellig for hver.
Last inn på nytt og bekreft at eiendeler kommer fra hurtigbuffer og at overføringsstørrelser er langt mindre enn dekodede størrelser, noe som beviser at komprimering faktisk er på.
Eksporter tidslinjen som JSON og fest den til en billett slik at neste person ser de samme tallene i stedet for å prøve å reprodusere økten din.
Klikk på Resource Waterfall-ikonet i DevSuite Pro-dokken. Alt siden har lastet så langt vises på tidslinjen umiddelbart.
Last på nytt med panelet åpent for å fange opp lasten fra den aller første forespørselen, inkludert selve dokumentet og malingsmilepælene.
Trykk på blokkeringsbrikken for å se bare gjengivelsesblokkerende ressurser, eller velg en type som js eller img. Sorter etter tregeste for å sette den verste lovbryteren øverst.
Klikk på en hvilken som helst rad for dens fullstendige URL, protokoll, størrelser, status og en fase-for-fase-oppdeling i millisekunder - og kopier URL-en hvis du trenger det.
Eksporter JSON kopierer hele tidslinjen med milepæler og totaler, klare til å lime inn i en billett eller oppbevares som en før-og-etter-post.
Installer DevSuite Pro gratis og lås opp 71+ utviklerverktøy for nettleseren din.
