Resource Waterfall ritar varje begäran som sidan gjorde på en tidslinje, varje stapel indelad i sina verkliga faser - kö, DNS, TCP, TLS, väntande och nedladdning - med markörer för FCP, LCP, DOMContentLoaded och load.
När en sida känns långsam är frågan alltid densamma: vad väntar den på? Webbläsarens eget svar finns i nätverkspanelen, vilket innebär att öppna DevTools, docka en låda över sidan du inspekterar och ladda om för att fånga början av laddningen.
Resource Waterfall placerar den tidslinjen i en flytande panel bredvid sidan. Varje begäran visas som en stapel placerad efter när den startade och segmenterad efter var tiden faktiskt gick: köad eller avstannad, DNS-sökning, TCP-anslutning, TLS-handskakning, väntan på servern och sedan nedladdning. Ett långt blått segment är en långsam server; en lång grön är en fettfil; en lång grå betyder att förfrågan satt och väntade på sin tur. Distinktionen avgör vad du ska fixa.
Streckade markörer över tidslinjen visar First Contentful Paint, Largest Contentful Paint, DOMContentLoaded och ladda, så att du kan se vilka förfrågningar som slutar innan användaren ser något och vilka som fortfarande pågår efteråt. Renderblockerande resurser och cacheträffar flaggas på varje rad, och ett enda blockeringsfilter skär ner listan till vad som faktiskt fördröjer den första färgen.
Filtrera efter typ, sök efter URL eller sortera efter långsammast eller störst för att snabbt hitta den värsta gärningsmannen. Klicka på valfri rad för dess fullständiga URL, protokoll, överförings- och avkodade storlekar, status och fullständig fasuppdelning. Förfrågningar som anländer medan panelen är öppen strömmar rakt in, och Export JSON kopierar hela tidslinjen, milstolpar inkluderade, så att ett resultat kan lämnas till någon annan utan en skärmdump.
Varje stapel är uppdelad i kö, DNS, TCP, TLS, väntande och nedladdning, så en långsam server, en fet fil och en köad begäran är omedelbart urskiljbara.
Streckade linjer för FCP, LCP, DOMContentLoaded och load visar vilka förfrågningar som slutförs innan användaren ser innehåll och vilka som fortfarande körs efter det.
Ett klick reducerar listan till de resurser som faktiskt håller upp första färgen, med totalt antal blockeringar i sammanfattningsfältet.
Resurser som serveras från cache är markerade och märkta istället för att visas som mystiska nollbyte-rader, så att du kan verifiera att din cachning verkligen fungerar.
Begränsa efter typ – dokument, CSS, JS, bilder, typsnitt, XHR, media – sök efter URL, eller sortera efter långsammast eller störst för att nå den värsta gärningsmannen på några sekunder.
Kopiera hela vattenfallet som JSON, inklusive milstolpar, summor och faser per begäran, för att bifoga till en biljett eller jämföra mot en senare körning.
Filtrera efter renderingsblockerande resurser och se exakta stilmallar och skript som står mellan din besökare och synligt innehåll.
Sortera efter långsammast och se en analys-, teckensnitts- eller chattleverantör visas högst upp med en lång väntefas som inte har något med din kod att göra.
Läs fasfärgerna: tid att vänta är ett backend- eller CDN-problem, tid som spenderas på nedladdning är ett filstorleksproblem. Korrigeringen är olika för varje.
Ladda om och bekräfta att tillgångar kommer från cachen och att överföringsstorlekarna är mycket mindre än avkodade storlekar, vilket bevisar att komprimering faktiskt är på.
Exportera tidslinjen som JSON och bifoga den till en biljett så att nästa person ser samma nummer istället för att försöka återskapa din session.
Klicka på Resource Waterfall-ikonen i DevSuite Pro-dockan. Allt som sidan har laddat hittills visas på tidslinjen direkt.
Ladda om med panelen öppen för att fånga belastningen från den allra första begäran, inklusive själva dokumentet och målningsmilstolparna.
Tryck på blockeringschippet för att bara se renderingsblockerande resurser, eller välj en typ som js eller img. Sortera efter långsammast för att lägga den värsta gärningsmannen överst.
Klicka på valfri rad för dess fullständiga URL, protokoll, storlekar, status och en fas-för-fas-uppdelning i millisekunder - och kopiera URL:en om du behöver det.
Export JSON kopierar hela tidslinjen med milstolpar och summor, redo att klistra in i en biljett eller spara som en före-och-efter-post.
Installera DevSuite Pro gratis och lås upp 71+ utvecklarverktyg för din webbläsare.
