Resource Waterfall tegner hver forespørgsel siden har lavet på en tidslinje, hver bjælke er opdelt i dens reelle faser - i kø, DNS, TCP, TLS, venter og download - med markører for FCP, LCP, DOMContentLoaded og load.
Når en side føles langsom, er spørgsmålet altid det samme: hvad venter den på? Browserens eget svar findes i netværkspanelet, hvilket betyder at åbne DevTools, lægge en skuffe over den side, du inspicerer, og genindlæse for at fange starten på belastningen.
Resource Waterfall placerer denne tidslinje i et flydende panel ved siden af siden. Hver anmodning vises som en bjælke, der er placeret efter, hvornår den startede og segmenteret efter, hvor dens tid faktisk gik: i kø eller gået i stå, DNS-opslag, TCP-forbindelse, TLS-håndtryk, venter på serveren og downloader derefter. Et langt blåt segment er en langsom server; en lang grøn er en fed fil; en lang grå betyder, at anmodningen sad og ventede på sin tur. Sondringen afgør, hvad du skal rette.
Stiplede markører på tværs af tidslinjen viser First Contentful Paint, Largest Contentful Paint, DOMContentLoaded og indlæs, så du kan se, hvilke anmodninger der afsluttes, før brugeren ser noget, og hvilke der stadig er i gang efterfølgende. Gengivelsesblokerende ressourcer og cache-hits markeres på hver række, og et enkelt blokeringsfilter skærer listen ned til det, der faktisk forsinker første maling.
Filtrer efter type, søg efter URL, eller sorter efter langsomste eller største for hurtigt at finde den værste gerningsmand. Klik på en række for dens fulde URL, protokol, overførsel og afkodede størrelser, status og komplet faseopdeling. Forespørgsler, der ankommer, mens panelet er åbent, strømmer direkte ind, og Export JSON kopierer hele tidslinjen, inklusive milepæle, så en præstationskonstatering kan afleveres til en anden uden et skærmbillede.
Hver bjælke er opdelt i kø, DNS, TCP, TLS, venter og download, så en langsom server, en fed fil og en anmodning i kø kan umiddelbart skelnes.
Stiplede linjer for FCP, LCP, DOMContentLoaded og load viser, hvilke anmodninger der er fuldført, før brugeren ser indhold, og hvilke der stadig kører efter det.
Et enkelt klik reducerer listen til de ressourcer, der faktisk holder den første maling op, med det samlede antal blokeringer i oversigtslinjen.
Ressourcer, der serveres fra cache, er markeret og mærket i stedet for at fremstå som mystiske nul-byte rækker, så du kan bekræfte, at din cache fungerer.
Indsnævre efter type - dokument, CSS, JS, billeder, skrifttyper, XHR, medier - søg efter URL, eller sorter efter langsomste eller største for at nå den værste gerningsmand på få sekunder.
Kopier hele vandfaldet som JSON, inklusive milepæle, totaler og faser pr. anmodning, for at vedhæfte til en billet eller sammenligne med en senere kørsel.
Filtrer til gengivelsesblokerende ressourcer og se de nøjagtige stylesheets og scripts, der står mellem din besøgende og synligt indhold.
Sorter efter langsomst og se en analyse-, skrifttype- eller chatudbyder dukke op øverst med en lang ventefase, der ikke har noget med din kode at gøre.
Læs fasefarverne: Tid brugt på at vente er et backend- eller CDN-problem, tid brugt på at downloade er et filstørrelsesproblem. Rettelsen er forskellig for hver.
Genindlæs og bekræft, at aktiver kommer fra cache, og at overførselsstørrelser er langt mindre end afkodede størrelser, hvilket beviser, at komprimering faktisk er aktiveret.
Eksporter tidslinjen som JSON og vedhæft den til en billet, så den næste person ser de samme tal i stedet for at forsøge at gengive din session.
Klik på Resource Waterfall-ikonet i DevSuite Pro-dockingstationen. Alt, hvad siden har indlæst indtil videre, vises på tidslinjen med det samme.
Genindlæs med panelet åbent for at fange belastningen fra den allerførste anmodning, inklusive selve dokumentet og malingens milepæle.
Tryk på blokeringschippen for kun at se gengivelsesblokerende ressourcer, eller vælg en type såsom js eller img. Sorter efter langsomst for at lægge den værste gerningsmand øverst.
Klik på en række for dens fulde URL, protokol, størrelser, status og en fase-for-fase opdeling i millisekunder - og kopier URL'en, hvis du har brug for det.
Eksport JSON kopierer den fulde tidslinje med milepæle og totaler, klar til at indsætte i en billet eller opbevare som en før-og-efter-registrering.
Installer DevSuite Pro gratis og lås op for 71+ udviklerværktøjer til din browser.
