Resource Waterfall tekent elk verzoek dat de pagina heeft gedaan op een tijdlijn, waarbij elke balk is opgesplitst in de werkelijke fasen (in de wachtrij, DNS, TCP, TLS, wachten en downloaden) met markeringen voor FCP, LCP, DOMContentLoaded en laden.
Wanneer een pagina traag aanvoelt, is de vraag altijd dezelfde: waar wacht hij nog op? Het eigen antwoord van de browser bevindt zich in het netwerkpaneel, wat inhoudt dat u DevTools opent, een lade over de pagina plaatst die u inspecteert en opnieuw laadt om het begin van het laden op te vangen.
Resource Waterfall plaatst die tijdlijn in een zwevend paneel naast de pagina. Elk verzoek verschijnt als een balk, gepositioneerd op het moment waarop het begon en gesegmenteerd op basis van waar de tijd daadwerkelijk naartoe ging: in de wachtrij of vastgelopen, DNS-zoekopdracht, TCP-verbinding, TLS-handshake, wachten op de server en vervolgens downloaden. Een lang blauw segment is een trage server; een lange groene is een dik bestand; een lange grijze betekent dat het verzoek op zijn beurt wachtte. Het onderscheid bepaalt wat u moet oplossen.
Gestippelde markeringen op de tijdlijn tonen First Contentful Paint, Largest Contentful Paint, DOMContentLoaded en load, zodat u kunt zien welke verzoeken zijn voltooid voordat de gebruiker iets ziet en welke daarna nog actief zijn. Render-blokkerende bronnen en cachehits worden in elke rij gemarkeerd, en een enkel Blocking-filter beperkt de lijst tot wat feitelijk de eerste verf vertraagt.
Filter op type, zoek op URL of sorteer op langzaamste of grootste om snel de ergste overtreder te vinden. Klik op een rij voor de volledige URL, protocol, overdrachts- en gedecodeerde grootte, status en volledige fase-uitsplitsing. Verzoeken die binnenkomen terwijl het paneel open is, komen rechtstreeks binnen en Export JSON kopieert de hele tijdlijn, inclusief mijlpalen, zodat een prestatiebevinding zonder screenshot aan iemand anders kan worden overhandigd.
Elke balk is opgesplitst in wachtrij, DNS, TCP, TLS, wachten en downloaden, zodat een trage server, een dik bestand en een verzoek in de wachtrij onmiddellijk te onderscheiden zijn.
Gestippelde lijnen voor FCP, LCP, DOMContentLoaded en load laten zien welke verzoeken zijn voltooid voordat de gebruiker inhoud ziet en welke er daarna nog steeds worden uitgevoerd.
Met één klik wordt de lijst teruggebracht tot de bronnen die daadwerkelijk de eerste verf bevatten, met het totale aantal blokkeringen in de overzichtsbalk.
Bronnen die vanuit de cache worden aangeboden, worden gemarkeerd en gelabeld in plaats van te verschijnen als mysterieuze rijen van nul bytes, zodat u kunt verifiëren dat uw caching echt werkt.
Verfijn op type – document, CSS, JS, afbeeldingen, lettertypen, XHR, media – zoek op URL of sorteer op langzaamste of grootste om binnen enkele seconden de ergste overtreder te bereiken.
Kopieer de hele waterval als JSON, inclusief mijlpalen, totalen en fases per aanvraag, om aan een ticket toe te voegen of te vergelijken met een latere uitvoering.
Filter op bronnen die weergave blokkeren en bekijk de exacte stylesheets en scripts die tussen uw bezoeker en zichtbare inhoud staan.
Sorteer op de langzaamste en zie hoe een analyse-, lettertype- of chatprovider bovenaan verschijnt met een lange wachtfase die niets met uw code te maken heeft.
Lees de fasekleuren: de tijd die wordt besteed aan wachten is een backend- of CDN-probleem, de tijd die wordt besteed aan downloaden is een probleem met de bestandsgrootte. De oplossing is voor iedereen verschillend.
Herlaad en bevestig dat de assets uit de cache komen en dat de overdrachtsgroottes veel kleiner zijn dan de gedecodeerde formaten, wat bewijst dat de compressie daadwerkelijk is ingeschakeld.
Exporteer de tijdlijn als JSON en voeg deze toe aan een ticket, zodat de volgende persoon dezelfde cijfers ziet in plaats van te proberen uw sessie te reproduceren.
Klik op het Resource Waterfall-pictogram in het DevSuite Pro-dock. Alles wat de pagina tot nu toe heeft geladen, verschijnt onmiddellijk op de tijdlijn.
Herlaad met het paneel open om de lading vanaf het allereerste verzoek vast te leggen, inclusief het document zelf en de verfmijlpalen.
Druk op de blokkerende chip om alleen bronnen te zien die het renderen blokkeren, of kies een type zoals js of img. Sorteer op de langzaamste om de ergste overtreder bovenaan te zetten.
Klik op een rij voor de volledige URL, het protocol, de grootte, de status en een fase-voor-fase-uitsplitsing in milliseconden – en kopieer de URL als je die nodig hebt.
Export JSON kopieert de volledige tijdlijn met mijlpalen en totalen, klaar om in een ticket te plakken of als voor-en-na-record te bewaren.
Installeer DevSuite Pro gratis en ontgrendel 71+ ontwikkelaarstools voor uw browser.
