Resource Waterfall zīmē katru lapas pieprasījumu laika skalā, katra josla ir sadalīta reālajās fāzēs — rindā, DNS, TCP, TLS, gaidīšana un lejupielāde — ar marķieriem FCP, LCP, DOMContentLoaded un ielādei.
Kad lapa šķiet lēna, jautājums vienmēr ir viens: ko tā gaida? Pašas pārlūkprogrammas atbilde atrodas tīkla panelī, kas nozīmē DevTools atvēršanu, pārbaudāmās lapas atvilktnes pievienošanu un atkārtotu ielādi, lai uztvertu ielādes sākumu.
Resource Waterfall ievieto šo laika skalu peldošā panelī blakus lapai. Katrs pieprasījums tiek parādīts kā josla, kas ir novietota pēc tā sākuma un segmentēta pēc tā, kur faktiski pagāja laiks: rindā vai apstājies, DNS uzmeklēšana, TCP savienojums, TLS rokasspiediens, servera gaidīšana, pēc tam lejupielāde. Garš zils segments ir lēns serveris; garš zaļš ir resns fails; garš pelēks nozīmē, ka pieprasījums gaida savu kārtu. Atšķirība nosaka, kas jums jālabo.
Pārtrauktie marķieri visā laika skalā parāda First Contentful Paint, Largest Contentful Paint, DOMContentLoaded un ielādē, lai jūs varētu redzēt, kuri pieprasījumi tiek pabeigti, pirms lietotājs kaut ko redz un kuri joprojām tiek izpildīti pēc tam. Renderēšanu bloķējošie resursi un kešatmiņas trāpījumi tiek atzīmēti katrā rindā, un viens bloķēšanas filtrs samazina sarakstu līdz tam, kas faktiski aizkavē pirmo krāsu.
Filtrējiet pēc veida, meklējiet pēc URL vai kārtojiet pēc lēnākā vai lielākā, lai ātri atrastu ļaunāko likumpārkāpēju. Noklikšķiniet uz jebkuras rindas, lai skatītu tās pilnu URL, protokolu, pārsūtīšanas un atšifrētos izmērus, statusu un pilnīgu fāzes sadalījumu. Pieprasījumi, kas tiek saņemti, kamēr panelis ir atvērts, tiek straumēti tieši, un Export JSON kopē visu laika skalu, ieskaitot atskaites punktus, lai veiktspējas konstatējumu varētu nodot kādam citam bez ekrānuzņēmuma.
Katra josla ir sadalīta rindā, DNS, TCP, TLS, gaidīšana un lejupielāde, tāpēc lēns serveris, trekns fails un rindas pieprasījums ir uzreiz atšķirami.
Pārtrauktās līnijas FCP, LCP, DOMContentLoaded un load parāda, kuri pieprasījumi tiek pabeigti, pirms lietotājs redz saturu, un kuri joprojām darbojas pēc tā.
Viens klikšķis samazina sarakstu līdz resursiem, kas faktiski aiztur pirmo krāsu, un kopsavilkuma joslā tiek rādīts kopējais bloķēšanas skaits.
Resursi, kas tiek apkalpoti no kešatmiņas, tiek atzīmēti un marķēti, nevis tiek rādīti kā noslēpumainas nulles baitu rindas, lai jūs varētu pārbaudīt, vai kešatmiņa patiešām darbojas.
Sašauriniet pēc veida — dokuments, CSS, JS, attēli, fonti, XHR, multivide — meklējiet pēc URL vai kārtojiet pēc lēnākā vai lielākā, lai dažu sekunžu laikā sasniegtu ļaunāko likumpārkāpēju.
Kopējiet visu ūdenskritumu kā JSON, tostarp atskaites punktus, kopsummas un katra pieprasījuma fāzes, lai pievienotu biļetei vai salīdzinātu ar vēlāku izpildi.
Filtrējiet uz renderēšanu bloķējošiem resursiem un skatiet precīzas stila lapas un skriptus, kas atrodas starp apmeklētāju un redzamo saturu.
Kārtojiet pēc lēnākā un skatieties, kā augšpusē parādās analītikas, fonta vai tērzēšanas nodrošinātājs ar ilgu gaidīšanas posmu, kam nav nekāda sakara ar jūsu kodu.
Izlasiet fāzes krāsas: gaidīšanas laiks ir aizmugursistēmas vai CDN problēma, lejupielādei pavadītais laiks ir faila lieluma problēma. Labojums katram ir atšķirīgs.
Atkārtoti ielādējiet un apstipriniet, ka līdzekļi nāk no kešatmiņas un ka pārsūtīšanas izmēri ir daudz mazāki par atšifrētajiem izmēriem, pierādot, ka saspiešana patiešām ir ieslēgta.
Eksportējiet laika skalu kā JSON un pievienojiet to biļetei, lai nākamā persona redzētu tos pašus numurus, nevis mēģinātu reproducēt jūsu sesiju.
Noklikšķiniet uz ikonas Resource Waterfall DevSuite Pro dokstacijā. Viss, ko lapa līdz šim ir ielādējusi, nekavējoties parādās laika skalā.
Atkārtoti ielādējiet ar atvērtu paneli, lai tvertu slodzi no paša pirmā pieprasījuma, tostarp pašu dokumentu un krāsošanas atskaites punktus.
Nospiediet bloķēšanas mikroshēmu, lai redzētu tikai renderēšanas bloķējošos resursus, vai izvēlieties veidu, piemēram, js vai img. Kārtojiet pēc lēnākā, lai liktu virsū ļaunāko likumpārkāpēju.
Noklikšķiniet uz jebkuras rindas, lai skatītu tās pilnu URL, protokolu, izmērus, statusu un pakāpenisku sadalījumu milisekundēs, un nokopējiet URL, ja tas ir nepieciešams.
Eksporta JSON kopē pilnu laika skalu ar atskaites punktiem un summām, kas ir gatavas ielīmēt biļetē vai saglabāt kā ierakstu pirms un pēc.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 71+ izstrādātāju rīkus savam pārlūkam.
